标签：总结 缓存 前端 元素 属性 优化 重绘 CSS 加载
了解重排（回流）和重绘
浏览器根据HTML文档构建DOM树的同时，用CSS解析器解析CSS文档构建CSSOM树，然后DOM树和CSSOM树共同构成渲染树Render Tree。
- 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘
- 重排：当 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。