极致 PCWeb 性能 —— 静态化&工程化 JSONP

作者：Jogis

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

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

在大家的认知里，JSONP，往往是另外一种异步请求的方式，其主要优点是支持跨域数据请求。因此，JSONP 往往是将一个 Script 节点动态插入 document，随后浏览器会自动发起一个远程请求。

除了上述单一用法外，在 PCWeb，JSONP 具有非常巨大的性能&工程化价值。

1.异步 JSONP

通过 [图说舌尖上的脚本] 与 [同步 vs 异步加载] 了解到，PCWeb 受限于插件环境，异步机制变得非常不吃香。异步发起的请求，无论是 JSONP 等资源加载，抑或 XHR （ fetch ），都会被标记为低优先级。

• 同步插件脚本加载完才能发起请求
• 在主进程的编译与执行前，会被插件脚本抢占。

我们来看一下，发起 6 个异步 JSONP 是怎样的情况：

<script>
function appendScript(src){
 var s = document.createElement('script')
 s.src = src
 document.body.appendChild(s)
}
for(let i=0;i<6;i++){
 appendScript(`./react.js?v=${i}`)
}
</script>

结果跟之前分析的异步请求别无二致，异步 JSONP 默默低下了头。

2.同步 JSONP —— 将页面加载性能发挥极致

2-1. 现实中的场景

举个栗子，在实际 PC 场景，无论采用的是 React Or Vue Or what ever. 我们都需要在渲染前加载一堆组件，数据+模板(JSX etc.)+组件方式，来实现渲染。我们在渲染页面前就需要加载一堆资源，有时候甚至可以达到 2M 之大!

2-2. 性能分析

这块大资源并没有错(有时候利用一块大资源，比起每次加载不一样非缓存资源性能还高)，但是在浏览器加载这块大头时候，脚本的解析、编译、执行，也随着体积增长(特别是执行耗时)。当然，这也有一些办法可以减轻这些负担(未完，待续..)。然而，我们可以利用上面介绍到的同步 JSONP 优雅地减少页面加载时间！我们先来回顾一下部分原理：

因为主线程被阻碍了，后面的解析工作没有办法继续往下进行，
当遇到这种情况，WebKit 会启动另外一个线程去遍历后面的 HTML，
收集需要的资源 URL，然后发送请求，这样就可以避免阻塞。 
	———— 《 WebKit 技术内幕》

2-3. 优雅技术方案

我们把资源都看成一个大体积 Bundle，在 HTML 解析到这个脚本时，由于无需下载(memory cached Or disk cached)，接下来就是漫长的解析、编译、执行。但是，我们可不能让浏览器闲着，通过同步 JSONP，在 Bundle 后面声明一堆以后渲染要用的页面数据。这样，浏览器主进程漫长的阻塞执行过程中，相关的数据已经被网络模块准备就绪，由于模块数据相对体积小，因此没有解析 /编译 /执行成本。

<script src="BigBundle.js"></script>
<script src="parallelData1.js"></script>
<script src="parallelData2.js"></script>
<script src="parallelData3.js"></script>
<script src="parallelData4.js"></script>
<script src="parallelData5.js"></script>
<script src="parallelData6.js"></script>

我们一直提到的是，在 PCWeb 页面初始化场景，异步加载都会面临性能问题。而上述的方案通过所有资源同步的方式实现，用最高优先级来渲染初始页。

2-3. 真实的故事

在鄙人的某些业务场景下，真实用到同步加载 Bundle，异步获取资源，首屏渲染时间惨不忍睹。仅仅通过资源 JSONP 同步化，还没做其他优化😕，首屏时间直接从 2.1s，下降至 1.4s😱。