js性能优化 · 前端技术指南

## 前言通过本文我们将总结一些常用的如何正确的加载和执行js代码的技巧，希望能够帮助到你。 ## 概览无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或 JavaScript 的命名空间，它们对后面页面内容造成影响。一个典型的例子就是在页面中使用document.write()。当浏览器遇到`<script>`标签时，当前 html 页面无从获知 JavaScript 是否会向`<p>` 标签添加内容，或引入其他元素，或甚至移除该标签。因此，这时浏览器会停止处理页面，先执行` JavaScript`代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻塞了。 ## 脚本位置 HTML 4 规范指出` <script> `标签可以放在 HTML 文档的`<head>`或`<body>`中，并允许出现多次。web 开发人员一般习惯在` <head>` 中加载外链的 JavaScript，接着用 `<link> `标签用来加载外链的 CSS 文件或者其他页面信息。 ~~~ //低效的方式 <head> <title>Source Example</title> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> ~~~ 然而这种常规的做法却隐藏着严重的性能问题。在network中的分析栏，可以看到在脚本没有下载和执行完成前，所有的样式以及dom都是不被加载的，页面处于空白状态，所以我们应该避免这种情况。（作为常识要知道，1. 另一个脚本文件开始前会有一定的延迟，这个延迟就是上一个脚本文件的执行时间，虽然可能很短。2. 如果你需要依赖前一个脚本执行完，这样逻辑是可以的，但依赖不是这么玩的哦）。 ## 参考文档 * 参考文档：http://mp.weixin.qq.com/s/W6B0nOpzA7q9nGjIpeaGBQ