极致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下，同步加载的特性，比起异步加载有非常大的优势。在某些场景下，还有一些"绝妙"的用法。