像素是怎样练成的(一)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 像素是怎样练成的(一)

{万物皆有裂痕,那是光照进来的地方|There's a track,a crack in everying .That's how the light gets in.}

大家好,我是柒八九

前言

本来呢,最近在规划一篇关于浏览器的文章,但是在做文章架构梳理和相关资料查询的时候,发现浏览器在渲染页面的过程中,也别有洞天。索性,就单独将其作为一篇文章来写。

这里有几点说明。

  1. 平时开发中用的是Chrome浏览器,所以下面的文章都是以Chrome浏览器为准。
  2. 本文中,ChromiumChrome可以认同是一个东西,不做强制区分,理由下文会讲到。
  3. 该篇文章过于长,可以按照自己喜好,酌情选读文章内容。
  4. 该篇文章主要讲浏览器内部渲染像素(页面)角度分析,而不会涉及到网络处理/JS解析等。有的话也是一带而过,我们后期会专门有一篇文章,带大家串一下流程的。

还有,之前我们写过浏览器相关的知识点,如果想了解该系列文章(浏览器相关),可以参考我们已经发布的文章。如下是往期文章。

  1. 页面是如何生成的(宏观角度)
  2. Chromium 最新渲染引擎--RenderingNG
  3. RenderingNG中关键数据结构及其角色
  4. 浏览器之客户端存储

你能所学到的知识点

  1. 前置知识推荐阅读指数⭐️⭐️⭐️⭐️⭐️
  1. ChromiumChrome的关系
  2. Chromium架构简析
  3. 何为网页内容
  4. 何为{像素|Pixels}
  5. Chrome渲染过程是反复进行的
  1. 页面数据解析推荐阅读指数⭐️⭐️⭐️⭐️⭐️
  1. HTML 解析为 DOM
  2. CSS 解析为 CSSOM
  1. 布局阶段生成 {不可变fragment树|immutable fragment tree}推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
  2. {绘制|Paint}阶段生成{显示列表|Display List}推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
  3. {光栅化|Raster}将部分{显示列表|Display List}转换位{位图|BitMap}推荐阅读指数⭐️⭐️⭐️⭐️⭐️
  1. GPU 进程中进行光栅化
  1. 页面状态发生变化
  1. 动画帧生成图层
  2. 合成分配(Compositing Assignments)发生在绘制之前
  3. 合成生成 property trees
  1. Display(viz)
  1. 双缓存

好了,天不早了,干点正事哇。


前置知识

Chromium 和 Chrome的关系

ChromiumChrome之间存在密切的关系,可以理解为ChromiumChrome的开源项目。

  1. ChromiumChromium是一个开源的Web浏览器项目,由Google主导开发。它是一个完全开放的项目,源代码可以公开获取并进行自由修改。
  • Chromium项目包括浏览器引擎BlinkJavaScript引擎V8等组件。
  • Chromium致力于提供一个可扩展、快速和安全的Web浏览器解决方案,同时也是许多其他基于Chromium的浏览器的基础。
  1. ChromeChrome是由Google基于Chromium项目开发的Web浏览器。
  • 它是Chromium商业版本,针对普通用户提供了更多功能和服务。
  • Chrome具有更多的集成功能,包括自动更新PDF阅读器Google账号同步等。
  • 此外,Chrome还包括一些针对企业用户和开发人员的工具和功能。

可以将Chromium视为Chrome的基础,Chrome在此基础上添加了自己的功能和服务。

想必大家都有Chrome浏览器,我们可以做一个验证,大家在地址栏中输入chrome://settings/help或者按照如下的步骤。

image.png

关于ChormeChromium的关系就映入眼帘。如下图所示。

image.png

关于它们之间的关系,我们就不在赘述。


其它奇怪的知识

其实Chromium也是可以被下载,同时也可以作为搜索引擎的。


市面上,很多浏览器都是基于Chromium浏览器开发的。

Edge 浏览器

image.png

360浏览器

image.png


Chromium架构简析

Chromium被分成两个主要部分(不包括其他库):{浏览器|Browser}{渲染器|Renderer}(包括Blink,网络引擎)。

  • {浏览器|Browser}主进程,代表所有的用户界面I/O
  • 负责运行用户界面并管理{渲染器|Renderer}和其他进程
  • 也称为"浏览器进程"或简称为{浏览器|Browser}
  • {渲染器|Renderer}是由{浏览器进程|Browser Process}驱动的子进程
  • 渲染器使用Blink开源布局引擎来解释和布局HTML

