浏览器的渲染机制#

浏览器输入url，按回车后的过程#

浏览器渲染过程#

浏览器的渲染依靠浏览器的渲染引擎和浏览器依赖的模块的共同协作，才能把一个网页生成出来 浏览器的渲染引擎主要包括：HTML解释器、CSS解释器、布局和JavaScript引擎等 浏览器依赖的模块主要包括：网络，存储，2D/3D 图形，音频和视频，图片解码器等

大致的渲染过程及依赖模块关系图:

简单说下过程： 浏览器通过网络和存储模块拿到HTML文件 --> 然后通过HTML解析器解析html文件，如果遇到外联css和js文件时就去加载文件--> 然后HTML解析器和css解释器同时进行工作，生成相对应的DOM树和浏览器可以解析的CSS树并进行样式计算（stylesheets，如：em->px, 颜色->rgb()等） --> 最后合并生成渲染树，绘制到显示器上

构建DOM树前后：

构建CSS树前后：

最后生成的渲染树：

渲染树生成时，因为页面中会有一些复杂的效果，比如脱离文档流，3D动画，包括设置z-index等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树，就像ps中图层的概念一样，页面并不是一个平面而是一个3D的立体结构，这个可以在浏览器调试中看到

性能问题#

现在在前端的react和vue两大框架中，都采用了virtualDom，目的是为了尽可能的减少dom操作，dom操作是昂贵的，很浪费性能的（vue的作者曾经说过：virtualDom的出现最主要的是解决了多端公用一套代码）因为操作dom必然会引起重绘或者重排，重排必定会引起重绘。所以开发者在开发的时候要避免直接操作DOM，现在大多数浏览器都会通过对重排进行优化提高性能