前端优化总结

了解重排（回流）和重绘

浏览器根据HTML文档构建DOM树的同时，用CSS解析器解析CSS文档构建CSSOM树，然后DOM树和CSSOM树共同构成渲染树Render Tree。

1. 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘
2. 重排：当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。
   引起重排的条件：
   （1）首次渲染
   （2）浏览器尺寸变化
   （3）元素尺寸或位置变化
   （4）元素内文字、图片的大小、数量等发生变化
   （5）激活CSS伪类
   （6）js设置style属性
   （7）新增和删除可见元素
   （8）调用某些特定的属性和方法如：clientWidth、clientHeight、clientTop、scrollHeight、scrollTop、getComputedStyle()、
   getBoundingClientRect()、scrollTo()等
   回流必将引起重绘，而重绘不一定会引起回流
   

减少回流和重绘的几种方式

1. 优化CSS

• 避免使用 table 布局。
• position 属性为 absolute 或 fixed 的元素不会导致回流
• 避免使用 CSS 表达式（例如：calc()）

2. 优化JavaScript

• 将多个设置style属性的操作合并为一个（使用dom.style.cssText一次性设置样式）或通过切换className调整样式
• 避免频繁操作DOM，创建一个docuemntFragment并执行操作再添加到文档上，缓存dom
• 先为元素添加display:none样式再执行操作
• 使用变量存储导致回流的属性（clientHeight等）

特定场景的优化

• 图片懒加载，当图片进入可视区域之后再加载src，使用IntersectionObserver方法替代getBoundingClientRect
• 音视频设置preload=none，使其在播放的时候加载从而减少首屏加载时间
• 事件委托，适合动态创建多个子元素时
• 防抖和节流
• 减少@import，会引起额外的请求和阻塞，因为@import是同步请求（link是异步请求）
• 避免使用空的src和href
• 使用缓存，本地缓存，强缓存和协商缓存
• 服务端开启gzip压缩，减少响应的资源大小和时间
• 使用dns预解析，如在link标签中加入rel='dns-prefecth’属性
• 异步加载脚本：defer、async属性，或将脚本放在body下面（和defer类似）
• CDN内容分发将用户请求分发到离用户近的服务节点
• ES6路由懒加载import().then
• 使用web worker执行复杂的运算的数据处理
• 使用webpack等打包工具将js和css压缩从而减少http请求次数和请求资源的大小
• 尽量所使用的字体图标或者SVG图标来代替传统png图

React应用的优化

• 代码分割，常见的是根据路由分割，实现懒加载的效果
• webpack配置

参考文章：前端性能优化小结（面试干货）、前端性能优化的七大手段、前端性能优化汇总

标签：总结,缓存,前端,元素,属性,优化,重绘,CSS,加载
来源： https://blog.csdn.net/Wind_waving/article/details/123093406