前端开发性能优化方案

JS书写需注意的点css书写需注意的点DOM书写需注意的点　　　　浏览器及服务器注意的点

JS书写需注意的点

一、JS书写过程中减少对闭包的使用

　　原因：闭包会产生不释放的栈内存

　　替代方案：1，循环给元素做事件绑定的时候，尽量把后期需要的数据（如：索引）绑定到元素的自定义属性上，而不是创建闭包存储

　　　　　　　2，可以在最外层创建一个闭包，把需要的数据进行存储，而不是一个方法创建一个闭包（如：单例模式）

　　　　　　 3，手动释放不被占用的内存

二、避免“嵌套循环”

　　原因：会额外增加循环次数和死循环

三、尽量使用事件委托，减少DOM的频繁操作

四、页面中数据尽量采用异步编程和延迟分批加载

　　异步编程：减少HTTP通道阻塞，而导致页面加载不出来

　　延迟加载：减少首次加载的HTTP请求次数

五、尽量封装JS方法（低耦合高内聚），减少冗余代码

六、减少使用eval，代码压缩后，可能出现符号不完善的问题

七、尽量使用设计模式来管理代码（单利、构造、Promise、发布订阅）

css书写需注意的点

一、减少css表达式的使用

二、减少选择器的层级，尽量控制在3个层级

　　css选择器解析规则是从右到左解析

　　减少标签选择器的使用

三、css导入时减少使用@import，因为@import是同步操作，等导入的内容加载完才会像下渲染，link是异步操作

四、静态资源放置顺序

　　css放在header内，js放在body最下面

　　能用css，就不用js，能用原生js就不用插件

　　css处理动画的性能优于js，而且css中的transform浏览器会开启“硬件加速”

DOM书写需注意的点　　　　

二、减少HTTP请求次数

　　1，静态资源进行打包压缩（webpack构建工具）

　　2，图片尽量合成雪碧图，或者图片base64

　　3，icon可以使用iconfont或者svg图片

　　4，如果极其要求高性能，可以使用内嵌css和js，减少HTTP请求

　　5，利用localstorage本地存储

三、减少DOM的重绘和回流

　　1，回流的分离读写

　　 2，使用文档碎片/字符串拼接动态创建DOM

四、采用图片“懒加载”

　　目的：减少页面第一次加载中http的请求次数

　　步骤：页面开始加载，用占位图占位，当页面加载完，图片在可视区内再去发送http请求

五、减少cookie的使用

六：音视频资源设置（preload=‘none’），播放时再加载

七、避免使用iframe

八、script引用 添加defer / async 异步加载

九、服务器端渲染

浏览器及服务器注意的点

一、利用浏览器和服务器的缓存技术（304缓存）

　　把不频繁更新的静态资源做缓存处理（如：JS、CSS、Image）

　　原理也是减少HTTP请求次数

二、CDN加速

三、开启服务端的gzip压缩（减少请求资源文件大小）