在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 属性依然还不支持。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在java中notify和notifyAll的区别
- 我在近期求职中遇到的前端面试问题及其解法
- 腾讯云 云开发 部署 Blazor网站
- 最新基准测试:Kafka、Pulsar 和 RabbitMQ 哪个最快?
- 基于飞桨实现高光谱反演:通过遥感数据获取土壤某物质含量
- 飞桨Tracking目标跟踪库开源!涵盖业界主流的VOT算法,精准检测动态目标轨迹
- 基于react的组件库主题设计方案
- Xilinx MPSoC PS/PL之间的数据交互和外设设计
- 基于Res-Unet网络实现肝脏肿瘤分割任务
- golang判断map中key是否存在的方法
- 迁移实战:一次AntDB(基于pgxl分布式架构的数据库)数据库迁移经验分享
- 看完这篇文章,99%的人都会使用Mysql Explain工具
- 浅析MySQL存储引擎序列属性
- 详述MySQL Using intersect交集算法
- 案例:强制开库遭遇ORA-16433的处理过程