前端学习——DOM树,渲染页面


DOM树是一种数据结构,隶属于“树”。

网络连接过程

参考:《网络是怎样连接的》

  • 向浏览器输入 网址(https://www.baidu.com)
    前端学习——DOM树,渲染页面
  • 浏览器解析URL,解析出Web服务器名+文件路径
    前端学习——DOM树,渲染页面
  • 根据DNS服务器查询WEB服务器的IP地址
  • 根据HTTP协议,客户端(对WEB应用来说常是浏览器)生成HTTP请求消息,和服务器之间进行交互。
    前端学习——DOM树,渲染页面
  • 获得返回信息
    前端学习——DOM树,渲染页面

渲染页面

浏览器渲染页面的过程:视频
当返回信息是一个html页面的时候
前端学习——DOM树,渲染页面
经过三大步骤:
DOM构造布局以及绘制页面,最终展现为人人都能看懂的网页。
前端学习——DOM树,渲染页面

DOM构造

  1. HTML解析器
    通过html解析器解析构建为一颗DOM树。
    前端学习——DOM树,渲染页面
  2. CSS解析器
    接着将接收到的css代码(如果有的话),通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上,得到一颗带有样式属性的DOM树。
    前端学习——DOM树,渲染页面

布局

按照 顺序 ,将树上的节点压入文档流
前端学习——DOM树,渲染页面

绘制页面

前端学习——DOM树,渲染页面