前端性能优化之路-js加载性能小结

文章主要阐述了一下，js加载与执行这方面，能有什么性能优化，和一些总结，学习过程中的一些总结。

脚本的位置

• 首先我们得聊聊，因为javascript是单进程的，大多数浏览器在渲染的时候也是这样，浏览器在解析渲染ui和javascript的执行都是单一进程在处理，那么就会有一个问题，当ui解析到某一个script节点，执行js时，这时就会阻塞页面ui渲染，直到这个js执行完毕，才会执行后面的。

• 如果javascript是一个外链，那么我甚至还需要等到这个js下载完毕（不过现代浏览器都死支持并行下载的），然后执行完成，才能继续。

• 还有一个更遗憾的问题是，当script标签在下载的时候，会阻塞其他资源的下载，虽然script标签之间不会相互影响，但是页面必须要等javascript执行完才能继续，那么一些在页面执行过程下载的资源就都被阻塞了。

• 至于原因，为什么会这样，简答的说就是 ，javascript的执行，可能会修改到ui元素 ，那么我们自然就需要要等他执行完毕。

综合，我们最简单的一个优化原则就是，将该脚本放置在页面底部，且该脚本放置在底部不会影响其执行的具体的逻辑。

合并压缩

既然下载脚本需要耗时，那么减少这个时间，也是一个优化方案，如何减少呢。

无论是前端还是服务端，通常来说，性能优化的一个很大瓶颈和考虑点，就是IO读写，那么http网络请求，显然是一个IO读写过程，所以他必然会耗时，消费额外的性能。所以我们想办法减少这个请求，并且把这个请求的大小给减少，就比如现在有四本书，让你读完，那么你每读完一本，自然，要放下另一本，去读另一本，中间放下拿起消耗了时间，然后每读完一页，你需要翻页，中间那些空着的地方你需要跳过，都需要时间。

所以综上，我们把大量的文件合并为同一个，然后把这些文件里面那些空着的地方给去掉，压缩压缩。最后就能达到想要的效果，减少请求次数，减少请求大小。

无阻塞脚本

无阻塞脚本就是说，在页面加载完成后，再去加载js，就是要在window的onload事件触发后才去下载脚本。注意这里有一个点，就是说我们上面才说了，把script标签写在页面底部，dom不是也渲染完了嘛，当执行到底部的script的时候，并不能保证页面加载完成，这个时候，页面的图片资源，css等都还不能确定是下载并加载完成了，（css，图片资源下载时，不会阻塞页面渲染），2而onload事件发生的时候，图片和其他资源文件都是下载完成的。

实现无阻塞脚本有几种方式

defer

当一个script标签上，有defer属性后，就说明该脚本不会修改dom，可以完全的延迟执行，带有defer的标签，可以放置文档的任何位置，对应的代码，将在页面解析到script标签时开始下载，直到dom加载完成，onload事件被触发之前，开始下载，defer的script可以和其他资源并行下载。不过这个属性有兼容性问题，
桌面

feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
defer	yes	yes	3.5	10	no	yes

移动端

feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari
defer	yes	yes	yes	4	？	yes

从主流来看，使用并没有太大问题，不过如果要全兼容，还是考虑考虑。

动态脚本

let script = document.createElement("script")
script.onload = function (){
    alert("onload")
}
script.src = "***.js"
document.getElementsByTagName("head")[0].appendChild(script)

这个方式的好处在于，在标签被添加到文档中时开始下载，但是无论何时启动下载，文件的下载和执行过程中不会阻塞页面其他进程，脚本中的代码，会在下载完成中立即执行。

通过ajax，脚本注入

这个方式，是把js当作文件，直接get请求请求过来之后，创建script标签，把请求回来的数据设置给script的文本，然后添加到页面。
有个好处就是，script动态下载，并且还不会立即执行
这个方式有个缺点，对于跨域文件特别难处理，对于cdn不能处理。

推荐做法

在</body>标签之前，通过dom动态插入js，这样确保了javascript执行过程中不会阻碍页面其他内容的显示，