这是我参与 「第四届青训营」 笔记创作活动的第5天
页面加载缓慢的原因有很多
比如JS的阻塞、HTML代码太多、元素的CSS样式表重排和重绘等等
下面总结一些前端性能优化的方式：
- 减少HTTP请求数
- 合并图片，当图片过多时，将其合并成一张图片，从而减少http请求数，并且能利用缓存来提高页面性能（雪碧图）
- 合并和压缩css样式表和js脚本文件，可以减少http连接数
- 优化图片加载策略
- 多使用png格式的图片，相对来说体积较小
- 图片的延迟加载（懒加载）
- 将图片的格式以BASE64格式内嵌到HTML中
- 使用CDN或DNS预解析
- CDN，即内容分发网络，可以使用户就近地取得所需的内容，解决网络拥挤的状况，提高用户访问页面的响应速度
- DNS作为互联网的基础协议，解析速度较慢，现在多数浏览器都对DNS解析进行了优化，DNS预解析就是让此属性的域名在不经过用户点击链接的时候就在后台解析，减少用户的等待时间，提高用户体验
- 引入文件的优化
- 允许的话可以使用一些内联样式，减少引入文件，减少http请求
- 开启GZIP
- GZIP数据压缩，用于压缩使用internet传输的所有文本资源，开启GZIP的方式：到对应的web服务配置文件中设置，比如Apache，在配置文件httpd.conf中添加
- 使用无cookie域名
- 当发送一个请求时，同时还要请求一张静态的图片和发送cookie时，服务器对于这些cookie不会做任何的使用，就是说这些cookie是没用的，不需要一起发送
- 减少重定向
- 持久链接
- 使用keep-alive或persistent来建立持久连接，降低延时和连接建立的开销
- webpack
- 打包公共代码
- 动态导入和按需加载
- 长缓存优化
- 公共代码内联
