浏览器渲染原理和网页打开机制
举一个例子，如果说JS是工具，前端开发时操作工具的人。如果说JS是一辆汽车，而前端开发是司机，那么高速公路就是浏览器，这是它的工作环境。
为什么很多新人加入前端开发不好找工作？因为他们只会踩油门，拧方向盘，并不懂得高速公路上的各种标识和规则，遇到突发情况应该如何处理，如果你是一个运输公司老板，那么你肯定也不会雇佣这样的人当司机。
目前来说，绝大多数的前端开发的工作场景依然是浏览器。所以前端开发必须要了解浏览器的运行机制。
浏览器是多线程，JS是单线程，JS在浏览器中可以使多线程的。例如打开多个网页同时运行多个JS。
浏览器，在内和控制下互相配合保持同步。
至少有三个常用的线程：JavaScript引擎线程、GUI渲染线程、浏览器事件触发线程
JavaScript引擎线程是基于事件驱动单线程执行的。
渲染线程负责浏览器界面，但是GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI的更新会被保存在一个队列中，等到JS引擎空闲后才会被执行。这就是JS阻塞页面加载。
事件触发线，当一个事件被触发时，该线程会把事件添加到任务队列的队尾，等待JS引擎处理。
浏览器，是一个应用软件，它的界面特征有哪些？
界面，浏览器引擎（控制渲染引擎执行），渲染引擎，网络（处理http请求和响应），UI后端的接口(验证提示等)，JS解释器，数据存储(cookie)
浏览器内核：
Trident内核：IE
webkit内核：Chrome,Safari
Gecko内核：FireFox
呈现引擎一开始会从网络获取请求文档的内容，然后进行如下基本操作。
解析HTML到DOM树
渲染树
布局树
绘制树
呈现引擎开始解析HTML文档内容，并将各个标记逐渐转化成“内容树”上的DOM节点。同时也会解析外部的CSS文件以及样式元素中的样式数据。HTML中这些带有视觉指令的样式信息将用于创建另一个树结构：呈现树
呈现树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
呈现树构建完毕后，进入”布局“处理阶段，为每个节点分配一个应出现在屏幕上的确切坐标，下一个阶段是绘制，呈现引擎会遍历呈现树，由用户界面后端层将每个节点绘制出来。
当用户访问页面时候，浏览器需要获取用户请求内容，这个过程主要涉及到浏览器网络模块
用户在地址栏输入域名，如，DNS（域名解析系统）服务器根据输入的域名查找对应的IP，然后向该IP发起请求。
2.浏览器获得并解析服务器的返回内容（HTTP response）
3.浏览器加载HTML文件以及文件内包含的外部引用的文件及图片，多媒体资源。在这个过程中，把html,css,js这些东西获取到并进行解析。
这是一个渐进的过程，为了达到更好的用户体验，呈现引擎会力求尽快将内容显示到屏幕上去，它不必等整个HTML解析完毕后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容同时，呈现引擎会将部分内容解析并显示出来。
什么是Html解析：
解析 Html / css 文档是指将文档转化成为有意义的结构，也就是可以让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它乘坐解析树或者语法树。
解析过程可以分成两个子过程：词法分析 和 语法分析。
词法分析：将输入内容分割成大量标记的过程。
语法分析：应用语言的语法规则过程。在人类语言中，相当于语言字典中的单词。根据（html 或 css 等）语言的语法规则分析文档的结构，从而构建解析树。
html 解析器：任务是将html表及解析成 解析树。
html 的定义采用了DTD格式。包括了所有允许使用的元素及其属性和层次结构的定义。现在都是使用html5的规范
DOM 解析器：输出”解析树“是由DOM元素和属性节点构成的树结构。
例子：
<!doctype html><html><head><link rel="stylesheet" href="./theme.css"></link><script src="./config.js"></script><title>关键渲染路径</title></head><body><h1 class="title">关键渲染路径</h1><p>关键渲染路径介绍</p><footer>@copyright</footer></body></html>CSS 例子：html,body{width:100%;height:100%;background-color:#fcfcfc;}.title{font-size:20px;}.footer{font-size:12px;color:#aaa;}
首先浏览器从上到下依次解析文档构建DOM树。
上面的过程主要有两个阶段：标记化、树构建。
标记化是词法分析过程，将输入内容解析成多个标记。
HTML 标记包括 起始标记、结束标记、属性名称 和 属性值。不断解析，直到加载网页结束。
树的构建：在创建解析器的同时，也会创建Document 对象，在树构建阶段，以Document为根节点的Dom树也会不断进行修改，向其中添加各种元素。标记生成器发送的每个节点都会由树构建器进行处理。
这些标记元素不仅会添加到DOM树中，还会添加到开放元素的堆栈中。此堆栈用于纠正嵌套错误和处理未关闭的标记。其算法也可以用状态机来描述。这些状态称为”插入模式“
DOM树 和 渲染树
每一个渲染对象都对应着一个DOM节点。
创建渲染树后，下一步就是布局（Layout）
这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口正确位置。
有时候会在文档布局完成后对DOM进行修改，这个时候可能会重新布局，也称为回流（重绘）。根据需求，可分为全局重绘或者是局部重绘，最终触发”重新渲染页面“。
