前言关于HTML、css、JavaScript如何变成页面，这个问题你有没有看懂？浏览器在幕后究竟做了什么？让我们了解浏览器的渲染原理，这是进行更深层次开发必不可少的东西，可以让我们更深层次、多角度地考虑性能优化等问题。HTML、css、JavaScript数据经过中间渲染模块处理，最终显示在页面上（其中有HTML超文本标记语言，CSS层叠样式表，JS就是JavaScript，大家一般都知道是什么东西，写过web的朋友页，学习者每个人都知道）。HTML的内容由标签和文本组成。CSS全称为级联样式表，由选择器和属性组成。JS可以让网页内容“动起来”。有人说渲染过程可以分为：构建DOM树、样式计算、布局Staging、layering、painting、tiling、rasterization和compositing等。再回顾一下浏览器，是多线程的，js是单线程的，而JS在浏览器中，可以多线程。下面介绍浏览器渲染原理的话题。为什么要了解浏览器渲染页面的机制？.浏览器渲染原理首先，JavaScript引擎是基于事件驱动的单线程执行的。渲染线程负责渲染浏览器界面，但是GUI渲染线程和JS引擎是互斥的。当JS引擎执行时，GUI线程会被挂起，GUI的更新也会存储在一个队列中，直到JS引擎空闲时才会执行。那么什么是DOCTYPE及其作用呢？DTD，documenttypedefinition，文件类型定义是用来定义XML或(x)HTML文件类型的一系列语法规则。浏览器将使用它来确定文档类型，决定使用哪种协议进行解析，以及切换浏览器模式。DOCTYPE用于声明文档类型和DTD规范，其主要用途之一是文档的合法性验证。如果文件编码不合法，浏览器解析时会出现一些错误。下图是浏览器的渲染过程图：rearrangementReflow重排的定义：DOM结构中的每个元素都有自己的盒模型，需要浏览器根据各种样式进行计算，并按照计算结果放置元素的位置它应该出现的地方，这个过程被称为回流。触发Reflow当你添加、删除和修改Dom节点时，会导致Reflow或Repaint当你移动DOM的位置时，或者当你制作动画时，当你修改CSS样式时当你调整窗口大小时，或者当你滚动时,重绘Repaint的定义当你修改网页的默认字体时，当各种框的位置、大小和其他属性，如颜色、字体大小等确定下来后，浏览器再绘制这些元素根据各自的特点，所以页面的内容出现。这个过程称为重绘。触发Repaint的情况下的DOM变化和CSS变化就说到这里了，下面来分解一下！简单介绍浏览器的工作原理，了解浏览器目前使用的主流浏览器：InternetExplorer、Firefox、Safari、Chrome浏览器、Opera。再来看看浏览器统计的比例：让你说说浏览器的主要功能：就是向服务器发送请求，在浏览器窗口显示你选择的网络资源。资源一般是指HTML文档，可以是PDF、图片或其他类型。资源的位置由用户使用URI确定（在计算机术语中，统一资源标识符(URI)是用于在Internet上标识资源名称的字符串）浏览器的结构用户界面：包括地址栏、前进、后退按钮、书签菜单等。浏览器引擎：在用户界面和渲染引擎之间传递指令。渲染引擎：负责显示请求的内容。Network：用于网络调用，比如HTTP请求；其接口与平台无关，提供所有平台的底层实现。UIBackend：用于绘制组合框和窗口等基本小部件。它公开了一个通用的独立于平台的接口，同时在底层使用操作系统的用户界面方法。JavaScript解释器：用于解析和执行JavaScript代码。数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，比如cookies。新的HTML规范定义了一个“网络数据库”，它是一个完整的浏览器内数据库。注意：Chrome浏览器的每个标签页对应一个渲染引擎实例，每个标签页都是一个独立的进程。渲染引擎渲染引擎的作用是“渲染”，用于在浏览器的屏幕上显示请求的内容。一般来说，渲染引擎可以展示HTML和xml文档和图片，其他类型的内容可以通过插件或者浏览器扩展来展示。浏览器（Firefox、Chrome和Safari）建立在两个渲染引擎之上。Firefox使用Gecko，而Safari和Chrome使用WebKit（WebKit是一个开源渲染引擎）。主进程渲染引擎最初从网络层获取请求文档的内容，其大小一般限制在8000块以内。渲染引擎会开始解析HTML文档，将每一个标签一个一个地转换成“内容树”上的一个DOM节点。它还解析外部CSS文件和样式元素中的样式数据。一旦构建了渲染树，它就会经历“布局”过程，即为每个节点分配它应该出现在屏幕上的确切坐标。解析解析是渲染引擎中的一个重要环境。什么是解析？解析文档是指将文档转换成代码可以理解和使用的有意义的结构。解析后的结构通常是表示文档结构的节点树，称为解析树或句法树。句法解析是根据文档所遵循的语法规则进行的。解析过程分为两个子过程：词法分析和句法分析。什么是词法分析？词法分析是将输入内容分割成大量的token，token（语言中的词），构成内容的单元的过程。相当于语言中的单词。什么是语法分析？语法分析是应用一种语言的语法规则的过程。所以，解析器的一般解析工作分为两个部分，词法分析器（负责将输入的内容分解成有效的token），解析器负责根据语言的语法规则分析文档的结构构建解析树。从源文档到解析树：Document->LexicalAnalysis->SyntaxAnalysis->ParseTree解析是一个迭代的过程。好吧，解析器向词法分析器请求一个新标记并尝试将其与语法规则相匹配。如果规则匹配，解析器将与该标记对应的节点添加到解析树中，然后移动到下一个节点。但是如果没有匹配的规则，parser会在内部存储token，并不断的查询token，直到有匹配的规则，但是如果没有匹配的规则，就会抛出异常（文档无效，包含语法错误，ETC。）。翻译分析通常是在翻译的过程中进行的，翻译就是把输入的文档转换成另一种形式，比如编译器把源代码编译成机器码，这个过程就是把源代码解析成解析树，然后翻译将树解析为机器代码文档。编译过程：SourceCode->Parsing->ParseTree->Translation->MachineCodeParsertype两种基本的解析器类型：top-downparser，bottom-upparserTop-down是：Parse过滤器从高层结构开始语法并尝试从中找到匹配的结构。自下而上的意思是：解析器从低层规则开始，逐步将输入内容转化为文法规则，直到满足高层规则。你知道一个叫做解析器生成器的工具吗，它可以帮你生成解析器，你只需要向它提供你正在使用的语言的语法，即词汇和语法规则，就会生成相应的解析器.你头晕？你可以点击这里查看：浏览器是如何工作的：新型网络浏览器的幕后花絮https://www.html5rocks.com/zh...渲染机制浏览器从接收页面开始到显示页面，所有过程在整个过程步骤，称为关键渲染路径，一般分为页面内容加载完成和页面资源完成两个步骤，分别对应DOMContentLoaded和Loadkey：一个网页的渲染过程如下，包括两个过程页面加载和页面渲染。页面加载过程是向服务器请求资源并构建DOM树的过程，而网页渲染过程是指通过DOM树渲染视图内容。DOM+CSS->RenderTreeReview整个关键渲染包括：解析HTML，生成DOM树（DOM），解析CSS，生成CSSOM树，合并DOM和CSSOM，生成渲染树（Rendere-Tree），计算布局rendertree,Layout将布局渲染到屏幕上Paint那么我要问了，为什么我需要了解浏览器渲染页面的机制？了解渲染机制主要是为了性能优化：了解浏览器是如何加载的，在引用外部样式文件和JS文件时，把它们放在合适的位置，这是浏览器完成文件加载的最快速度；了解浏览器如何分析，选择最好的写法，构建DOM结构，组织CSS选择器，都是为了提高浏览器的分析率；了解浏览器如何呈现可以减少“重绘”和“重新布局”的消耗。所以上面一直在讲理解渲染机制，出现的几个基本概念，我们先搞清楚：DOM：DocumentObjectModel，浏览器将HTML解析成树状的数据结构CSSOM：CSSObjectModel，浏览器将CSS解析成一个树形数据结构RenderTree：结合DOM和CSSOM生成RenderTreeLayout：计算每个节点在RenderTree中的具体位置Painting：将布局后的节点内容通过显卡呈现在屏幕上Talk关于浏览器页面渲染：首先Step1:CSS资源请求回来之前生成DOM树；Step2：所有CSS请求返回后，浏览器按照CSS的导入顺序依次渲染，最终生成CSSOM树；Step3：把DOM树和CSSOM树结合起来，生成有样式和结构化的RENDERTREE渲染树；最后一步：浏览器根据渲染树在页面中渲染解析，渲染树来自知乎的渲染引擎和关键渲染路径。机制过于复杂，渲染模块在执行过程中分为很多阶段。通过《浏览器工作原理与实践》——渲染过程分为：构建DOM树、样式计算、布局阶段；渲染过程分为：分层、图层绘制、网格光栅化、合成和显示。整个渲染过程，从HTML到DOM，样式计算，布局，图层，绘制，光栅化，合成，显示。面试题：为什么要构建DOM树？答：因为浏览器不能直接理解和使用HTML，所以需要将HTML转换成浏览器可以理解的结构，即DOM树（一般理解为树结构）。为了了解完整的DOM树结构，可以打开Chrome的“开发者工具”，或者按F12，如下图所示：下一步是让DOM节点有正确的样式，这就需要进行样式计算。样式计算的目的是计算DOM节点中每个元素的具体样式：三步将CSS转换成浏览器可以理解的结构转换样式表中的属性值标准化计算每个节点DOM树的具体样式（涉及CSS继承规则和级联规则）当渲染引擎接收到CSS文本时，会进行转换操作，将CSS文本转换成浏览器可以理解的结构——styleSheets。归一化属性值的过程：将所有的值转换为渲染引擎容易理解的归一化计算值。DOM元素最终计算出来的样式如图：布局阶段布局：计算可见元素在DOM树中的几何位置，先创建布局树（构建只包含可见元素的布局树），第二次布局计算.面试题：CSSloading会不会阻塞页面显示？CSS加载不会阻塞DOM树的解析。CSS加载会阻塞DOM树的渲染。CSS加载会阻塞后续js语句的执行。所以，为了防止用户看到长时间的白屏，应该提高CSS的加载速度。为了防止css阻塞导致页面白屏，可以提高页面加载速度。使用cdn压缩css，合理使用cache减少http请求，合并多个css文件。？会不会挡住页面的显示？说完DOM生成、样式计算和布局三个阶段，再说下面几个阶段。说说分层：渲染引擎??把页面分成很多层，这些层按照一定的顺序叠加在一起，就形成了最终的页面。layertree的构建完成后，渲染引擎会绘制layertree中的每一个layer，并针对layer进行绘制。然后进行光栅化（raster）操作（绘图列表只是用来记录绘图顺序和绘图指令的列表，但实际上绘图操作是由渲染引擎中的合成线程完成的），最后合成显示。找一张整体流程图如下：页面渲染机制图如下：渲染过程图如下：浏览器渲染过程如下：浏览器解析的三个东西的流程图如下：一个是HTML/SVG/XHTML，一个是CSS，第三个是Javascript这里的脚本重要的是要说（再次强调）回流和重绘的两个概念：当rendertree的一部分因为变化需要重新构建的时候元素的大小、布局和隐藏。这称为回流。每个页面至少需要一次回流，即页面首次加载时。在回流期间，浏览器会将受影响的渲染树部分作废，并重建这部分渲染树。回流完成后，浏览器会将受影响的部分重新绘制到屏幕上，这个过程称为重绘。当渲染树中的某些元素需要更新属性时，这些属性只影响元素的外观和样式，而不影响布局，例如background-color。这叫重绘。文末留了一些面试题：为什么减少重绘和重排可以优化Web性能？如何减少重绘和重排？综上所述，以上就是我今天要讲的内容。本文仅简单介绍Chrome浏览器的渲染原理过程。感谢您阅读。如果您觉得本文对您有帮助，欢迎分享给更多的朋友。
