页面优化的细节比较多，因此在这里总结一下。

1. 减少请求个数

    http1.1中每个请求的发出是独立的，每多一个请求耗时就会很长。优化点：

  •     使用bundle，将js,css资源进行合并打包
  •     小体积图片使用base64编码内嵌至HTML或css中，使用css sprite技术合并多张图片
  •    使用HTTP2协议，可最大程度的避免多次请求造成的等待
  •    首屏对ajax请求预加载，减少请求个数

2. 减少传输体积

  • js css进行minify压缩，使用tree-shaking技术去除无用代码。图片在保证质量的情况下采用webp或者Png压缩。
  • 利用浏览器的gzip，最大程度减少文本类文件的传输体积
  • 减少cookies体积数，避免每次请求上传header内容过长
  • tls 1.3协议减少Https协议握手认证次数，http2协议对header压缩，共用相同的header

3. 尽可能利用缓存

  • 充分利用浏览器的缓存，对js和css进行hash处理，缓存时间为最长，html进行缓存验证，保证页面最新且可利用缓存
  • 利用indexDb和pwa，对用户数据进行缓存

4. 缩短关键路径

  • 使用CDN技术，将域名解析到离用户最近的服务器上，减少延迟
  • DNS的prefetch  <link rel=“dns-prefetch” href=“//example.com”>  <link rel=“preconnect” href=“http://example.com”>

5. 合理安排资源加载顺序

  • 利用preload, prefetch等新特性，预测性加载
  • 先css，再html，再js，进行加载并执行。
  • 利用code split技术将页面分多次加载

其他微优化或业务类优化

     减少dom操作、优化css选择器（从右往左匹配）、减少dom重绘、列表优化、动画优化等。

版权声明：本文为dreamless原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/dreamless/p/7985654.html