前端页面优化总结

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

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重绘、列表优化、动画优化等。