YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Defer parsing of JavaScript

前端性能优化:Defer parsing of JavaScript

今天介绍 PageSpeed 的前端性能优化规则是:Defer parsing of JavaScript(暂缓 JavaScript 解析)。

Defer parsing of JavaScript 规则简介

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

译文:为了加载一个页面,浏览器必须解析页面中所有<script>标签中的内容,解析所有这些脚本会产生额外的加载时间。通过最小化加载页面所必须的JavaScript脚本,并通过只在需要执行脚本的时候才延迟解析这些脚本,我们可以减少初始化加载页面所需要的时间。

其实我们前面介绍的《Put JavaScript at bottom》就算是一种暂缓 JavaScript 解析的方法。但我们这里的暂缓 JavaScript 解析包含了更多的内容:

  • minimizing the amount of JavaScript needed to render the page,首先是只加载渲染页面必须的JavaScript
  • deferring parsing of unneeded JavaScript until it needs to be executed,其次是只在需要解析的时候才解析执行那些初始化时不必要的脚本。

Put JavaScript at bottom 比较起来则更加粗矿一些,不管在初始化时需不需JavaScript脚本都加载了,只做到了延迟解析而已。不过这里要强调一点,Defer parsing of JavaScript 规则是针对移动设备更进一步的优化措施,所以为了给移动设备节省流量,需要只加载需要的脚本,减少下载组件的流量。同时这样处理,可以让程序更快的相应用户。这些都是移动应用要特别注意的,数据流量和应用程序的相应速度

Google的工程师统计过解析JavaScript脚本对性能的损失情况:

In our own tests conducted in early 2011, we found that on modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.

Google的工程师2011年统计的结果是每解析1K的JavaScript,就要花费浏览器1ms的时间。不管脚本来自远程服务器、本地浏览器缓存或者HTML5离线模式,解析脚本花费的时间都是不会变的。所以在初始化加载的时候,只加载需要的脚本,并延迟解析是给用户更好的用户体验。

Defer parsing of JavaScript 的方法

实现暂缓 JavaScript 解析有如下几种方法:

  • Defer loading of JavaScript,延缓加载JavaScript(这个我稍后会介绍)。大家也可以参考Nicholas C. Zakas 的博文《Loading JavaScript without blocking》。
  • <script async>,在SCRIPT标签中添加async属性,有了这个属性, Internet Explorer、Firefox、Chrome 和 Safari 浏览器都会异步加载SRC属性中指定的外部JavaScript资源。另外大家可以参阅《Prefer asynchronous resources》规则了解一些如何异步加载脚本。
  • load JavaScript in comments,in comments 指的是将JavaScript作为文本下载下来。这种方法保证了所有的JavaScript在初始页面加载加载,而不是要求的JavaScript解析。在需要的时候再使用evel()方法将需要的脚本转换成可执行的JavaScript代码。淘宝网首页有一段时间就用隐藏的textare存储这些JavaScript Comments。
  • moving your <script> tags to the end of the page,这是一个选择,不过用户可能不会等到所有脚本都解析加载文成之前就开始点击页面了,所以加载器中的JavaScript时,最大限度地减少花费在浏览器中显示的页面加载完成的时间是很重要的。要不然就是界面显示了,但是交互的脚本没有执行,可能用户点击某个按钮要显示的弹出窗口的交互效果就显示不了,或者原本是Ajax请求的链接,无法获取数据。这个情况我们是会遇到的,所以我们在做前端开发的时候还要求向后兼容,在JavaScript没有准备好,或者不支持JavaScript的时候这个页面的每个链接都是可以点击,用户可以获取信息的。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Defer parsing of JavaScript

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)