高性能Javascript第一章加载和执行

笔记:

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

​ 

小结:

  1.    </body>闭合之前,将所有的<script>标签放在页面底部,这能确保脚本执行前页面已经完成了渲染。
  2. 合并脚本,页面中<script>标签越少,加载越快,响应越迅速,无论外链文件还是内链文件。
  3. 多种无阻塞下载方法:
  4. 使用<script>defer
  5. 动态创建<script>下执行代码
  6. XHR对象下载Javascript并注入页面中。

 

猜你喜欢

转载自blog.csdn.net/qq_37021554/article/details/84900119