一、浏览器线程
概念：
浏览器线程是指浏览器进程中的线程，用于处理浏览器的各种操作。浏览器的线程有以下五大类：
1.JS引擎线程
JS内核，也称JS引擎，负责处理执行javascript脚本。这是JS中的主线程，所以JS是单线程的编程语言，但是实际上JS属于单线程异步。异步是由子线程进行完成，主线程负责调度子线程。所以JS不严格的说也也属于多线程的编程语言
与GUI线程是互斥
2.GUI渲染线程
负责渲染浏览器界面，包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
与JS主线程互斥
3.事件监听线程
用来完成事件处理的，例如：click，mouseover等事件触发后，将触发后的执行函数，推入执行栈。
4.计时器线程
负责处理定时器。setInterval、setTimeout等待时间结束后，将执行函数推入执行栈。
5.网络线程
负责处理http网络请求的
二、浏览器渲染流程
渲染前奏
-
浏览器输入url，浏览器主进程接管，开了一个下载线程
-
然后进行HTTP请求（DNS查询、IP寻址等等），等待响应，开始下载响应报文。
-
将下载完的内容转交给Renderer进程管理
-
开始渲染...
渲染前置概念
1.DOM Tree： 浏览器将HTML解析成树形的数据结构。
2.CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
3.Render Tree：DOM树和CSS规则树合并后生产Render树。
4.layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
5.painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
6.reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
6.repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意：display:none的节点不会被加入Render Tree，而visibility: hidden则会，所以display:none会触发reflow，visibility: hidden会触发repaint。
渲染步骤
浏览器内核拿到响应报文之后，渲染大概分为以下步骤
-
解析html生产DOM树。
-
解析CSS规则。
-
根据DOM Tree和CSS Tree生成Render Tree。
-
根据Render树进行layout，负责各个元素节点的尺寸、位置计算。
-
绘制Render树(painting)，绘制页面像素信息。
-
浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。
1207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
