资讯专栏INFORMATION COLUMN

JavaScript性能优化之加载与执行

call_me_R / 1982人阅读

摘要:在浏览区中的性能,可以认为是开发者所面临的最严重的可用性问题。优化这个问题的第一步从它的加载和执行开始。这意味着在对象的事件触发后再下载脚本。属性指明本元素所含的脚本不会修改,因此代码能够安全地执行,但是浏览器的支持情况不理想。

JavaScript在浏览区中的性能,可以认为是开发者所面临的最严重的可用性问题。 优化这个问题的第一步从它的加载和执行开始。

霸道的script标签
script标签每次出现都会霸道地让页面等待脚本的解析和执行,无论当前的JavaScript代码是内嵌还是外联,页面的下载和渲染都必须停下来等待脚本执行完毕。这是页面生存周期的必要环节,因为脚本执行过程中可能会修改页面的内容。比较典型的是document.write()与innerHTML,在JavaScript脚本解析并执行这个过程中,页面的渲染和用户交互是完全阻塞的。

脚本位置
一般情况下,我是习惯用外联方式引入js文件,并且通常将他们放在head标签上,但是现在我必须要改变这种习惯了。
这种看似正常的代码组织实际上有非常严重的性能问题:加入我在head标签内加载了两个JavaScript文件,那我的页面的渲染将等到这两个文件加载和执行完毕才开始,因为浏览器在解析body标签之前,不会渲染任何东西。在它们的加载过程中,将会导致明显的延迟,通常的表现形式为:空白页面,内容无法浏览,无法交互。
以前的浏览器加载脚本是一个加载并且执行完成之后才会去加载下一个,现在这个问题有了改善,即现在允许并行下载JavaScript脚本了,但是上述问题仍然成立。所以这里我学习一下雅虎特别性能小组提出的优化JavaScript的首要原则:将脚本放在底部!

组织脚本
1001 > 254
因为每个script标签初始下载都会阻塞页面渲染,所以我们需要减少script标签的数量来限制HTTP请求数从而改善性能,最好将多个JavaScript文件合并成一个。

无阻塞脚本
无阻塞脚本的秘诀在于:在页面加载完之后才加载JavaScript代码。这意味着在window对象的load事件触发后再下载脚本。这样做的好处是当你下载一个较大的JS文件时,浏览器还是会锁死一段时间,为了避免这种情况,我们需要向页面逐步加载JavaScript文件。

延迟的脚本

script定义了一个扩展属性:defer。defer属性指明本元素所含的脚本不会修改DOM,因此代码能够安全地执行,但是浏览器的支持情况不理想。
除此之外,HTML5引入了async属性,用于异步加载脚本,asnyc与defer相同点在于都用于异步加载脚本,采用的是并行下载,在下载过程中不会产生阻塞。区别在于,asnyc是在加载完成后自动执行,而defer需要等待加载页面完成后执行,在onload事件处理器执行之前被调用。

动态脚本元素

用于DOM的存在,我们可以用JavaScript动态创建HTML里面的元素,当然也包括script元素,这是动态脚本元素的大前提。
这项技术的重点在于:我通过在页面内动态创建一个script元素,并且通过给其src属性赋值来加载脚本,那么脚本会在页面内script元素被创建后才开始加载,那么无论在何时启动下载,文件的下载和执行过程不会阻塞页面的其他进程。

新创建的script元素放在哪?
通常来讲,把新创建的script标签添加到head比添加到body中更加保险,因为当body中的内容没有全部加载完成时,IE可能会抛出一个“操作已终止”的错误信息。

动态创建的文件在被下载后怎样执行?
对于Firefox,Opera,Chrome,Safari来说,会在

阅读需要支付1元查看
<