上一篇文章对浏览器Event Loop机制中Tsak以及MicroTask执行过程讲述中，对一个Event Loop结束后更新渲染（Update the rendering）的过程并没有说明，所以单独写一篇文章来讲解浏览器渲染布局

webkit渲染引擎流程

关键渲染路径

关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程

浏览器请求、加载、渲染一个页面的耗时任务主要有：
①DNS 解析查询
②TCP/IP 连接
③HTTP 请求和响应
④服务器响应
⑤客户端渲染

客户端渲染也就是我们说的浏览器渲染，主要包括以下几步：
①解析HTML生成DOM树
②解析CSS生成CSSOM规则树
③将DOM树与CSSOM规则树合并在一起生成渲染树
④遍历渲染树开始布局，计算每个节点的位置大小信息
⑤将渲染树每个节点绘制到屏幕
注：上面步骤不一定是一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。

构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，HTML Parser将HTML标记解析成DOM Tree
但DOM树的生成过程中可能会被CSS和JS的加载执行阻塞,后面讲解
例1：

<html>
<head><title>Web page parsing</title>
</head>
<body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div>
</body>
</html>

经过解析之后的DOM Tree差不多就是：

构建CSSOM规则树

CSS Parse将每个CSS文件都被解析成一个StyleSheet对象，每个对象都包含Style Rules，Style Rules也叫CSSOM（CSS Object Model）。
例2：

阻塞渲染

当HTML解析器（HTML Parser）遇到script标记阻塞时，解析器虽然会停止构建 DOM，但仍会执行JavaScript脚本的资源直至脚本执行完再开始构建DOM；如果JavaScript脚本还操作了CSS，而正好这个CSSOM还没有下载和构建，这时就存在阻塞的资源，浏览器会延迟JavaScript脚本执行，直至完成其CSSOM的下载和构建再执行。

①遵循下面两个原则
CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源
JavaScript 置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建
②使用媒体类型(media type)和媒体查询(media query)

<link href="vue.css" rel="stylesheet" media="print"> //设置了媒体类型，会加载但不会阻塞
<link href="vue.css" rel="stylesheet" media="(min-width: 30em) and (orientation: landscape)">//提供了媒体查询，会在符合条件时阻塞渲染

③使用defer或者async(这2个属性只对设置了scr属性的外部脚本有效，对内联脚本（没有设置src属性的script）无效)

关于JavaScript的加载执行顺序

<script src="vue.js" defer></script>
//defer的script将会并发异步的去下载对应的外部脚本文件(可能从本地缓存中获取)
vue.js下载完成后不会马上执行，要等到HTML解析完成后，按脚本出现的顺序依次执行，这个过程中多个脚本之间是顺序执行
(即延迟执行引入的js脚本)<script src="vue.js" async></script>
//async的script将会并发异步的去下载对应的外部脚本文件（可能从本地缓存中获取），
vue.js下载完成后，渲染引擎中断渲染，执行这个脚本以后，再继续渲染，这个过程中多个脚本按下载完成的时间的先后顺序依次执行

构建渲染树

Render Tree的构建其实就是DOM Tree和CSSOM Attach的过程(每个 DOM 节点都有一个“attach”方法)

样式计算：
样式计算是个很复杂的问题。DOM中的每个节点可以对应样式表中的多个元素，样式表包括了所有样式：浏览器默认样式表，自定义样式表，inline样式元素，HTML可视化属性如：width=100
注：display等于none的不会被显示在渲染树里，但是visibility等于hidden的元素是会显示在渲染树里的

渲染树布局(Layout)

创建渲染树后，下一步就是布局（Layout）,或者叫回流（reflow），这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，也可称其为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或者回流方法，实现其布局或回流。

渲染树绘制(Painting)

在绘制阶段，系统会遍历渲染树，并调用渲染器的“paint”方法，将渲染器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。

reflow和repaint：

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变

常见引起重绘(repaint)属性和方法：

reflow：元件的几何尺寸变了，我们需要重新验证并计算Render Tree，是Render Tree的一部分或全部发生了变化。这就是reflow(Layout),reflow 会从这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame。

常见引起回流(reflow)属性和方法：

注：display:none会触发reflow，visibility: hidden只会触发replaint；reflow的成本比replaint的成本高得多的多。DOM Tree里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

$('body').css('color', 'red'); // repaint
$('body').css('margin', '2px'); // reflow, repaintvar bstyle = document.body.style; // cachebstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; //  再一次的 reflow 和 repaintbstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaintbstyle.fontSize = "2em"; // reflow, repaintdocument.body.appendChild(document.createTextNode('dude!'));// new DOM element - reflow, repaint

！！！浏览器不会像上面那样，每改一次样式，它就reflow或repaint一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次reflow，这又叫异步reflow或增量异步reflow。但是有些情况浏览器是不会这么做的，比如：resize(调整)窗口，改变了页面默认的字体等这些操作，浏览器会马上进行reflow。

总结

浏览器渲染是个很繁琐的过程，其中每一步都有对应的算法，我也不是很懂；但是了解浏览器渲染机制的原理和过程，可以优化css样式来提升浏览器渲染时的一些性能问题

浏览器渲染机制的原理和过程相关推荐

网站性能优化实战（二）——深入浅出浏览器渲染机制
--从Webkit内部渲染机制出发,谈网站渲染性能优化本文是对前文:imweb.io/topic/5b6fd- 相关知识的补充,文中的"前文"一词同此. 特以此文向<Web ...
div置于页面底部_浏览器渲染页面的原理及流程
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
浏览器渲染页面的原理及流程---------重绘与重排（回流）--优化
浏览器渲染页面的原理及流程浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面呢? 1.根据html文件构建DOM树和CSSOM树.构建DOM树期间,如果遇到JS,阻塞DOM树及CSSO ...
浏览器渲染机制之重排Reflow
什么是Reflow? DOM结构中每个元素都有自己的盒子模型,都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置, 这个过程称之为reflow 什么时候会触发Reflow? 修改Do ...
浏览器渲染机制面试_面试官不讲码德，问我Chrome浏览器的渲染原理（6000字长文）...
前言对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次的开发必不可少的事情,能让我们更深 ...
浏览器页面渲染机制-前端原理剖析
浏览器页面渲染机制前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种: ...
浏览器渲染机制面试_浏览器渲染原理
本文目录结构问题浏览器渲染原理渲染过程 1. 浏览器接收到 HTML ⽂件并转换为 DOM 树当我们打开⼀个⽹⻚时,浏览器都会去请求对应的 HTML ⽂件.虽然平时我们写代码时都会分为 JS ...
浏览器渲染机制面试_前端面试大全：浏览器渲染原理-文件无法渲染
在这一篇文章中,我们将一起学习浏览器渲染原理这部分的知识.你可能会有疑问,我又不是做浏览器研发的,为什么要来学习这个?其实我们学习浏览器渲染原理更多的是为了解决性能的问题,如果你不了解这部分的知识,你 ...
android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...

浏览器渲染机制的原理和过程