chrome开发者工具使用
- performance 性能监控
- rendering > ftp meter 动画性能监控,60fps正常,越高越好
合并与压缩
合并:把css、js分别合并为一个文件,减少http请求
压缩:把html、css、js的空格注释去掉,减少请求大小
图片优化
减少请求大小、数量,优化加载速度
- jpg: 压缩率高,大部分不需要透明图片的场景
- png : 支持透明,大部分需要透明图片的场景
- webp:压缩成度更好,安卓全部,ios有兼容问题
- svg矢量图:代码内嵌,相对较小,适合图标
- base64编码:把较小的图片内嵌在文件里,无需请求
图片压缩:优化页面图片加载速度
转Base64编码:减少http请求
转webp格式:优化页面图片加载速度
使用雪碧图: 减少请求数量
使用svg:减少http请求
页面数据请求
使用前加载好或准备使用到加载,提高浏览速度
页面渲染过程:
1.先解析html,从上到下,形成HTMLDOM
2.遇到引用外部资源,进行解析
- 将css放在head中
- js贴body放