你的位置:首页 > 软件开发 > Java > JavaScript阻塞剖析与改善

JavaScript阻塞剖析与改善

发布时间:2016-05-22 23:00:04
一、阻塞特性《高性能JavaScript》一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度。说到无阻塞加载JavaScript要点,我们就有必要知道,为什 ...

JavaScript阻塞剖析与改善

一、阻塞特性

《高性能JavaScript》一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度。

说到无阻塞加载JavaScript要点,我们就有必要知道,为什么在html中不管是内联JavaScript还是外联,会影响到页面的性能?

原因是:JavaScript是单线程,在JavaScript运行时其他的事情不能被浏览器处理。事实上,大多数浏览器使用单线程处理UI更新和JavaScript运行等多个任务,而同一时间只能有一个任务被执行。所以在执行JavaScript时,会妨碍其他页面动作。这是JavaScript的特性,我们没法改变。

并且,html解析过程是至上而下的,当html解析器遇到诸如<script>、<link>等标签时,解析器就会停止下来,去下载相应的内容。需要注意的是,在加载<script>、<link>标签时都会阻止解析器往下执行。

那什么时候,html解析器才能往下继续解析html文档呢?

就JavaScript而言,当html解析器遇到<script>标签,无论它是内联还是外联,页面中的下载和解析过程都必须停止,直到<script>从外部加载进来的JavaScript或内联的JavaScript运行完毕,方可继续解析。在高版本的浏览器当中,允许并行下载JavaScript文件,当一个<script>标签正在下载外部资源时,不必阻塞其他<script>标签,但是不幸地是,JavaScript的下载仍然会阻塞其他资源的下载,例如图片。这里还需要值得注意的是,对于样式和脚本的先后顺序同样会影响到浏览器的解析过程,比如将<link>标签放在<script>标签前面,如果样式下载受阻,那么将阻塞<link>后面的<script>加载和执行,究其原因主要在于:script脚本在执行过程中可能会引用到相关样式。

了解了JavaScript在html中的阻塞特性,我们再来看看如何改善其阻塞特性。

二、改善方法

--最简单做法--:

为了让html文档在解析时,尽量地快,常规的做法是将<script>标签放到</body>标签的前面,这样就不会阻塞html中其他资源的下载了。

如下:

JavaScript阻塞剖析与改善

尽管脚本下载之间互相阻塞,但页面已经下载完成并且显示在用户面前了,进入页面的速度不会显得太慢。且,为了让脚本之间的互相阻塞最小化,通常将多个相关的JavaScript文件合并为一个JavaScript文件,另外这样做带来的好处不仅让脚本之间阻塞变小,还减少了http请求的数量。

但,这样做JavaScript文件下载之间还是会阻塞,特别是当JavaScript文件逐渐变多时。

故而,引入无阻塞脚本技术。

无阻塞脚本技术主要分为两大类:

  1、  HTML5中的defer和async;

  2  动态创建script为dom元素。

下面将分别介绍。

--HTML5中的defer和async--:

HTML5中提供了两个属性供<script>标签使用,目的就是为了无阻塞加载JavaScript。

用法如下:

<script src='/images/loading.gif' data-original="file1.js" defer></script><script src='/images/loading.gif' data-original="file2.js" async></script>

原标题:JavaScript阻塞剖析与改善

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。