浏览器内核和渲染机制文章目录浏览器内核和渲染机制首先，进程和线程？ 1 .浏览器进程2 .浏览器线程2、页面呈现进程解析html和CSS.构建呈现树3 .布局和绘制3、资源块？ 总结
首先，浏览器内核可以说是整个网页的重要因素。 整个网页的资源分析、脚本执行、界面渲染、事件处理等都需要依赖浏览器的内核来执行。 本文从浏览器的进程和线程开始，进入具体的渲染过程。
一.进程和线程？进程是操作系统分配资源的最小单位，线程是程序执行的最小单位，一个进程内的多个线程可以共享进程内的资源。
这句话比学习计算机的伙伴更熟悉。
进程是计算机分配给程序实例的内存空间，可以理解为所有线程资源相互共享的上下文(环境)。 多线程相当于一个进程有多个执行流，可以同时执行不同的任务，互不干扰，共享同一进程的资源。
1 .浏览器进程许多合作伙伴可能误认为浏览器是单一进程。 事实上，浏览器在背后处理复杂的逻辑，只有一个进程是不够的，还需要多个进程共同工作。 想想看。 如果浏览器只有一个进程，并且选项卡页面在运行过程中突然错误，则整个浏览器将崩溃。 此外，多个选项卡在一个进程中工作并共享一个进程的资源肯定是不安全的。 为此，采用多进程模型。
浏览器主要有以下流程：
浏览器进程：浏览器的主进程。 插件流程：为每种类型的插件创建一个流程。 GPU工艺：最多1个，用于3d绘图等。 每次打开渲染进程(浏览器内核)选项卡时，都会创建一个新的渲染进程。 2 .浏览器线程浏览器是多线程的。 这里主要讨论内核中的线程。
其中常说的内核(Rendering Engine )也称为“渲染引擎”，是网页呈现的最重要的核心。 (原来的内核称为渲染引擎js引擎，但与js引擎一起独立了。 现在说到内核，渲染引擎很普遍。 )确定网页的显示方式和页面的格式信息等。 因此，渲染引擎可以视为由浏览器制造商打包的黑匣子，其中包含负责各种功能的模块。相关资源文件流经黑盒，经过解析、处理、渲染等操作最终输出一个页面
ps:通用主流浏览器内核
1、IE浏览器内核： Trident内核，俗称IE内核
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核。 以前是Webkit内核，现在是Blink内核。
3、Firefox浏览器内核： Gecko内核，俗称Firefox内核
4、Safari浏览器内核： Webkit内核；
5、Opera浏览器内核：首先是自己的Presto内核，然后是Webkit，现在是Blink内核。
渲染引擎与上述渲染过程相对应。
渲染过程主要包括以下五个线程：
1 ) GUI渲染线程
负责浏览器界面渲染、HTML、CSS分析、DOM树和Render树的构建、布局和绘制等。 如果需要重绘接口，或者在某些操作中发生了回流，线程将运行。
注意： GUI渲染线程和JS引擎线程是互斥的，GUI线程在JS引擎运行时挂起，并且GUI更新存储在队列中，以便在JS引擎空闲时立即执行。
2 ) JS引擎线程
也称为JS内核，主要负责解析和执行JS脚本(例如V8引擎)。 JS引擎是单线程的，它执行从流的顶端运行脚本的同步代码。 它还维护了两个异步队列。 当主线程空闲时，它按顺序捕获和执行队列中的代码。
因此，在一个标签(renderer进程)中，只有一个JS线程正在运行。 稍后我们将详细讨论JS单线程。
3 )事件触发线程
属于浏览器而不是JS引擎，用于控制事件的循环。
当某个事件(计时器、点击事件、异步请求)满足触发条件被触发时，该线程将事件对应的回调函数)任务添加到处理队列的末尾，等待JS引擎的处理。
4 )时间触发线程
具有setInterval和setTimeout的线程。
浏览器的计时器计数器不由JavaScript引擎计数，而是必须由另一个线程单独计数。 本来单线程的JS计数的话，就会变成不需要的块。
类似地，随着时间的流逝，它会将相应的回调函数(任务)添加到任务队列，等待JS引擎空闲，然后捕捉运行。
ps:W3C规定，setTimeout将小于4ms的时间间隔设为4ms。 也就是说，0ms也就是4ms。
5 )异步http请求线程
实例化XMLHttpRequest时，浏览器会创建一个新的请求线程。 通过该线程建立链接，启动请求，监听请求的状态，将相应的回调放入任务队列，由JS引擎捕获并执行。
二、类似于HTML/CSS/JS，页面呈现流程浏览器获得了后端返回的资源后，是如何解析这些资源，并渲染生成页面的呢？ 主要步骤如下。
分析HTML构建DOM树，分析CSS构建cssom (也称为cssruletree )，将DOM树和cssom集成到渲染树中
（render tree）布局，计算各个元素的位置等几何信息绘制合并图层1.解析html和css 浏览器拿到html文件后，首先解析html文件构建dom树。html文档中，一切皆为节点，常见的几种节点有：文档节点、元素节点、文本节点、属性节点、注释节点。DOM节点树中节点与HTML文档中的标签内容一一对应。dom树的构建是一个深度遍历的过程，只有当前节点的子节点构建好后，才会去构建当前节点的下一个兄弟节点。此时如果遇到外部css文件（通过link标签引入），图片等其他资源（不包含JS），浏览器会去请求并加载。并且解析css和解析html可以同时进行，它不阻塞html的加载解析，只阻塞dom的渲染（关于各个资源的阻塞后面再细谈）。解析完成后构建为CSSOM树。
DOM和CSSOM的构建流程：
读取html/css文档，将字节转换成字符，确定tokens（标签），再将tokens转化为节点，以节点来构建树。
在第一步解析完拿到dom树和cssom树后，渲染引擎会给dom树的每个节点附加上样式结构体，即cssom中对应的节点。这样一来就形成了带有样式信息的节点树，也就是渲染树。并且这个过程中会丢弃那些不用呈现在页面的节点，譬如meta标签、script标签以及display为none的节点。因此渲染树和dom树不是一一对应的，一些dom节点在合并渲染树的过程中会被过滤掉。
构建渲染树不是说等待dom树和cssom树构建完毕后才能进行，实际上并无先后之分，浏览器对资源的加载、解析、渲染是并行交错的。所以会有一边加载、一边解析、一边渲染的情况。因此只要解析完一部分html和css，它就会着手构建渲染树。
3.布局和绘制布局，又称Layout。渲染引擎根据render-tree的各个节点来计算布局信息，比如各个box的位置和尺寸。然后通过遍历render-tree的各个节点，利用浏览器的UI层进行绘制，将带有样式信息的节点转化为屏幕上的绝对像素，合并各个图层形成最终的页面。
回流和重绘：
回流（reflow），当页面中某个部分的变化影响了布局，需要倒回去重新layout，重新渲染，这个过程就叫回流。渲染引擎在第一次渲染页面的时候一定会发生回流。而在之后通过，页面的交互、css的改变等，譬如点击、输入表单、缩放窗口等，只要引起页面上元素占位面积、边距、定位方式等的变化，都会引起它内部、周围甚至整个页面的重新渲染。
重绘（repain），当改变某个元素的颜色、背景等不影响它周围布局的属性时，页面的一部分要重新绘制。
回流一定会引起重绘，而重绘不一定能够引发回流。
上面讲了渲染引擎输出页面的大体渲染过程。在渲染的过程中资源是会产生阻塞的，如果没有阻塞将会出现一些意想不到的情况，下面我们就来谈谈其中的阻塞。
html的阻塞，html阻塞是一定的，没有最基本的dom节点就渲染不出页面。css阻塞，上面提到过，css解析和html解析是可以并行的，但是对于渲染来说，浏览器是不会在cssom没有构建好时渲染页面的，即使dom解析完，也要等待cssom构建。这样是为了避免丑陋的页面直接展示在用户面前。因此css样式一般放在页面头部是最好的，这样能让它尽快解析，方便更快地将页面呈现给用户。js阻塞，js的解析和执行是由独立的js引擎来执行的。对于dom和cssom的构建来说，js脚本会对他们产生阻塞。**因为js可以操作页面的节点和样式，如果两者能同时进行，势必会造成紊乱。**因此浏览器在构建dom和cssom时遇到js脚本的话，会先停止渲染，将控制权交给js引擎。等到脚本执行完毕，才会继续dom和cssom的构建（需要注意的是，解析器虽然停止构建dom和cssom，但仍会识别后续的资源并进行预加载）。因此，脚本一般放在页面的底部，遵循“先呈现页面给用户”的原则，对于交互可以之后再附加上去。js脚本的不同处理方式：
默认：阻塞资源async：普通的异步模式，异步加载js脚本，但加载完后立即执行defer：延迟执行，异步加载js，加载完成后不执行，等到html和css解析完后才执行对于影响对页面元素和样式较多的脚本，可以利用defer来实现。而对于普通的脚本我们可以使用async或者将脚本放在页面底部。
总结浏览器的渲染是一个十分复杂的过程。从用户输入一个url到最终输出一个页面，中间要经过许多浏览器底层模块的调度和协作。本文只是讲解了只关于渲染的那部分，即浏览器的内核（渲染进程），后续还会继续研究浏览器其他层面的运作。另外有一点需要注意的是，在页面元素较多较复杂时，浏览器一般会先渲染一部分页面，再渐进地加载渲染其他部分直至整个页面呈现完毕。
参考链接：https://www.cnblogs.com/lianchenxi/p/10129620.html
再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载
https://blog.csdn.net/qq_39669807/article/details/89388014