笔记:
- 多数浏览器使用单一线程处理UI刷新和javascript脚本执行,同一个时刻只能做一件事
- <script>标签出现,导致页面的下载和渲染都必须停下来等待脚本执行完毕。
- 遇到<scirpt>必须先执行javascript代码,再继续解析和渲染页面。同时在使用src属性加载也是如此。
- IE8,FireFox3.5,safari4,chrome2都允许并行下载javascript文件。
- 由于脚本会阻塞页面其他资源的下载,因此推荐将所有的<script>标签都尽可能放在<body>底部,以尽量减少页面下载影响。
- 脚本放在底部。
- 每一个<script>初始化下载都会阻塞页面渲染,所以减少页面包含<script>标签数量有利于改善这一情况。
- 可以把多个文件合并成一个。
- 减少Javascript文件大小并闲置HTTP请求数仅仅是创建响应迅速的WEB应用的第一步。
- HTML4为<script>标签拓展了属性,defer
- 任何带有defer属性的<script>元素在DOM完成加载之前都不会被执行。
- 使用动态脚本节点下载文件时,返回的代码通常会马上执行。
- FireFox,Opera,Chrome,Safari3在<script>完成以后触发一个onload,IE会触发readystatechange
- IE,uninitialized,loding,loaded,interactive,complete.
- 如果多个文件的下载顺序很重要,更好的做法是把他们按照正确顺序合并成一个文件。下载这个文件就能一次性获得所有代码,过程是异步的,所以文件大一点没关系。
- 另一种无阻塞的方法,XMLHttpRequest(XHR)。局限性,文件与所请求的需要在同一个域下,将不能在CDN上下载
- YUI3引用种子文件
- Yahoo!. LazyLoad,loadScript函数加强版
- LABjs
小结:
- </body>闭合之前,将所有的<script>标签放在页面底部,这能确保脚本执行前页面已经完成了渲染。
- 合并脚本,页面中<script>标签越少,加载越快,响应越迅速,无论外链文件还是内链文件。
- 多种无阻塞下载方法:
- 使用<script>defer
- 动态创建<script>下执行代码
- XHR对象下载Javascript并注入页面中。