高性能Javascript--脚本的无阻塞加载策略

Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。

在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行。Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。 

高性能Javascript--脚本的无阻塞加载策略_第1张图片

从基本层面说,这意味着 11 12 13 14

此代码展示了所推荐的 

此 URL 调用 2.7.0 版本的 yahoo-min.js 和 event-min.js 文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此 URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个

一个带有defer属性的 8 9 10 11

如果浏览器不支持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之前执行。

  • 浏览器
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.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的几乎所有文档内容,一个新的

你可能感兴趣的:(高性能Javascript--脚本的无阻塞加载策略)