《高性能 JavaScript》读书笔记(一)

512 查看

一. 加载和执行——优化JavaScript规则:

1. 将脚本放在底部;
2. 减少页面中外链脚本文件的数量:

  比如,下载单个100kb的文件将比下载4个25kb的文件更快。这个可以通过离线打包工具或者类似Yahoo!combo handler的实时在线服务来实现;
3. HTML4为标签定义了一个扩展属性:defer:

   指明本元素所含的脚本不会修改DOM,因此代码能安全的延迟执行,例如:

  带有defer属性的标签可以放置在文档任何位置,对应的js文件将在页面解析到标签时开始下载,但并不会执行,直到DOM加载完成(onload事件被触发之前)。当一个带有defer属性的JavaScript文件下载时,它不会阻塞浏览器的其他进程,因此这类文件可以与页面中的其他资源并行下载。

  世界每天在变化,前端也不例外。关于defer,还有async,最新情况请看:https://html.spec.whatwg.org/mul … l#attr-script-defer。简单总结如下:
    ①defer、async只能用于外链文件;
    ②既没有设置defer,也没有设置async时,脚本文件按在页面中出现的位置加载执行,并且阻塞页面解析;
    ③若设置了defer,脚本文件按在页面中出现的位置加载,并且不会阻塞页面解析,等页面解析完onload事件被触发前执行;
    ④若设置了async,脚本文件按在页面中出现的位置加载执行,加载过程不会阻塞页面解析,执行过程会阻塞页面解析;
    ⑤既设置async,也设置了defer,因为各浏览器的效果不同,请自行检测。

4. 动态脚本元素:

进一步封装:

5. XMLHttpRequest 脚本注入: