序言
对于HTML，css和JavaScript是怎样弄成页面的，这个问题你了解过吗？浏览器到底在背后都做了些哪些事情呢？让我们去了解浏览器的渲染原理，是通往更深层次的开发必不可少的事情，能让我们更深层次，多角度的去考虑性能优化等问题。
HTML，css，JavaScript数据经过中间渲染模块的处理，最终显示在页面上（其中HTML超文本标记语言，CSS层叠式样表，JS为JavaScript，你们通常都晓得是哪些，写过网页的同学，学习者大都晓得的）。
有人说渲染流程可以分为：建立DOM树，款式估算，布局阶段,分层，勾画，分块，光栅化和合成等。其中浏览器备考一下，它是多线程的的，js是单线程的，JS在浏览器中，它可以是多线程的。
下边围绕浏览器渲染原理话题开始描述，为何要了解浏览器渲染页面机制呢？接出来让我渐渐告诉你：
浏览器渲染原理
首先，JavaScript引擎是基于风波驱动单线程执行的，渲染线程负责渲染浏览器界面，并且GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI的更新也会被保存在一个队列中，等到JS引擎空闲时才有机会被执行。
这么哪些是DOCTYPE以及作用呢
DTD,documenttypedefinition,文档类型定义，是一系列的句型规则，拿来定义XML或（x)HTML的文件类型。浏览器会使用它来判定文档类型，决定使用何种合同来解析,以及切换浏览器模式。
DOCTYPE是拿来申明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。假如文件代码不合法，这么浏览器解析时便会出一些差错。
右图为浏览器的渲染过程图：
重排Reflow
重排的定义：DOM结构中的各个元素都有自己的袋子模型，这种都须要浏览器按照各类款式来估算并按照估算结果将元素放在它该出现的位置，这个过程称之为reflow.
触发Reflow情况
重画Repaint
重画的定义，当各类袋子的位置，大小以及其他属性，比如颜色，字体大小等都确定出来后，浏览器于是便把这种元素都根据各自的特点勾画了一遍，于是页面的内容出现了，这个过程称为repaint。
触发Repaint情况
提到这儿，下边来细分说一下吧！
简单介绍一下浏览器的工作原理
了解浏览器
目前使用的主流的浏览器：InternetExplorer，Firefox，Safari，Chrome浏览器，Opera。让我们瞧瞧浏览器统计数据的占比：
让你聊聊浏览器的主要功能：
就是向服务器发出恳求，在浏览器窗口中展示您选择的网路资源，资源通常指HTML文档，可以是PDF，图片或其他的类型。资源的位置由用户使用URI（在笔记本术语中，统一资源标示符（UniformResourceIdentifier，URI)是一个用于标示某一互联网资源名称的字符串）
浏览器的结构
注意：Chrome浏览器的每位标签页都分别对应一个呈现引擎实例，每位标签页都是一个独立的进程。
呈现引擎
呈现引擎的作用是“呈现”，用于在浏览器的屏幕上显示恳求的内容。
通常情况下，呈现引擎可显示HTML和xml文档与图片，通过插件或浏览器扩充程序，可以显示其他类型的内容。浏览器（Firefox，Chrome浏览器和Safari）是基于两种呈现引擎打造的。
Firefox使用的是Gecko，而Safari和Chrome浏览器使用的是WebKit（WebKit是一种开放源代码呈现引擎）。
主流程
呈现引擎一开始会从网路层获取恳求文档的内容，其大小通常限制在8000个块以内。
呈现引擎将开始解析HTML文档，并将各标记挨个转化成“内容树”上的DOM节点。同时也会解析外部CSS文件以及款式元素中的款式数据。呈现树建立完后，会步入“布局”处理阶段，也就是为每位节点分配一个应出现在屏幕上的准确座标。
解析
解析是呈现引擎中重要的环境，哪些是解析呢？
解析文档是指将文档转化成为有意义的结构，可以让代码理解和使用的结构。解析得到的结构一般是代表了文档结构的节点树，它称为解析树或则句型树。
句型
解析是以文档所遵守的句型规则为基础的。解析的过程分为两个子过程：词法剖析和句型剖析。
哪些是词法剖析呢？
词法剖析是将输入内容分割成大量标记的过程，标记（语言中的词汇），构成内容的单位。相等于语言中的词组。
哪些是句型剖析呢？
句型剖析是应用语言的句型规则的过程。
so，解析器通常解析工作分两个组件处理，为词法剖析器（负责将输入内容分解成一个个有效标记），解析器负责按照语言的句型规则来剖析文档的结构，来建立解析树。
从源文档到解析树：Document->LexicalAnalysis->SyntaxAnalysis->ParseTree
解析是一个迭代的过程。
是这样的，解析器会向词法剖析器恳求一个新标记，并尝试将其与某条句型规则进行匹配。假如匹配规则，解析器都会将对应与该标记的节点添加到解析树中，之后继续下一个。
然而若果没有匹配的规则，解析器会将标记储存到内部，继续恳求标记，直至可与之匹配的规则，而且假如没有直至的话，还会引起异常（文档无效，包含句型错误等）。
翻译
解析一般是在翻译的过程中，而翻译是将输入的文档转换为另一种方式，如编译器将源代码编译成机器代码，流程是将源代码解析成解析树，将解析树翻译成机器代码文档。
编译流程：SourceCode->Parsing->ParseTree->Translation->MachineCode
解析器类型
两种基本的解析器类型：自上而下解析器，自下而上解析器
自上而下就是：解析器从句型的高层结构出发，尝试从中找到匹配的结构。
自下而上就是：解析器从低层规则出发，将输入内容逐渐转化为句型规则，直到满足高层规则。
你晓得一种工具叫解析器生成器吗，它还能帮助你生成解析器，你只要向它提供你所使用的语言的句型，即词汇和句型规则，之后还会生成相应的解析器。
你晕了吗？可以点击这儿查看：浏览器的工作原理：旧式网路浏览器幕后起底
渲染机制
浏览器从接收到页面开始到页面显示，这整个过程中的所有步骤，称关键渲染路径，通常分为两步：页面内容加载完成和页面资源完成，分别对应于DOMContentLoaded和Load
关键：网页的渲染过程如下，包含页面加载和页面渲染两个过程。
页面加载过程是，从服务器恳求资源并建立DOM树的过程，网页渲染过程指的是通过DOM树渲染出视图内容。
首先浏览器加载网页内容，使用HTML类库将网页转变为一系列的token，再依照token建立dom树，当一个可见的dom节点插入到dom树时，浏览器会建立一个renderObject节点并将其插入到render树中。
Render树包含节点的款式信息，可以简单理解为dom+css构成。Render树将交由排版引擎处理，估算出每一个RenderObject节点的大小和位置等信息，之后再交给由渲染引擎完成页面的内容勾画。
DOM+CSS->RenderTree
备考一下整个关键渲染包括：
这么要问了，为何要了解浏览器渲染页面机制呢？
了解渲染机制，主要还是为了性能的优化：
了解浏览器怎样进行加载，引用外部式样文件，JS文件时，将它们放在合适的位置，是浏览器最快的速率让文件加载完毕；了解浏览器怎样进行解析，选择最优的写法，建立DOM结构，组织CSS选择器的时侯，是为了增强浏览器的解析速度；了解浏览器怎样进行渲染，是可以降低“重绘”，“重新布局”的消耗。
这么里面仍然说了解渲染机制，出现的几个基本概念，这儿先弄明白：
当浏览器获取HTML文件后，会自上而下加载并在加载过程中进行解析和渲染；加载就是获取资源的过程；若果在加载过程中遇见外部的css文件和图片，浏览器会另外发送一个恳求，去获取css文件和图片，这个请求是异步的，并不会影响HTML文件的加载；但若果遇见JavaScript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。
为何须要等待JavaScript呢？
由于JavaScript可能会更改dom，致使旁边的HTML资源白白加载，须要等待JavaScript文件加载完成后，再继续渲染，so，JavaScript文件通常写在顶部body标签前的缘由。
谈谈浏览器页面渲染：
因为渲染机制过分复杂，渲染模块在在执行过程中界定了好多阶段，通过《浏览器工作原理与实践》-渲染流程上分：建立DOM树，款式估算，布局阶段；渲染流程下分：分层，视口勾画，栅格化（raster）操作，合成和显示。
整个渲染流程，从HTML到DOM、样式估算、布局、图层、绘制、光栅化、合成和显示。
笔试一问：为何要建立DOM树？
答：由于浏览器不能直接理解和使用HTML，so，须要将HTML转换为浏览器才能理解的结构，即是DOM树（树结构通常都了解了的）。
为了了解完整的DOM树结构，可以打开Chrome的“开发者工具”，或按F12，如图下：
接出来要让DOM节点拥有正确的款式，这就须要款式估算了。
款式估算的目的是为了估算出DOM节点中每位元素的具体款式：三步走
当渲染引擎接收到CSS文本时，会执行一个转换操作，将CSS文本转换为浏览器可以理解的结构——styleSheets。属性值标准化的过程：将所有值转换为渲染引擎容易理解的、标准化的估算值。
DOM元素最终估算的款式如图：
布局阶段
布局：估算出DOM树中可见元素的几何位置，第一创建布局树（建立一棵只包含可见元素布局树），第二布局估算。
笔试问题：CSS加载会阻塞页面显示吗？
so，为了防止让用户听到长时间的死机时间，应当提升css的加载速率。
为了避免css阻塞，导致页面死机，可以提升页面加载速率
笔试问题：下载CSS文件阻塞了，会阻塞DOM树的合成吗？会阻塞页面的显示吗？
答：不会阻塞dom树建立的，由于HTML转化为dom树的过程，发觉文件恳求会交给网路进程去恳求对应文件，渲染进程继续解析HTML。
会阻塞页面的显示，当估算款式的时侯须要等待css文件的资源进行层叠款式，资源阻塞了，会进行等待，直至网路超时，network报出错误，渲染进程继续层叠款式估算。
说了DOM生成、样式估算和布局三个阶段，接出来聊聊前面的阶段。
谈谈分层：渲染引擎给页面分了好多视口，这种视口根据一定次序叠加在一起，就产生了最终的页面。完成视口树的建立后，渲染引擎会对视口树中的每位视口进行勾画，为视口勾画。之后进行栅格化（raster）操作（勾画列表只是拿来记录勾画次序和勾画指令的列表，而实际上勾画操作是由渲染引擎中的合成线程来完成的），最后合成与显示。
页面渲染机制图如下：
渲染过程图如下：
浏览器渲染过程如下：
这儿重点要说（重新说一下）两个概念回流和重画：
当rendertree中的一部份由于元素的规模规格，布局，隐藏等改变而须要重新建立。这就称为回流(reflow)。
每位页面起码须要一次回流，就是在页面第一次加载的时侯。
在回流的时侯，浏览器会使渲染树中遭到影响的部份失效，并重新构造这部份渲染树，完成回流后，浏览器会重新勾画受影响的部份到屏幕中，该过程成为重画。
当rendertree中的一些元素须要更新属性，而这种属性只是影响元素的外形，风格，而不会影响布局的，例如background-color。就叫称为重画。
本篇文章的最后，留下一道思索题：降低重画/重排能优化Web性能吗？怎么能降低重画/重排？
参考资料总结
以上就是明天要讲的内容，本文简单介绍了Chrome浏览器的渲染原理流程。假如你认为这篇文章对你有帮助的话，也欢迎把它分享给更多的同事。
—————END—————
