下面的两个问题还是比较常问到的, 希望大家能够好好的记忆一下。

1. 什么是 回流(reflow)? 重绘(repaint)?

1-1. 回流 的核心概念:
     1. 当 render Tree 中的一部分(或者全部) 因元素的 规模尺寸 、 布局 、 隐藏 等改变而需要重新构建, 这就称为回流 。
     2. 当页面 布局和集合属性 改变时就需要回流 。
1-2. 回流详细解析:
     1. 回流更多的是涉及到页面元素大小的变化, 尺寸的变化, 布局的变化, 这些核心概念变化的时候, 会触发回流 。
     2. 实例: 网站的懒加载, 在下滑的时候会有图片增加到我们的 dom Tree 上, 这就是典型的一种 Render Tree 在动态过程中它的布局改变 。
     3. 实例: 对图片做一些特殊的效果, 如鼠标放上变大, 这种场景图片大小的变化, 也是会触发回流的 。

     
2-1. 重绘的核心概念:
     1. 当 render Tree 中的一些元素需要更新属性, 而这些属性只是影响元素的外观, 风格, 而不会影响布局, 比如 background-color, 这就是重绘 。
2-2. 重绘详细解析:
     1. 涉及重绘的时候, 不一定触发回流; 回流是一定会触发重绘的

     
3. 重绘与回流这些与浏览器本身也是有关系的 。
   1. 不同的浏览器渲染机制不一样, 重绘与回流发生的情况也不一样。

2. 那些 CSS 属性会触发 "回流" ?

1. 触发页面重新布局的属性:
   1. 盒模型相关的属性会触发重新布局 。
      1. width
      2. height
      3. padding
      4. margin
      5. display
      6. boeder-width
      7. border
      8. min-height
   2. 定位属性以及浮动也会触发重新布局 。
      1. top
      2. bottom
      3. left
      4. right
      5. position
      6. float
      7. clear
   3. 改变节点内部文字结构也会触发重新布局 。
      1. text-algin
      2. overflow-y    规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话/ 滚轮
      3. font-weight
      4. overflow
      5. font-family
      6. line-height
      7. vertival-algin    设置元素的垂直对齐方式
      8. white-space   设置如何处理元素内的空白
      9. font-size

3. 那些 CSS 属性会触发 "重绘" ?

1. 那些 CSS 属性会触发重绘(只会触发重绘不会触发回流)?
   1. color
   2. border-style
   3. border-radius
   4. visibility   规定元素是否可见
   5. text-decoration    规定添加到文本的修饰
   6. background
   7. background-image
   8. background-position
   9. background-repeat
   10. background-size
   11. outline-color
   12. outline
   13. outline-style
   14. outline-width   设置元素整个轮廓的宽度
   15. box-shadow      阴影

这里就是一些概念性的内容与需要加深记忆的内容, 最好的方法就是每天都来看一遍。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。