浏览器运行机制详解

1. 浏览器是多进程的

GPU进程

• 最多一个，用于3D绘制等

Browser进程

• 负责浏览器界面显示，与用户交互。如前进，后退等
• 负责各个页面的管理，创建和销毁其他进程
• 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
• 网络资源的管理，下载等

第三方插件进程

• 每种类型的插件对应一个进程，仅当使用该插件时才创建

浏览器渲染进程（浏览器内核）

• 默认每个tab页一个进程
• 页面渲染，脚本执行，事件处理等

2. 浏览器渲染进程是多线程的

GUI渲染线程

• 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

js引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行
• 同样注意，GUI渲染线程与JS引擎线程是互斥的。所以如果JS执行的时间过长，要放在body下面，否则就会导致页面渲染加载阻塞。

事件触发线程

• 管理着事件队列
• 监听事件，符合条件时把回调函数放入事件队列中

定时触发器线程

• setInterval与setTimeout在此线程中计时完毕后，把回调函数放入事件队列中
• 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确），因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
• 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

异步http请求线程

• 检测到XHR对象状态变化时，将回调函数放入事件队列中

event loop整体流程

3. repaint、reflow

repaint

• repiant或者redraw遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性，然后根据检测的结果更新页面的响应部分。
• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

reflow

• reflow指的是计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置，而且还有可能触发其子节点、祖先节点和页面上的其他节点reflow。在这之后再触发一次repaint。
• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流，就是在页面第一次加载的时候。

导致reflow的操作

1. 调整窗口大小
2. 改变字体
3. 增加或者移除样式表
4. 内容变化，比如用户在input框中输入文字
5. 激活 CSS 伪类，比如 :hover (IE 中为兄弟结点伪类的激活)
6. 操作 class 属性
7. 脚本操作 DOM
8. 计算 offsetWidth 和 offsetHeight 属性
9. 设置 style 属性的值

它们会大大影响web性能，如何减少reflow、repaint

1. 不要通过父级来改变子元素样式，最好直接改变子元素样式，改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸
2. 尽量通过class来设计元素样式，切忌用style
   多次操作单个属性
3. 实现元素的动画，对于经常要进行回流的组件，要抽离出来，它的position属性应当设为fixed或absolute
4. 权衡速度的平滑。比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
5. 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，
6. 这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
7. css里不要有表达式expression
8. 减少不必要的 DOM 层级（DOM depth）。改变 DOM 树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
9. 避免不必要的复杂的 CSS 选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的 CPU。
10. 尽量不要过多的频繁的去增加，修改，删除元素，因为这可能会频繁的导致页面reflow，可以先把该dom节点抽离到内存中进行复杂的操作然后再display到页面上。
11. 请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight，scrollTop/Left/Width/Height，clientTop/Left/Width/Height，浏览器会发生reflow，建议将他们合并到一起操作，可以减少回流的次数。