使用chromeDevTools Audits 优化web应用实践总结

[ILovePing]

提高首屏渲染速度

1. Tree shake -> remove unused code

2. Code split(webpack import / require.ensure) -> load critical code

3. Script 使用async/defer防止脚本加载会阻塞dom渲染（async/defer异同点，两者都是异步加载，async是乱序的加载好就马上执行，defer加载好之后在html解析之后按顺序执行，具体见下图） 例子：jquery.js可以使用async加载，因为它不依赖其他js，而$(“#id1”).hide()这种依赖jquery的js应该使用defer在html parse完成之后加载执行。 preload和prefetch这两个是预加载资源到Http缓存中，相当于上图里script fetch这一步，仔细别搞混淆。

我们可以明确DOMContentLoaded所计算的时间，当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中包含脚本，则脚本会阻塞文档的解析，而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下，DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

4. Optimize encoding and transfer size of text-based assets: enable text compression，nginx 静态资源开启gzip，服务端接口返回数据使用gzip或brotli(Brotli压缩比优于gzip)等压缩response正文。 可通过Network里查看请求响应头里的content-encoding有没有gzip/deflate/br字段，和压缩前后size大小比较：

   

5.Defer critical css ,页面只适合被关键css（这种关键css适合inline到html里面，减少资源请求的时间）加载阻塞，其他与当前页面展示无关的css适合使用defer放在。 在Coverage里可以看到哪些是critical资源：

6. 尽量保持主线程空闲，不要长时间阻塞，能及时处理用户输入。

7. 使用服务线程缓存资源，进行计算等，a.防止主线程长时间占用，b.以httpCache能力为基准作渐进式增强资源预缓存能力，理想状态无http请求往返。 使用workbox-webpack-plugin -> use service work to generate thread to load resourses cached. （发布到线上要用https），具体代码如下：

8. 减少redirect次数，降低多次的http往返开销

9. 用户不可见图片不用提前加载；使用适当图片格式，svg格式是一种挺好的尝试，可以任意resize而且svgcode作为text可以compress和minify；图片使用工具适当压缩；使用多个大小、格式版本的图片资源适配不同场景（ srcset mediaQuery）

10. 图片格式还可以使用最新的webp，jpeg 2000，jpeg XR，就当作是渐进式增强咯。

11. TTI -> time to interactive 减少页面加载到可以交互处理用户输入事件的时间长度，防止阻塞页面渲染主要还是防止首屏加载非必要资源，预加载和最小化（压缩混淆）必要资源，预缓存assets，懒加载其他（未来的）navigation。

12. 运用Http Cache的能力。

[wjf563745940]

最近也在做优化，文章写的不错，有借鉴的地方。 是不是应该详细讲下tree shake 作用，sw注册失败是怎么处理的 还有缓存更新策略是否完全依赖workbox呢

[ILovePing]

@wjf563745940

1. Tree shake 是一种在编译期间静态分析esmodule和css剔除掉无用的代码(dead code)以达到优化代码体积的手段。具体可以参考webpack4的treeshake教程。

2. sw注册失败： 首先注册失败有几个常见的原因

   1. service worker文件的地址没有写对— 需要相对于 location.origin , 而不是 app 的根目录。 navigator.serviceWorker.register('./sw.js',{scope:'./'})可使用相对路径，并指定管控的scope（），具体可以参见serviceWorker.register api。

   2. 没有在https下运行（serviceworker可以抓取scope下任意请求，在http下危险）。

   3. 浏览器不兼容，通过if ('serviceWorker' in navigator)判断是否支持serviceWorker。 至于排除以上两种原因，注册还是失败的话，那么会和正常一样，走浏览器强缓存再到http协商缓存。

3.workbox-webpack-plugin是通过配置自动生成sw脚本的插件，可以通过runtimeCaching指定缓存更新策略，默认有五种缓存策略：stale-while-revalidate、cache first 、network first、cache only、net only，可以对于匹配的不同资源类型使用不同的缓存策略，并且可以通过option.expiration.maxAgeSeconds指定maxAge失效时间，更多丰富的配置可以参见官网地址：https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin， 当然使用workbox自定便携自定义的serviceWorker脚本也是可行的。