Notes of 《Even Faster Web site 》- 1

其实这是09年的书了,有点老,浏览器是在不断进化的,所以个别内容只当参考,实际用时还是要查最新的文档。

Chapter 1, AJAX

使用AJAX,数据包应该可能的小。AJAX的常见错误是把所有应用数据都发给浏览器,这会再次引入AJAX本应避免的延迟问题。

DOM API非常低效,运行程序的最大开销往往是DOM而非Javascript。

对Alexa排名前100的网站做测试,脚本的开销低于15%,而处理css是最大的开销。

通常情况下,瓶颈不是JS而是Dom。避免使用让JS更快的奇技淫巧,大多数情况下,他们只会降低代码质量,而不会有多大的性能提升。

 

Chapter 2,创建快速相应的web应用

浏览器把所有的输入(键盘,鼠标)都通过操作系统放到事件队列中,然后取出事件进行处理。这个过程是单线程的,浏览器使用单线程从队列中取出事件,然后对事件本身进行处理,因此浏览器每次只能处理这些任务中的一个,并且任意一个任务都能阻止其他任务的进行。

浏览器在执行页面的JS期间无法相应用户事件,因此要尽可能地执行完页面中所有的JS极其重要,否则浏览器可能会冻结。

给JS函数添加测试时间代码:var start = new Date().getMilliSeconds(); … stop – start

Firebug 中包含一个JS代码性能分析器。

解决运行时间长的js:1,HTML5 worker 来处理长时间运行的js,这会在后台创建独立线程来运行。长时间运行的js操作都应该委托给worker。(HTML5 worker可参考:http://www.w3schools.com/html/html5_webworkers.asp );2,使用setTimeout把运行时间很长的计算拆成独立的区块。

清理内存:1)使用delete关键字从内存移除不再需要的js对象 ;2)从网页的DOM树上移除不再需要的节点。

 

Chapter 3,拆分初始化负载

把js文件拆分成初始时加载和初始化后加载两个文件。对于大多数web应用程序来说,最好把在onload事件之前执行的js拆分成一个文件,下载完之后的剩下的js采用无阻塞下载技术立即下载。(Doloto工具 – 自动拆分js文件)

在延迟加载的代码不与界面元素相关联的情况下,可以使用stub function来解决问题。stub function是一个与原函数名称相同但函数体为空,或者用一些临时代码代替原有内容的函数。

拆分css也是有益的,但是相对于拆分js,后者节省的资源要少一些,因为css整体通常比js小,而且下载css不会象js那样阻塞。

 

Chapter 4,无阻塞加载脚本

IE8 是第一个支持脚本并行下载的浏览器。虽然它实现了多个js文件的并行下载,但仍在脚本下载并执行完毕之前阻塞图片和iframe的下载。

我们真正想要实现的是脚本和其他组件并行下载。

iframe是开销最高的dom元素,至少比普通的dom元素高出一个数量级。

Screen Shot 2013 08 01 at 上午9 45 07

— defer 貌似是最实用的一个,主流浏览器都支持并行下载,而且添加方便。(About script defer : http://www.w3schools.com/tags/att_script_defer.asp )

 

 

 

 

0 comments:

Leave a Reply

Your email address will not be published. Required fields are marked *