浏览器渲染方式
首先介绍浏览器的组成部分：
1.用户界面（包含窗口、标签页等）
2.浏览器引擎（查询、操作渲染引擎）
3.渲染引擎（解析、渲染请求的内容，包含：网络、JS解释器、UI后端）
4.数据存储层（轻量的数据库，包含storage、cookies、websql、db等）
不同浏览器渲染引擎不同，由浏览器内核决定，常见浏览器以及内核有：
IE: Trident
FirFox: Gecko
Chrome/Safari: WebKit
Opera: Presto
当渲染引擎开始工作时：
1.解析HTML生成DOM Tree
2.解析CSS生成CSS Tree
3.合并DOM树和CSS树生成Render Tree
4.开始reflow，计算DOM节点的绝对位置
5.通知GPU进程进行绘制显示
回流 reflow
当Render树的一部分或者全部因元素的大小/位置信息/布局等改变而需要进行重建的过程，称之为回流
包含：
1.dom节点的添加/删除
2.元素的font-size、width、height、padding、margin、border的大小/宽度变化
3.获取某些属性，包含：
1).offsetWidth、offsetHeight、offsetLeft、offsetTop
2).scrollWidth、scrollHeight、scrollLeft、scrollTop
3).clientWidth、clientHeight、clientLeft、clientTop
4.dom的resize事件触发
重绘 repaint
当元素的属性（如元素的颜色/背景）发生变化而导致GPU需要重新渲染的过程，称之为重绘
回流必定导致重绘，重绘不一定引发回流
如何尽可能避免 reflow
1.当进行dom添加或者删除时，通过变量保存获取的dom节点，使用文档片段DocumentFragment进行内存的累加最后再追加到dom上
2.当进行元素大小/宽度/布局操作时，定义class类将操作集合，通过一次切换class实现
3.对offset/scroll/client等位置属性访问处理时，用变量进行缓存
4.对需要动画操作的元素，尽可能使用position脱离文档流
网友评论