它们的关系如下

image.png


从源码架构角度来看Chromium

image.png

每个框代表一个应用层。任何一个低层级都不依赖于更高层级的内容。

我们按照从底层到顶层的顺序,来简单介绍下,每个层级的作用。

  1. WebKit:在SafariChromium和其他基于WebKit的浏览器的渲染引擎。
  • 端口(Port)是WebKit的一部分,它与平台相关的系统服务(如资源加载和图形生成)进行集成。
  1. Glue:将WebKit的数据类型转换为Chromium的数据类型的组件。
  • 这是"WebKit嵌入层"
  • 它是Chromium的基础。
  1. Renderer/Render host:这是Chromium"多进程嵌入层"
  • 它在进程上进行代理通知命令发送
  1. WebContents:是Content模块的组件。
  • 它可以轻松地嵌入到视图中,实现HTML的多进程渲染
  1. {浏览器|Browser}:代表浏览器窗口
  • 它包含多个WebContents
  1. Tab Helpers:附加到WebContents上的单独对象
  • 浏览器将各种助手对象附加到它所持有的WebContents上(如网站图标、信息栏等)。

将上面的比较生硬的词汇替换一下,然后就可以画出下面的关于Chromium架构图。

image.png

这块的架构图,有些生硬,后期也会有专门的文章来进行讲解。


通过上文介绍,我们得到一个结论 :Chromiumchrome。 所以,下文中可以将Chromiumchrome看成一个东西。

下图是chromecontent生成页面信息的示意图。

image.png


何为网页内容

image.png

Chromium C++代码库中,在架构层面上content负责红色框中的所有内容。(可以看上面的架构图)

Tabs地址栏导航按钮菜单等不在content的范围内。

Chrome安全模型的关键是渲染发生在沙盒化的进程中

  • Blink{渲染器|Renderer}进程中的代码子集,在content命名空间内。
  • Blink实现了Web平台API和Web规范的语义。

{渲染器|Renderer}进程还运行一个称为{合成器|compositor}"cc")的组件。

对应的关系如下:(从进程和线程的关系角度看)


image.png

页面内容分类

contentChromium 中用于表示网页内部或 Web 应用程序前端的所有代码的通用术语。

也就是在上面架构图中的content

常见的类型包括文本图像HTML元素(包围文本的标记语言)、CSS(定义HTML元素的表现方式)和JavaScript(可以动态修改上述所有内容)。

image.png

除了上述列举的常见的内容类型,像<video>, <canvas>, WebAssembly, WebGL, WebVR, PDF也属于Content的范畴。

如果对WebAssembly不了解,可以翻看之前写的 -浏览器第四种语言-WebAssembly

还有关于WebGL也打算写相关系列的文章,敬请期待.....


我们通过一个真实的案例来看一下。下图是最近很🔥的ChatGPT的地址。左侧是真实的页面显示,右侧是该页面中包含的内容信息

image.png

可以看到一个真实的网页是由数千行HTML、CSS和JavaScript代码的纯文本形式的所组成

网页的源代码是{渲染器|Renderer}的输入

何为{像素|Pixels}

{像素|Pixels}图像的最小单位,它是构成数字图像的基本元素

"像素"一词源自于"picture element"的缩写。每个像素代表了图像中的一个点,它具有特定的位置和颜色信息

在计算机图形中,{像素|Pixels}通常被表示为一个二维矩阵或数组,它们排列在网格中,形成图像的整体。每个像素可以存储图像的亮度颜色透明度等信息。对于彩色图像,通常使用RGB(红、绿、蓝)模型来表示每个像素的颜色,其中每个分量的取值范围通常是0到255之间。

{像素|Pixels}密度决定了图像的清晰度和细节水平。更高的像素密度意味着在给定的显示区域内有更多的像素,从而能够呈现更多的细节。常见的像素密度单位是每英寸像素数,称为PPI(Pixels Per Inch)

在计算机图形处理中,我们可以通过操作和改变像素的颜色、位置和透明度来实现图像的绘制、编辑和处理。像素在计算机图形、摄影、显示技术和计算机视觉等领域起着至关重要的作用,它们是数字图像的基本组成部分


