在WebKit中并行加载外部脚本译:

作者:Tony Gentilcore

原文:http://webkit.org/blog/1395/running-scripts-in-webkit/

WebKit 正式版已经正式支持HTML5中<script>标签的 async 和 defer 属性了。如此一来,我们就能在不阻塞网页中其它元素下载的情况下,以异步方式下载JavaScript,从而大大提高了网页加载速度。

正常情况下,网页分析器检测到有外部脚本时,会暂停解析,并发起一个请求去下载该脚本,一直到这个脚本完全下载并执行之后解析才会继续进行。

<script src="myBlockingScript.js"></script>

在下载脚本时,浏览器会被阻塞,不做其它任何事情(比如解析HTML,执行其它脚本以及渲染网页布局等)。尽管通过WebKit的预加载扫描器能够利用网页显示的空闲时间预先下载资源,在一定程度上改善了浏览器的阻塞状况,但是网络延迟依然会导致网页加载缓慢。

虽然围绕性能优化的问题已经有了很多不错的技术(参见:延迟加载异步加载),但是他们都无法避免地引入了额外的代码,或是针对浏览器的Hacks写法。作为更好的办法,现在我们可以把不需要以同步方式执行的脚本标记为 async 或者 defer。以下是具体的做法:

<script async src="myAsyncScript.js" onload="myInit()"></script>

<script defer src="myDeferScript.js" onload="myInit()"></script>

标记为 async 或者 defer 的脚本都会立刻开始下载,不阻塞浏览器的其它解析工作,而且它们都支持可选的 onload 事件,这样就能在脚本加载完成时开始执行依赖于该脚本的代码。async 和 defer 之间的不同之处在于执行的时机。async 脚本会在自身被下载完、window.load 事件执行前立刻被执行,这意味着 async 脚本有可能(应该说很可能)不会按照它们在页面中出现的顺序被执行;而 defer 脚本则一定是按照它们在页面中出现的先后顺序执行,准确地说,是在整个页面被解析完成之后,文档的DOMContentLoaded事件之前执行。

这里有个例子,在这个例子中一个外部脚本下载需要1秒钟,紧跟在这个外部脚本后面是一段执行需要1秒钟的内嵌脚本。我们可以看到这个页面加载话费了2秒钟时间。

还是同一个例子,只是是其中的外部脚本被标记为 defer。由于签入的脚本可以在外部脚本被下载的同时执行,因此我们看到这个页面加载的速度大约是之前的两倍。

除了WebKit核心的浏览器以外,Firefox早就支持 defer 和 onload 属性,async 属性从 3.6 版本开始支持。 IE浏览器也很早就支持 defer 属性,IE9 增加了对 onload 属性的支持,但是 async 属性依然还不支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Enterprise Library 4 缓存应用程序块的设计

缓存应用程序为以下目的而设计: 提供一个大小可管理的 API 集合。 允许开发人员添加标准的缓存操作到他们的应用程序中,而不用学习应用程序块的内部工作。 ...

22060
来自专栏蓝天

通用的进程监控重拉起bash脚本process_monitor.sh

9310
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(十四) ——Redis RDB文件创建、载入与自动保存原理

《Redis设计与实现》读书笔记(十四) ——Redis RDB文件创建、载入与自动保存原理 (原创内容,转载请注明来源,谢谢) 一、概述 r...

34760
来自专栏lgp20151222

SVN错误:SVN Working copy XXX is too old

这是因为使用了低版本的svn生成了.svn内文件内容,但是,使用高版本svn同步时便出现该问题。

19410
来自专栏小樱的经验随笔

【批处理学习笔记】第十二课:常用DOS命令(2)

 文件管理 type 显示文本文件的内容。 copy 将一份或多份文件复制到另一个位置。 del 删除一个或数个文件。 move 移动文件并重命名文件和目录。(...

29840
来自专栏蓝天

快速上手,协程剖析

协程也叫微线程,英文名称为coroutine。一个进程可以有多个线程,一个线程可以有多个协程,这是协程和线程间的关系。不同的是,线程由系统调度,但协程需要...

12210
来自专栏后台及大数据开发

Linux巩固记录(6) Hbase环境准备-zookeeper安装

Hbase是运行在hadoop之上,所以请参考第3篇文章搭建好一个master,两个slave的hadoop环境,我采用的版本为hadoop2.7.4

10840
来自专栏Java面试笔试题

JDBC中如何进行事务处理?

Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务;当事务完成后用commit()显式提交事务;如果...

18320
来自专栏Java开发

Linux常用命令

17720
来自专栏Java架构

Java 程序员须知道和掌握的 Linux 命令

19830

扫码关注云+社区

领取腾讯云代金券