改善用户体验,web前段性能优化
页面级优化
- 减少http请求数
- 避免资源重复请求(坏请求,无意义的请求)
- 合并css与js文件(减少http请求次数)
- 使用css精灵图 (减少图片请求次数)
- Lazy Load Javascript/images(懒加载,在需要的时候在加载)
- 合理设置HTTP缓存
- 从设计实现界面简化页面
- 将外部脚本置底
异步执行inline脚本(资源内嵌插件,将代码内嵌进html)
将CSS放在HEAD中
- 异步请求Callback
- 减少不必要的HTTP跳转
- 减少http请求数
代码级优化
- 避免css @import语句,会阻塞 浏览器的并行加载
- 优化脚本js和样式表css的顺序
- 处理小文件比如小的js css文件写入到html中
- 减少dom数量
- 慎用document.write:会阻塞浏览器的渲染
- 使用浏览器文档碎片createDocumentFragment(可以减少操作dom的次数,从而减少渲染次数,提高页面性能)