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

[yesvods]

作者：Jogis

原文链接： https://github.com/yesvods/Blog/issues/12

转载请注明原文链接以及作者信息

同步与异步加载，往往是指网络资源，像图片、样式、脚本等。本文探索在 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 下，同步加载的特性，比起异步加载有非常大的优势。在某些场景下，还有一些"绝妙"的用法。