前端性能优化
2018-09-19 本文已影响0人
praycis
请求过程中潜在的优化点
- dns是否可以通过缓存减少DNS查询时间
- 网络请求的过程走最近的网络环境
- 相同的静态资源是否可以缓存
- 能否减少HTTP请求的大小
- 减少HTTP请求的次数
- 通过服务端渲染是否可行
http请求的大小和数量相关的优化
- html代码压缩
- css.js的压缩合并混淆
- 文件合并 （有两个问题：首屏加载问题和缓存失效问题）
图片相关优化
png8,24,32之间的区别
- png8 256色支持透明
- png24 2^24色不支持透明
- png32 2^24支持透明
根据不同的业务场景选择不同的图片格式很重要
不同格式图片常用的业务场景
- jpg有损压缩，压缩率高，不支持透明，适用于大部分不需要透明图片的业务场景
- png支持透明，浏览器兼容性好，适用于大部分需要透明图片的业务场景
- webp压缩程度更好，在ios webview里有兼容性问题，适用于android全部
- svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
进行图片压缩的方法
- 图片压缩网站：tinypng.com
- css sprite雪碧图
- Image inline (base64编码)
- 矢量图 （代码）
