提高前端网页性能的各种措施

总览

我将把应用程序加载分为三个不同的阶段：

1. 初始渲染–用户看到任何东西需要多长时间？
2. 应用程序加载–用户可以使用该应用程序多长时间？
3. 下一页–导航到下一页需要多长时间？

初始渲染

1. 减少渲染阻止请求
2. 避免顺序渲染阻止请求链
3. 重复使用服务器连接加快请求----对同一服务器的后续请求可以重新使用现有连接
4. 减少文件大小并使用CDN
5. 使用服务工作者预加载和缓存资源

应用加载

1. 捆绑包拆分：仅加载必要的代码，并最大化缓存命中率
2. 载入页面数据  

• 开始加载数据前，请不要等待捆绑包

有两种方法可以避免这种情况：

1. 将页面数据嵌入HTML文档中
2. 通过文档中的内联脚本启动数据请求

• 等待非必需数据时不要阻塞渲染

• 避免顺序数据请求链

服务器端渲染

阅读MichałJanaszek的这篇文章，以了解如何将服务端与服务器端渲染结合在一起。