高性能JavaScript之——加载和执行

加载和执行

浏览器 单一进程 处理ui渲染和脚本执行

1. 脚本位置

1. 与样式行为有关的脚本优先加载，保证页面渲染交互正确性；

2. js文件可并行下载但页面需等待所有js代码下载执行完成才会继续其他资源下载；

3. 雅虎特别性能小组提出的优化 Javascript 的首要规则：将脚本放在底部。

1. 组织脚本
1. 减少页面包含的script标签数
2. 内嵌脚本放在引用外链样式表的link标签之后会导致页面阻塞去等待样式表的下载，永远不要把内嵌脚本紧跟在 link 标签后面
3. 考虑到 HTTP 请求会带来额外的性能开销，下载单个 100KB 的文件将比下载 4 个 25KB 的文件更快。减少页面中外链脚本文件的数量将会改善性能。
2. 无阻塞的脚本
1. 减少 Javascript 文件大小并限制 HTTP 请求数仅仅是创建响应迅速的 Web 应用的第一步。无阻塞脚本的秘诀在于，在页面加载完成后オ加载 Javascript 代码。
2. 延迟的脚本：HTML4 为script标签定义了一个扩展属性：defer——指明本元素所含的脚本不会修改 DOM，因此代码能安全地延退执行。带有 defer 属性的 script标签可以放置在文档的任何位置。对应的 Javascript 文件将在页面解析到 script 标签时开始下载，但并不会执行，直到 DOM 加载完成（onload 事件被触发前）。当一个带有 defer 属性的 Javascript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与页面中的其他资源并行下载。HTML5 规范中引入了 async 属性，用于异步加载脚本。async 与 defer 的相同点是采用并行下载，在下载过程中不会产生阻塞。区别在于执行时机，async 是加载完成后自动执行，而 defer 需要等页面完成后执行。defer 属性仅当 src 属性声明时才生效。
3. 动态脚本元素：文件在该元素被添加到页面时开始下载。这种技术的重点在于：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。你甚至可以将代码放到页面head区域而不会影响页面其他部分（用于下载该文件的 HTTP 链接本身的影响除外）。
4. Xmlhttprequest 脚本注入 ： 优点1： 代码是在 script 标签之外返回的，因此它下载后不会自动执行，这使得你可以把脚本的执行推迟到你准备好的时候。优点2：同样的代码在所有主流浏览器中都能正常工作。 这种方法的主要局限性是 Javascript 文件必须与所请求的页面处于相同的域，这意味着  JS 文件不能从 CDN 下载。
5. 推荐的无阻塞模式：向页面中添加大量 Javascript 的推荐做法只需两步：先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码。因为第一部分的代码尽量精简，甚至可能只包含load函数，它下载执行都很快，所以不会对页面有太多影响。一旦初始代码就位，就用它来加载剩余的 Javascript。
3. 总结
1. </body>闭合标签之前,将所有的 script 标签放到页面底部。这能确保在脚本执行前面已经完成了渲染。
2. 合并脚本。页面中的 script 标签越少，加载也就越快，响应也更迅速。无论外链文件还是内嵌脚本都是如此。
3. 有多种无阻塞下载 Javascript 的方法：使用script标签的 defer 属性； 使用动态创建的script元素来下载并执行代码； 使用 XHR 对象下载 Javascript 代码并注入页面中；