《Web性能实践日志》一1.5 浏览器的发展

序 Web性能实践日志 您手中的这本书收录了大量已发表的 Web 性能相关的文章.其中包括了许多性能相关的主题,如开源工具.缓存.移动网络和应用.自动化.用户体验优化.HTML5.JavaScript.CSS3.指标.ROI和网络协议.这些文章的作者形形色色,有全球最大互联网公司的职员,也有独立顾问.作者们代表至少7家Web性能初创公司:Blaze.Cloud-Flare.Log Normal.Strangeloop.Torbit.Turbobytes和Zoompf.主题和贡献者范围之广令人印象

第2章 localStorage读取性能 Web性能实践日志 作者:Nicholas Zakas 在Web开发人员使用的工具中,Web Storage(http://dev.w3.org/html5/webstorage/)迅速成为了HTML5新增的最受欢迎的功能.具体来说,localStorage提供了快速简单的客户端数据存储功能,可以跨多个会话存储数据,这使得localStorage在世界各地Web开发人员中被广为应用.通过使用简单的键值接口,我们看到很多网站以各种独特而有趣的方式应用loc

第1章 WebPageTest内部原理 Web性能实践日志 作者:Patrick Meenan 我想借着今年的这次机会向大家介绍一下WebPageTest是如何从浏览器获取性能数据的.虽然它与Windows下一些工具的技术原理大同小异,但本章介绍的内容并不能代表这些工具的工作原理. 首先,请看图1-1,这张图可以帮助我们从浏览器端理解Windows的网络堆栈. 不管是什么浏览器,只要运行在Windows下,体系结构几乎就如图1-1描述的一样,所有的传输都是通过Windows Socket API

1.3 决定浏览器架构 现在我们可以拦截任意函数调用了,它变成了一个可以识别指定函数的功能,最好是所有浏览器共用一份代码,这样就可以尽可能多地重用代码了.在WebPageTest中,如果想要拦截所有Winsock调用,我们需要解析主机名,连接套接字以及读写数据(见图1-2). 这赋予了我们访问所有浏览器网络通信的权限,意味着我们完全可以监测浏览器在做什么.除了必须解码原始字节流以外,其他实现都很简单,它还提供了一个跨浏览器的统一度量方式.SSL添加了一点混淆,所以我们也需要拦截浏览器使用各种SS

2.4 跟进 这篇文章一经发表就引发了大量围绕localStorage性能的讨论.讨论最开始出现在Mozilla 的Chris Heilmann的博客文章中,题为"localStorage没有简单的解决方案".在文章中,Chris认为localStorage作为一个整体存在性能问题.在很多博文讨论(其中也包括我的)之后,我最终能够联系上Firefox负责实现localStorage的工程师Jonas Sicking.事实上,localStorage所存在的性能问题并不只是比从对象读取数

1.2 代码注入 很幸运,Windows提供了几种向进程中注入任何代码的途径.http://www.codeproject. com/KB/threads/winspy.aspx这里介绍了几种不同方法,当然还有很多其他方法,但是大部分方法这里都有了.有些方法可以把你的代码插入到每一个进程中,但是我想要更有针对性一点的方法,比如仅仅使用我们感兴趣的浏览器作为分析工具.所以经过一些错误尝试后,我最终决定使用CreateRemoteThread/LoadLibrary方法,这个方法基本可以允许你强制任

2.2 这是怎么回事 为了保持跨浏览器会话,localStorage的数据被写入磁盘中.这意味着当你从localStorage中读取数据时,你实际上是从硬盘驱动器上读取这些字节.读写硬盘开销高昂,特别是相对于读写内存来说.从本质上讲,这正是我的基准测试所测试的内容,即从缓存(对象属性)读取数据和从磁盘(localStorage)读取数据的速度比较. 更有趣的是,localStorage按源存储数据,这意味着,在同一时间内,浏览器中的多个标签页可以访问相同的localStorage数据. 这对于那

2.3 优化策略 既然从localStorage读取数据有一定开销,那么这会怎样影响你如何使用这一技术呢?在下结论之前,我运行了另一个基准测试(http://jsperf .com/localstorage-string- size),以确定从localStorage读取不同大小数据的效果.我们保存4种不同大小的字符串(100个字符.500个汉字.1000个字符和2000个字符)到localStorage中,然后把它们读取出来.结果有点令人惊讶,在所有浏览器中,读取数据量的大小不会影响读取速度的

1.4 获取代码 WebPageTest使用BSD协议,所以不论作为什么用途,都欢迎各位重用这里面的代码.项目存放在Google Code上(http://code.google.com/p/webpagetest/),下面还有一些你可能感兴趣的文件. Winsock API拦截代码(http://webpagetest.googlecode.com/svn/trunk/agent/ wpthook/hook_winsock.cc). 代码注入(http://webpagetest.google