浏览器输入网址到界面呈现发生了什么?

1.DNS解析

看这里

2. HTM解析与呈现

浏览器解析 HTML 并呈现界面的过程可以分为以下 6 个主要步骤

 1️⃣ 解析 HTML,构建 DOM 树(HTML -> DOM)

  • 浏览器从 HTML 文件 开始解析,从上到下读取标签,并构建 DOM 树(Document Object Model)

2️⃣ 解析 CSS,构建 CSSOM(CSS -> CSSOM)

  • 遇到 <link><style> 标签,浏览器会下载并解析 CSS。下载资源不会阻塞html的解析,但是CSS 解析会阻塞渲染(但不会阻塞 HTML 解析),因为样式需要解析完成才能正确渲染页面。
  • 解析后生成 CSSOM(CSS 对象模型),它是 CSS 规则的结构化表示。

3️⃣ 生成渲染树(Render Tree = DOM + CSSOM)

  • Render Tree(渲染树)DOM 和 CSSOM 结合而成,它决定了哪些元素需要显示,以及它们的样式

Render Tree 只包含可见元素

  • 不会包含 display: none 的元素(但 visibility: hidden 仍会存在)。
  • 不会包含 headmeta 等不可见标签

 

4️⃣ 布局(Layout / Reflow,计算大小和位置)

  • 浏览器计算每个元素的确切位置和大小,即 计算每个元素的 widthheightpositionmargin
  • 这个过程叫做 回流(Reflow)布局(Layout)

5️⃣ 绘制(Painting,绘制像素到屏幕)

  • 浏览器将计算好的布局绘制到屏幕上,包括颜色、阴影、边框、文字等。
  • 绘制(Painting)是由光栅化线程进程处理:把渲染树的图层变成 GPU 可用的位图
  • 光栅化线程通常会在 GPU 上运行,加快绘制速度

6️⃣ 组合与合成(Compositing)

  • 现代浏览器会分层绘制(Layering),然后 合成(Compositing)
  • 例如:position: fixedtransformopacity 等会创建新的 图层(Layer)
  • GPU 处理这些图层的合成,提高性能

📌 关键点

  • 某些 CSS 操作不会触发布局和重绘,而只会触发合成(如 transform: translateX(100px))。
  • 动画和过渡效果会尽可能在 GPU 上执行,提高流畅度

三.总结:

现代浏览器是一边解析,一边渲染并不是等 HTML 解析完再开始渲染

具体来说:形成rendertree以后就开始渲染,在渲染过程中遇到影响页面布局位置的元素(例如img没有指定大小)时又回流

四.关联文章

域名发散和收敛

重绘和回流 

http://blog.csdn.net/xiaozhuxmen/article/details/52014901

posted @ 2018-09-24 10:12  我是格鲁特  阅读(96)  评论(0)    收藏  举报