浏览器渲染中的相关概念

渲染

渲染流水线

构建 DOM 树

输入：HTML 文档；
处理：HTML 解析器解析；
输出：DOM 数据解构。

样式计算

输入：CSS 文本；
处理：属性值标准化，每个节点具体样式（继承、层叠）；
输出：styleSheets(CSSOM)。

布局(DOM 树中元素的计划位置)

DOM & CSSOM 合并成渲染树；
布局树（DOM 树中的可见元素）；
布局计算。

分层

特定节点生成专用图层，生成一棵图层树（层叠上下文、Clip，类似 PhotoShop 里的图层）；
拥有层叠上下文属性（明确定位属性、透明属性、CSS 滤镜、z-index 等）的元素会创建单独图层；
没有图层的 DOM 节点属于父节点图层；
需要剪裁的地方也会创建图层。

绘制指令

输入：图层树；
渲染引擎对图层树中每个图层进行绘制；
拆分成绘制指令，生成绘制列表，提交到合成线程；
输出：绘制列表。

分块

合成线程会将较大、较长的图层（一屏显示不完，大部分不在视口内）划分为图块（tile, 256256, 512512）。

光栅化（栅格化）

在光栅化线程池中，将视口附近的图块优先生成位图（栅格化执行该操作）；
快速栅格化：GPU 加速，生成位图（GPU 进程）。

合成绘制

绘制图块命令——DrawQuad，提交给浏览器进程；
浏览器进程的 viz 组件，根据DrawQuad命令，绘制在屏幕上。

浏览器渲染中的相关概念相关推荐

如何从8 道面试题中，看出浏览器渲染过程与性能优化
前言移动互联网时代,用户对于网页的打开速度要求越来越高.百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图所示. 根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在 ...
浏览器渲染类型2d 3d_Google在浏览器中提供3D渲染
浏览器渲染类型2d 3d Google has released a new experimental browser plugin that makes it possible to display ...
从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理
本文作者:雨过天晴 https://zhuanlan.zhihu.com/p/540761999 前几天一个同事让我帮忙解决一个 bug,这个 bug 困扰他好几天了.这是一个 App 中的 Hybr ...
【总结】1519- 从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理
本文作者:雨过天晴 https://zhuanlan.zhihu.com/p/540761999 前几天一个同事让我帮忙解决一个 bug,这个 bug 困扰他好几天了.这是一个 App 中的 Hybr ...
html怎么在序列表中加竖线,Chorme浏览器渲染MathJax时出现竖线的解决方法
Chorme浏览器渲染MathJax时出现竖线的原因分析与解决方法查资料知,Chorme中显示MathJax时出现竖线的原因如下: 新版的Chorme浏览器在解析css时,会对其中的值进行向上取整( ...
前端浏览器渲染原理及优化
文章目录一.浏览器组成 1. 对浏览器内核的理解 2. 浏览器的主要组成部分二.浏览器渲染原理 1.浏览器的渲染过程步骤一: 步骤二: 步骤三: 步骤四: 步骤五: 2.相关概念 ①重排(更新元 ...
单文件浏览器_图文并茂深度解析浏览器渲染原理，包看懂超值得收藏
在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面显示,浏览器到底发生了什么?这个问题看起来是老生常谈,但是这个问题回答的好坏,确实可以很好的反映出面试者知识的广 ...
android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
从敲入 URL 到浏览器渲染完成、对HTTP协议的理解
1. 大致过程当你这样子回答的时候: 用户输入 url 地址,浏览器查询 DNS 查找对应的请求 IP 地址建立 TCP 连接浏览器向服务器发送 http 请求,如果服务器段返回以 301 之类 ...

浏览器渲染中的相关概念

浏览器渲染中的相关概念相关推荐

最新文章

热门文章