浏览器重绘和重排

时间：2017年4月25日12:40:06

《我的博客地图》

    前端开发岗位是一个知识范围比较综合的一个岗位，需要了解和探究的知识很多，因此，可以从广度和深度两个方面着手，初级工程师以广度学习为主，高级工程师以深度研究为主。

    浏览器引擎解析web项目的过程：下载资源（HTML、CSS、JS、图片），构建DOM树（页面结构），将HTML元素放置到文档流中正确的位置，构建渲染树（DOM节点样式），再根据渲染树节点的样式属性绘制出页面。
    浏览器重绘(redraw)和重排(reflow)，重排也称回流：
    重绘，是DOM元素样式改变所触发的浏览器行为，浏览器会根据DOM元素的新样式重新绘制渲染，使元素呈现新的外观。
    重排，是DOM树变化所触发的浏览器行为，浏览器会重新构建DOM树及其后期渲染。

    重排发生的情景：页面渲染初始化、浏览器窗口改变、DOM元素几何属性（width，height）变化、可见DOM元素的增删、DOM树的结构发生变化、获取某些DOM元素顶层属性（如， offsetWidth、offsetHeight、scrollTop、scrollLeft...）等。
    重绘不一定触发浏览器重排，重排一定会触发浏览器重绘。

引申：

    web页面的文档流：DOM元素中的可显示元素在排列时所占用的位置，将浏览器窗口自上而下分成一行一行, 并在每行中按从左至右的顺序排放元素,即为文档流。
    文档流是相对于盒子模型而言，文本流是相对于文字段落而言，浮动（float）元素，绝对定位（absolute）元素，固定定位（fixed）元素，都会脱离文档流，即该元素会从其父元素或兄弟元素中脱离而出，不属于文档流。