前端优化

页面结构优化

1:dom树简介明了 语义化明确 没有多余的节点亢余;
2:选择器使用高级选择器 加快运行效率;
3:使用es6语法来简化js操作;
4:使用less,sass等预处理器来加快开发效率,减少代码量;
5:页面组件化封装,事件模块化封装,来达到页面代码量精简,易于维护的目的;
6:多小图标时,尽量使用精灵图来替代常规的png图片操作;
7:能css处理的效果就别拿js来处理,减少dom操作;
8:减少重排与重绘;
9:在js中尽量减少闭包的使用(内存泄露);
10:减少css表达式的使用;

性能优化

1:防抖节流 常见于input输入框以及浏览器滚动事件,防止用户在极短时间内重复请求后端数据,可使用防抖节流函数来抑制用户操作,防抖节流函数的实现主要使用定时器来控制用户在一定时间内做出的响应;
2:图片懒加载 常见于列表等图片较多的位置,现在有很多ui框架支持图片懒加载,图片懒加载的作业主要是在第一次响应时大大加快响应时间,只显示可视化区域的图片,当可视化区域外的图片滚动到可视化区域时才进行加载;
3:使用webpack来进行打包,合并压缩css js代码;
4:前后端交互式,尽量使用json格式来进行传送,目的是传输速率快;
5:前端与后端协商，合理使用keep-alive;
6:使用定时器操作,记得清理