Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。
在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行。Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。
从基本层面说,这意味着 11
12 13 [/code]
当浏览器遇到一个 11 12 13 14 [/code]
此代码展示了所推荐的 [/code]
此 URL 调用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此 URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个 [/code]
一个带有defer属性的 8 9 10 11 [/code]如果浏览器不支持defer,那么弹出的对话框的顺序是“defer”,“script”,“load”。
如果浏览器支持defer,那么弹出的对话框的顺序是“script”,“load”,“defer”。
根据大家评论的反馈,HTML5新增了一个async属性。在上述的基础上,对比一下defer与async的异同:
相同之处:
- 加载文件时不阻塞页面渲染
- 使用这两个属性的脚本中不能调用document.write方法
- 有脚本的onload的事件回调
区别点:
- html的版本 html4.0中定义了defer;html5.0中定义了async
- 执行时刻
每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的 DOMContentLoaded之前执行。
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafariBasic support1.01.0 (1.7 or earlier)(Supported)(Supported)(Supported)asyncattribute(Supported)3.6 (1.9.2)10–(Supported)deferattribute(Supported)3.5 (1.9.1)4–(Supported)
Dynamic Script Elements 动态脚本元素
DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的 [/code]将此代码放置在body的关闭标签之前。这样做的好处是,首先,这样确保Javascript运行不会影响其他页面的其他部分显示。其次,当第二部分Javascript文件完成下载,所有应用程序所必须的DOM已经创建完毕,并做好被访问的准备,避免使用额外的事件处理(如window.onload)来得知页面是否已经准备好了。
另一个选择是直接将loadScript()函数嵌入在页面中,这可以减少一个http请求的开销。例如:一旦页面初始化代码下载完成,还可以使用loadScript()函数加载页面所需的额外功能函数。
介绍一个通用的工具,Yahoo! Search的Ryan Grove创建了LazyLoad库(参见:http://github.com/rgrove/lazyload/ )。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下:
Summary 总结
- 将所有<script>标签放置在页面底部,紧靠关闭标签的上方。此方法可以保证页面在脚本运行之前完成解析。
- 将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。
- 有几种方法可以使用非阻塞方式下载Javascript:
- 为<script>标签添加defer属性
- 动态创建<script>元素,用它下载并执行代码
- 用XHR对象下载代码,并注入到页面
通过上述策略,可以极大提高那些使用Javascript代码的网页应用的实际性能。
参考书籍《高性能Javascript》。
高性能Javascript专题,第二篇:高性能Javascript--高效的数据访问。
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |