前端性能优化实践之关键渲染路径（2）

1、浏览器渲染原理和关键渲染路径篇

2、关键点之 布局(layout)和绘制(paint)

1、 回流

• 举个例子 说明 这个事情

当我 手动更改 dom width 时

• 再跑一遍 performance

• 防止布局抖动
  
• 再来一个 比较极端点的例子 变化所有图片的 大小
  

• 避免回流  不要做导致回流的操作，使用 translate 做位置变化 只会复合 , react 虚拟dom 将多个变更 合并
  
• 读写分离
  

3、使用 FastDom 防止布局抖动

1、在 github 上找到 fastDom  https://github.com/wilsonpage/fastdom
2、查看使用 文档  读取操作使用 measure     写操作使用 mutate
3、安装 改写现在的代码 
4、查看运行效果 
复制代码

• 改写

• 暂时 报错 fastdom 找不到 暂时 忽略

4、 复合线程和图层  

• 不会回流 重绘制  放在单独图层 只是触发复合

• 如何查看 页面的图层 ？

直接 shift + command + p 调出搜索 然后 输入 layers 就可发现当前有 2 层

• 值得注意的一点 使用 performence 时，

• 应该是 顺着浏览器 可优化的 方向努力， 看现有的 API 使用和优化

5、如何减少 重绘  ？

• 使用 transform  opacity 的例子

• 页面没有 发生 持续 回流 重绘制 行为

• 当我不使用 transform 而直接更改 width 时

• 还有个方式 看页面有没有重新布局

搜 rendering

• 解决方案 总结

6、防抖 事件  ？

• 首先写一个 反面例子 说明这个 情况

• 发现只要我 鼠标移动 就会触发这个函数 执行， 并且页面的动画效果 非常的不流畅
  
• 然后 怎么解决这个问题

1、使用 requestAnimationFrame
  2、使用 一个变量控制 debounce 去除抖动 
复制代码

• 通过 变量 控制 如果是在 执行 requestAnimationFrame 则直接 return 在 这个时间点 只执行这个 ， 否则 执行一个 requestAnimationFrame， 目的是 函数执行需要放在一帧内，也就是说需要放在 16.6ms 内 ， 否则没有意义
  

• 此处应该扩展函数 防抖和节流 写法，暂且不写 后续补上吧

7、React 时间调度的实现  ？