浏览器向服务器发起请求
- 浏览器从 DNS 服务器得到域名对应的 IP 地址
- 浏览器向这个 IP 地址对应的服务器发送请求
- 服务器接收、处理请求并返回内容(响应)
- 浏览器下载响应内容
浏览器渲染过程
- 根据 HTML 构建 HTML 树(DOM)
- 根据 CSS 构建 CSS 树(CSSOM)
- 将 DOM 和 CSSOM 合并成一个“渲染树”(Render Tree)
- 根据 Render Tree 来布局(Layout),计算文档流、盒模型、大小和位置等
- 将各个节点绘制(Paint)到屏幕上;(文本、颜色、图像、边框和阴影等)
- 根据层叠关系合成(Composite)展示画面
浏览网页看起来可能很简单,但实际上浏览器需要完成相当多的工作。如果 DOM 或 CSSOM 被修改,浏览器只能再执行一遍以上所有步骤,以确定哪些像素需要在屏幕上进行重新渲染。
使用浏览器开发者工具查看浏览器绘制状态
- 点击开发者工具任意Tag
- 按 ESC 弹出另一工具栏
- 左边菜单栏添加
Rendring
- 勾选
Paint Flashing
如何更新样式
一般采用JS更新,例如:
div.style.background ='red'
div.style.display ='none'
div.classList.add ('red')
div.remove()
等等
复制代码
浏览器在实现视觉变化时,通常有三种方式:
【1】全走
JS / CSS > 样式 > 布局 > 绘制 > 合成
例:div.remove()
会触发当前元素消失,布局发生改变,其他所有元素重新布局(Layout),任何受影响的部分都需要重新绘制,而且最终绘制的元素需进行合成。
【2】跳过Layout
JS / CSS > 样式 > 绘制 > 合成
例:修改背景颜色、文字颜色或阴影等,不会影响页面的布局,浏览器会跳过布局(Layout),直接绘制(Paint)+合成(Composite)。
【3】跳过Layout和Paint
JS / CSS > 样式 > 合成
例:改变transform等,浏览器直接跳到合成(Composite)。
以上三种方式,第三种所消耗的性能最少。
想要知道CSS什么属性触发了什么流程,可以到 CSS Triggers
查询