极致PCWeb性能 —— 同步加载vs异步加载

做者：Jogis
原文连接：https://github.com/yesvods/Bl...
转载请注明原文连接以及做者信息

同步与异步加载，每每是指网络资源，像图片、样式、脚本等。本文探索在PCWeb下，同步&异步性能差距到底有多少？为什么移动端的优秀方案到PCWeb，会形成性能问题？

同步加载

咱们只声明单一的静态脚本资源。

<script src="./react.js"><script>

异步加载

使用简单脚本发起资源请求。

<script>
    var s = document.createElement('script')
    s.src="./react.js"
    document.body.appendChild(s)
</script>

结果分析

看到结果很惊诧，仅仅是一个不同的加载方式，致使的是40ms与400ms的差别。那么，这段时间里面，浏览器到底去干啥了。

经过图示，说明了几个问题

• HTML脚本执行优先于次于大多数插件脚本

• 异步发起的请求，属于低优先级任务

• 低优先级任务，容易被其余脚本执行而阻塞

• 在PCWeb，异步加载自己在浏览器过程缓慢，并且很是容易受插件影响

同步加载，是否会受插件影响？

分析：

• HTML解析伊始即时发起请求

• HTML解析结束后即时接受数据包

• 在接收数据包过程当中已经开始解析

• 在解析过程当中，浏览器利用空余时间给插件执行空间

• 一旦解析完成，下一个任务调度就是脚本的编译执行

能够看到高优先级的资源，比部分插件脚本有更高执行优先级，浏览器会“尽量快”地加载执行。

无插件环境（类无线环境）

在插件环境下，加载会被各类插件干预，那么纯粹的异步(low)同步(high)在Webkit浏览器加载的差距是怎样的呢？咱们经过切换至隐身模式，消除全部插件影响，注意须要将全部插件的”隐身可用“取消勾选。

在OSX环境下，Shift+CMD+N启用隐身模式，在某些状况有特别的妙用..

结论是：同步的高优先级得到优先系统调度，与异步加载有略微优点

结语

PCWeb下，同步加载的特性，比起异步加载有很是大的优点。在某些场景下，还有一些"绝妙"的用法。