性能优化
参考
性能优化是一个发散性问题,对于没有实践经验的人来讲,是比较难把握的。涉及网络相关,JS相关,CSS相关,工程化构建工具。是考察知识深度的好问题。相关资料网上很多,都是很碎片的内容,关键是理清思路。
网络方面考虑
- 使用缓存,不发请求
- DNS域名解析
- 建立TCP连接后,才开始发送请求,使用连接复用。keep-alive,一次通讯完成后,保持TCP连接,下次请求时少一次TCP连接建立的过程。
- 减少http请求
- 资源加载,CSS,JS,图片等,大量加载时会发出很多请求。将多个文件合并成一个,减少请求数。
- 图片加载时使用懒加载,或函数节流方式减小请求压力。
- 控制cookie大小,减小请求头的大小
- cdn加速,内容分发网络
- 服务器返回内容
- Etag 304
- GZip 内容压缩
浏览器上
- CSS放头部,JS放到尾部。JS是会阻塞页面加载,JS代码执行完后,页面才能继续渲染。
- 减少重排,重绘操作,reflow开销大于repaint
- 页面dom操作引起重排,尽量减少dom的操作。如documentFragment
- 渲染的阶段 Layout ,Paint,Composite Layers。越靠前的阶段代价越高昂,最后的阶段由GPU完成
-
-webkit-transform:translate3d(0,0,0)
触发GPU加速
- 变量记得释放,避免造成内存泄漏
- 选择器,CSS选择器从右向左匹配
- 选择器效率从高到低,内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素(类型)选择器 = 伪元素选择器
- 代码优化,代码写的烂,别的优化的再好都没用
构建工具
- tree shaking 清理
- code splitting 对代码进行分块,按需进行加载