浅谈浏览器的渲染引擎和渲染过程，以及阻塞（css阻塞，js阻塞）

一、浏览器的渲染引擎

主要模块

• 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块

  • HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。
  • CSS解析器：它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施
  • Javascript引擎：使用Javascript代码可以修改网页的内容，也能修改css的信息，javascript引擎能够解释javascript代码，并通过DOM接口和CSS树接口来修改网页内容和样式信息，从而改变渲染的结果。
  • 布局（layout）：在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能表达这所有信息的内部表示模型
  • 绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果

  备注：文档对象模型（Document Object Model，简称DOM）

渲染过程