1,前端性能优化
减少数据请求
- js文件合并压缩
- css文件合并压缩
- 使用合适尺寸的图片,不要缩放图片
- 使用雪碧图
- 使用字体图标
- 使用图片懒加载
- 小图片使用base64 图片
- 使用页面缓存
- 音频视频取消预加载
代码书写习惯
- 减少操作DOM(减少DOM的回流和重绘)使用数据驱动的框架
- 对于动画来说,能用css解决的久不用js(能用transform解决 的不用css样式,transfrom:translateZ(0) 开启硬件加速,不会引发回流,或者使用定位的元素也可以,脱离文档流,不会对其他元素在成影响)能用requestAnimationFrame解决的久不用定时器(requestAnimationFrames 在浏览器休眠状态会停止,减少不必要的损耗
- 避免使用iframe(它会嵌套页面,父级页面渲染的时候把子页面也渲染了
- 尽可能使用事件委托
- 避免使用死循环和循环嵌套循环
- 低耦合高内聚,尽可能实现代码封装,减少冗余代码
- 项目中尽可能使用异步编程来模拟多线程,避免主线程阻塞
- 尽量减少css表达式的使用,如果必须使用,尽量做到读写分离
- 函数防抖和函数节流
- 减少使用filter滤镜的使用
- 尽量减少css选择器的层级
- 不要使用table布局
- 手动回收堆栈内存(赋值为null)
- 减少使用eval(主要原因是防止代码压缩时候由于符号书写不规范导致错误)
- 在js中减少闭包的使用(容易造成内存泄漏) 开启gzip压缩