浏览器渲染网页过程

问题导向清单

No.1 解析 HTML 文档,生成 DOM 树

浏览器通过网络接收到页面的 HTML 文档数据后,将通过解析器对 HTML 文档进行解析处理。

解析过程的第一步是将 HTML 文档分解并表示为 开始标记、结束标记 及其 内容标记,进而构造 DOM nodes。

DOM(文档对象模型) 是 HTML 和 XML 文档的编程接口。DOM 提供了对文档的结构化表述,并定义了一种可以从程序中对该结构进行访问的方式,从而改变文档结构、样式和内容。DOM 将文档解析为一个由节点(node)和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将 Web 页面和脚本或程序语言连接起来。

RAW HTML:

					
<!DOCTYPE html>
<html>
  <head>
    <title><MyWeb/title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/default.css">
  </head>
  <body>
    <div>
      <p>Hello World!</p>
    </div>
  </body>
</html>
					
				

Tags:

DOM nodes: