H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题

在对项目做了一些优化处理后，再次无缓存打开可以发现网页几乎是秒开，平均耗时在1s以内 在这里总结记录一下，基本上都是一些常规可复制的优化手段，希望能为同样想优化网页性能的你提供思路~

在目前的前端领域，单页web应用（SPA）已经有了比较高的占有率，比较主流的web框架React、Angular、Vue几乎已经统治了前端市场。 单页应用确实带来了更好的前后端分离，以及用户体验好、快，内容的改变不需要重新加载整个页面等等的优点，喜忧参半，SPA应用首屏加载慢、…

资源异步加载主要解决的问题是，当模块数量过多、资源体积过大时，可以把一些暂时使用不到的模块延迟加载。这样使页面初次渲染的时候用户下载的资源尽可能小，后续的模块等到恰当的时机再去触发加载。 在webpack中主要提供两种方法：import函数和require.ensure。在we…

自JavaScript诞生以来，前端技术发展非常迅速。移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 通过对比，同构…

本文主要通过各种方法对web页面首屏性能进行优化，以期达到最大化减少页面首（白）屏加载时间的目的。当前，页面首屏性能优化主要有4种方式： 其中，前两者结合了webpack配置尝试对web页面首屏进行优化，后两者结合服务端技术尝试对web页面首屏进行优化。以下将分别介绍这4种方式…