CSS表示像素颜色的方式

表示方式 示例 描述
十六进制表示法 #FF0000 使用六位十六进制数表示颜色,
每两位表示红、绿、蓝三个通道的亮度值,
取值范围是00到FF
RGB表示法 rgb(255, 0, 0) 使用RGB值表示颜色
RGBA表示法 rgba(255, 0, 0, 0.5) 使用RGB值Alpha通道表示颜色
Alpha通道的取值范围是0.0到1.0
0.0表示完全透明,1.0表示完全不透明
HSL表示法 hsl(0, 100%, 50%) 使用色相(Hue)、饱和度(Saturation)和亮度(Lightness)来表示颜色。
色相的取值范围是0到360
饱和度和亮度的取值范围是0%到100%
HSLA表示法 hsla(0, 100%, 50%, 0.5) HSL表示法类似,增加了一个Alpha通道来表示透明度,
取值范围也是0.0到1.0
相关文章
Threejs实现模拟河流,水面水流,水管水流,海面
Threejs实现模拟河流,水面水流,水管水流,海面
2357 0
Threejs实现模拟河流,水面水流,水管水流,海面
|
Serverless C语言 C++
【数学建模】利用C语言来实现 太阳赤纬 太阳高度角 太阳方位角 计算和求解分析 树木树冠阴影面积与种植间距的编程计算分析研究
【数学建模】利用C语言来实现 太阳赤纬 太阳高度角 太阳方位角 计算和求解分析 树木树冠阴影面积与种植间距的编程计算分析研究
249 1
|
2月前
Threejs用切线实现模型沿着轨道行驶
这篇文章详细介绍了如何使用Three.js让一个模型沿着预定的曲线路径移动,并保持模型的方向始终沿着路径的切线方向,提供了实现这一效果的具体代码和步骤。
73 1
Threejs用切线实现模型沿着轨道行驶
|
3月前
|
Shell
球从100米高度自由落下
这段代码计算了一个球从100米高度自由落下并在每次触地后反弹至原高度一半的过程,直至第10次落地时总共经过的距离以及第10次反弹的高度。使用循环结构累加每次落下与反弹的距离,并更新反弹高度。最终输出总距离和第10次反弹的高度。
48 5
|
4月前
|
存储 算法 开发者
黑神话:悟空中的动态光照与阴影效果
【8月更文第26天】在《黑神话:悟空》这款游戏中,高质量的光照和阴影效果对于营造出逼真的游戏环境至关重要。为了达到这种效果,游戏开发团队采用了先进的实时渲染技术,包括动态光照和阴影技术。本文将详细介绍这些技术如何被用来增强场景的真实感。
136 3
|
12月前
|
存储 Web App开发 缓存
像素是怎样练成的(四)
像素是怎样练成的(四)
106 0
|
12月前
|
Web App开发 XML JavaScript
像素是怎样练成的(二)
像素是怎样练成的(二)
|
12月前
|
缓存 JavaScript 前端开发
像素是怎样练成的(三)
像素是怎样练成的(三)
|
机器学习/深度学习 人工智能 算法
将有色液体图像转换成透明液体,CMU教机器人准确掌控向杯中倒多少水
将有色液体图像转换成透明液体,CMU教机器人准确掌控向杯中倒多少水
112 0
|
机器学习/深度学习 编解码 自然语言处理
谷歌像素递归超分辨率研究:怎么消灭低分辨率图像马赛克
最近,谷歌发布了一种把低分辨率图像复原为高分辨率图像的方法,参见机器之心文章《学界 | 谷歌新论文提出像素递归超分辨率:利用神经网络消灭低分辨率图像马赛克》。与最先进的方法相比,这篇论文提出了一种端到端的框架来完成超分辨率任务。它由两个卷积神经网络组成,一个是描述低分辨率图像骨架的优先网络(prior network),一个是用于优化细节特征的调节网络(conditioning network)。这种方法强调了细节特征恢复上的提升,并以概率范式(probabilistic paradigm)的形式提升了其理论。机器之心在本文中对相关研究《Pixel Recursive Super Resolu
431 0
谷歌像素递归超分辨率研究:怎么消灭低分辨率图像马赛克