在浏览器内核WebKit中并行加载外部脚本
来源:互联网 发布:mac图片另存为快捷键 编辑:程序博客网 时间:2024/05/22 13:15
在上一篇文章网站性能优化-将Script放到HTML文件中尽量靠近尾部原理中,我说明其根源在于浏览器对脚本处理的方式是因为对脚本的非并行下载方式。
其实,在Webkit内核的浏览器中,是可以做到并行加载外部脚本的。PS:是WebKit内核哟,IE系又是一个杯具~~
在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 属性依然还不支持。
作者:Tony Gentilcore 翻译:小李刀刀
文章引用地址:http://www.iefans.net/webkit-jiazai-jiaoben/
- 在浏览器内核WebKit中并行加载外部脚本
- 让网站 在国产(360)浏览器默认使用极速模式(webkit内核) 加载
- 在Android手机中内置了一款高性能webkit内核浏览器
- 浏览器内核WebKit编年史
- 浏览器内核WebKit编年史
- 解决three.js加载外部obj文件在chrome浏览器中无法显示的问题
- 专注浏览器,专注webkit内核
- WebKit 中异步加载脚本(Running scripts in WebKit)- 大大提升界面呈现速度
- 动态加载外部脚本
- 在WebKit引擎的浏览器中实现CSS滤镜特效
- Webkit内核浏览器解析Textarea innerHTML问题
- Webkit内核的浏览器默认CSS属性
- 自定义webkit内核浏览器滚动条
- C# 用“WebKit.NET”封装内核浏览器
- 浏览器内核Trident/Gecko/WebKit/Presto
- 移动浏览器的内核WebKit介绍
- 浏览器内核Trident/Gecko/WebKit/Presto
- 浏览器内核Trident/Gecko/WebKit/Presto
- 如何在 Web 服务器上设置 SSL
- ARM芯片选型简易指南
- c# il (中间代码)exe,dll(编译成的程序) 之间的转换
- c++ primer 学习之---------公用、私有和受保护的继承
- 图片保存到数据库和从数据库读取图片并显示(C#)
- 在浏览器内核WebKit中并行加载外部脚本
- 【转】图片动态切换的实现
- QuickMenu破解方法
- SQL Server 2008实现"编辑所有行"和"返回所有行"的方法
- linux 命令入门一
- WINCE 6.0 安装
- WCF服务编程设计规范
- wince6.0 开发流程
- Post build steps