Web/14-前端性能优化/03-渲染优化.md
2021-07-29 11:08:52 +08:00

178 lines
3.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 03-渲染优化
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 浏览器的渲染机制
我们需要先理解浏览器的渲染经历了哪些过程才能有针对性的进行相关优化
掌握浏览器的渲染优化可以说是前端工程师的一个分水岭如果想要具备架构师的思维需要达到什么样的能力不光是要解决当下的问题还需要掌握基本的原理将来在遇到新问题时也能解决预测问题
有一个经典的面试题是在浏览器的地址栏输入url回车后经历了哪些过程这个问题并不简单根据你回答的详细程度可以看出你对前后端知识的掌握程度你能否答出浏览器的渲染机制如果不能说明你对浏览器渲染的性能优化不够了解
关于浏览器的渲染机制可以看本教程的另外一篇文章
> 前端面试/面试必看/浏览器渲染机制.md
关键渲染路径举例
![image-20210323184157879](images/image-20210323184157879.png)
![image-20210323184551245](images/image-20210323184551245.png)
## 避免布局抖动layout thrashing
1尽量避免 重排
比如说如果想改变一个元素的位置很多人可能会使用相对布局的lefttop属性但是这个属性会引起重排我们可以使用 `transfrom:translate`让元素做位移这个属性既不会触发重排也不会触发 重绘只会触发 conmposite
再比如说vuereact这样的框架采用了虚拟DOM它会把涉及到DOM修改的操作积攒起来然后统一计算批量处理最后应用到真正的DOM上
2读写分离建议先批量读获取位置等信息然后再批量做写操作修改位置
补充
如果你的页面经常需要做重排重绘就很容易导致页面抖动
很多时候我们知道原理和解决方案但是在工程化实践的时候往往时间很紧没有时间去做这些事情我们希望有一些拿来就可以用的而且经过测试没有问题的工具来帮我们解决问题
FastDom是用于做防抖的一个比较流行的解决方案
## 减少重绘repaint
## 防抖Debounce降低事件的触发频率
我们可以针对**高频事件**做防抖
**高频事件处理函数**有很多事件的触发频率非常高甚至超过了屏幕的刷新率60/比如页面滚动鼠标移动移动端的touch事件
如果我们不对这些事件做处理就会频繁导致浏览器做重排重绘影响性能导致页面卡顿也就是抖动因此需要对这些高频事件处理函数做防抖处理降低它们的触发频率
比如说滚动事件我其实并不关心滚动中间的过程我只关心最终滚动到了哪里
requestAnimationFrame 这个api可以做防抖
参考文章
- 防抖与节流https://juejin.cn/post/6885250789825052679
## 代码优化
### JS的开销
静态资源有很多种js图片css字体等这些资源都有可能会很大但是JS的开销仍然是最昂贵的因为JS除了加载资源之外还需要经历**解析&编译****执行的**过程
### 如何缩短JS的解析事件
### Web loading is a Journey
![img](images/1*vSGOCrLV9MiLhpmPid1CHQ.png)
### V8引擎
## 补充
- 首屏尽快打开剩下的内容延迟加载减少初次加载的资源量首屏的内容是可以确定的