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压缩(减少请求资源文件大小)