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

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

在你们的认知里，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?。