《无阻塞加载性能优化方案.docxVIP

JavaScript无阻塞加载性能优化方案2014-10-09 09:48 Ico_CocoIco_Coco的博客 字号：T | T在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部 。原因是，事实上，大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务，而同一时间只能有一个任务被执行。Javascript运行了多长时间，那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。AD： 2014WOT全球软件技术峰会北京站 课程视频发布11月21日-22日 与WOT技术大会相约深圳 现在抢票Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题。在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部?。原因是，事实上，大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务，而同一时间只能有一个任务被执行。Javascript运行了多长时间，那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。从基本层面说,这意味着script标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的 JavaScript 代码是内联的还是包含在一个不相干的外部文件中,页面下载和解析过程必须停下,等待脚本 完成这些处理,然后才能继续。这是页面生命周期必不可少的部分,因为脚本可能在运行过程中修改页面 内容。典型的例子是 document.write()函数,例如:html???head?????titleScript?Example/title???/head? ??? ???body??????p?????????script?type=text/javascript????????????document.write(The?date?is??+?(new?Date()).toDateString()); ?????????/script? ??????/p???/body? ?/html?当浏览器遇到一个script标签时,正如上面 HTML 页面中那样,无法预知 JavaScript 是否在p标签中 添加内容。因此,浏览器停下来,运行此 JavaScript 代码,然后再继续解析、翻译页面。同样的事情发生 在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后 解析并运行此代码。此过程中,页面解析和用户交互是被完全阻塞的。因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有script标签放在尽可能接近body 标签底部的位置,尽量减少对整个页面下载的影响。例如:html???head?????titleScript?Example/title?????link?rel=stylesheet?type=text/css?href=styles.css? ???/head??? ???body?????pHello?world!/p?????--?Example?of?recommended?script?positioning?--? ???????script?type=text/javascript?src=file1.js/script? ???????script?type=text/javascript?src=file2.js/script? ???????script?type=text/javascript?src=file3.js/script???/body? ?/html?此代码展示了所推荐的script标签在 HTML 文件中的位置。尽管脚本下载之间互相阻塞,但页面已经 下载完成并且显示在用户面前了,进入页面的速度不会显得太慢。这就是上面提到的将JS放到底部。另外，Yahoo! 为他的“Yahoo! 用户接口(Yahoo! User Interface,YUI)”库创建一个“联合句柄”,这是通过他 们的“内容投递网络(Content Delivery Network,CDN)”实现的。任何一个网站可以使用一个“联合句柄”URL 指出包含 YUI 文件包中的哪些文件。例如,下面的 URL 包含两个文件:script?type=text/javascript?src=/combo?2.7.0/build/yahoo/yahoo-min.js2.7.0/build/event/event-min.js/script??此 URL 调用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此 URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个 script标