前端性能优化

手段

清理冗余css。
拆分css。首屏css减少30%(由原来的15.5k减少到10.5k)。
首屏css内联, 后置css转js化,减少因css引起的首屏阻塞问题。
清理无用的base64图标,将loading图标转css实现。
js全面异步化,并反转资源加载关系,更高效地利用加载时间。
利用service worker缓存各主要链路资源,缩短页面之间加载时间,并缩短了登录框加载时间。

测试方法

WebpageTest:测试条件相同的情况下,首屏渲染由原来的2.5s缩短至最终的1.0s
PageSpeed Insight: 由原来的63分提升到85分(甚下的部分为图片压缩问题及集团资源请求,不影响首屏)
Lighthouse: 由原来的90多提升到100分
PWA Directory:

原文地址:https://www.cnblogs.com/huxiaoyun90/p/6855048.html