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