大家好，欢迎来到IT知识分享网。

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

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+的文章。

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

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