前端之旅：学习笔记《JS高级编程》第14章

October 10 2016

今天完成了JS高程的第14章，并且开始做百度前端学院2015任务二：JS部分。
看了一篇学习资料 JavaScript 的性能优化：加载和执行

概要如下：

每个文件必须等到前一个文件下载并执行完成才会开始下载。在这些文件逐个下载过程中，用户看到的是一片空白的页面。
从 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 开始都允许并行下载 JavaScript 文件。这是个好消息，因为<script>标签在下载外部资源时不会阻塞其他<script>标签。遗憾的是，JavaScript 下载过程仍然会阻塞其他资源的下载,比如样式文件和图片。尽管脚本的下载过程不会互相影响，但页面仍然必须等待所有 JavaScript 代码下载并执行完成才能继续。
由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。这是优化 JavaScript 的首要规则：将脚本放在底部。
浏览器在解析 HTML 页面的过程中每遇到一个<script>标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。所以减少页面包含的<script>标签数量有助于改善这一情况，不管是内嵌的还是外链的。可以把多个文件合并成一个，这样只需要引用一个<script>标签，就可以减少性能消耗。
为了确保内嵌脚本在执行时能获得最精确的样式信息，建议不要把内嵌脚本紧跟在<link>标签后面。
尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。
当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。
任何带有 defer 属性的<script>元素在 DOM 完成加载之前都不会被执行，无论内嵌或者是外链脚本都是如此。
说明：defer只有 IE 和 Firefox 3.5支持
HTML 5 为<script>标签定义了一个新的扩展属性：async。它的作用和 defer 一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。
在有 async 的情况下，JS 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。
通过标准 DOM 函数创建<script>元素
Firefox、Opera, Chorme 和 Safari 3+会在<script>节点接收完成之后发出一个 onload 事件。您可以监听这一事件，以得到脚本准备好的通知。
大部分浏览器将按照服务器返回它们的次序下载并运行不同的JS代码文件。您可以将下载操作串联在一起以保证他们的次序。
通过 XHR 对象加载 JavaScript 脚本最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载，所以大型网页通常不采用 XHR 脚本注入技术。

原文总结：
采用阻塞方法加载JS：

将所有的<script>标签放到页面底部，也就是闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。

采用无阻塞下载 JavaScript 脚本的方法：

使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）或者HTML5添加的async属性；
使用动态创建的<script>元素来下载并执行代码；
使用 XHR 对象下载 JavaScript 代码并注入页面中。