前端优化性能方法
1.首屏加载时减少HTTP请求
等待首页传送数据完成页面较完整地显示后,再利用AJAX异步请求更多数据。
2、图片与组件懒加载
监听视口与HTML文档高度之间的偏差然后进行AJAX异步请求后台数据
3、图片等静态资源合并
在页面中有多个小图时,压缩成一张雪碧图,让多张图片请求变为一次请求,根据background-position定位其中的图片
4、压缩JS和CSS代码
减少请求的JS和CSS文件大小
5、减少DOM操作
将DOM查询、DOM操作的代码分别放在一起,能有效减少DOM的操作成本,以及使用文档碎片。
6、通过webpack+vue进行项目构建
利用webpack的代码分割和合并功能,进行高效的组件化加载数据,浏览即加载相应数据;利用vue的虚拟DOM特性,使用diff算法计算出相应所需要更新的DOM,最大化的减少不必要的DOM操作。