随笔：Blink和V8，android

把大古熬成汤
323 阅读5分钟

Blink作为Css+Html+Js的渲染引擎，通过以下步骤实现渲染：

  • 解析：解析是将网页的源代码（通常是 HTML、CSS 和 JavaScript）转换为浏览器可以理解和处理的内部结构的过程。

    • HTML 解析:

      • 当浏览器接收到 HTML 文档时，它会开始解析这个文档。解析过程将 HTML 文档转换为一个称为“文档对象模型”（DOM）的树形结构。
      • DOM 是一个表示网页结构的对象，包含了网页中的所有元素（如 <div>、<p>、<img> 等）及其属性和内容。

    • CSS 解析:

      • 同时，浏览器也会解析 CSS 文件，将其转换为一个称为“样式对象模型”（CSSOM）的结构。
      • CSSOM 描述了如何将样式应用于 DOM 中的元素，包括颜色、字体、布局等。

    • JavaScript 解析:

      • 如果网页中包含 JavaScript 代码，浏览器会使用 JavaScript 引擎（如 V8）解析和执行这些代码。JavaScript 可以操作 DOM 和 CSSOM，从而动态改变网页的内容和样式。

  • 渲染：渲染是将解析后的 DOM 和 CSSOM 转换为用户可以看到的视觉内容的过程。

    • 构建渲染树:

      • 在渲染过程中，浏览器会根据 DOM 和 CSSOM 构建一个称为“渲染树”的结构。渲染树只包含可见的元素（即那些在屏幕上显示的元素），并包含它们的样式信息。

    • 布局（Layout） :

      • 一旦渲染树构建完成，浏览器会进行布局计算，确定每个元素在屏幕上的位置和大小。这一过程也称为“重排”（Reflow）。

    • 绘制（Painting） :

      • 在布局完成后，浏览器会将渲染树中的元素绘制到屏幕上。这一过程涉及将每个元素的视觉信息（如颜色、边框、阴影等）转换为像素，并将其显示在屏幕上。

    • 合成（Compositing） :

      • 在某些情况下，浏览器会将页面分成多个层（例如，使用 CSS 的 position: fixed 或 z-index 属性的元素）。这些层会被单独绘制，然后合成到一起，形成最终的视觉效果。

V8是作为Js的“JVM”，可以这样理解，用于将Js代码解释给操作系统运行

Js是解释型语言

对于android将视图显示到屏幕上：

在 Android 中，视图（View）是用户界面的基本构建块。视图的显示过程涉及多个步骤，从创建视图到最终在屏幕上渲染。以下是 Android 视图显示的主要步骤：

1. 创建视图

在 Android 中，视图可以通过 XML 布局文件或 Java/Kotlin 代码创建。通常，开发者会在 XML 文件中定义布局，然后在 Activity 或 Fragment 中加载这些布局。

XML 布局示例

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

2. 加载布局

在 Activity 或 Fragment 中，使用 setContentView() 方法加载 XML 布局文件。此时，Android 系统会解析 XML 文件并创建相应的视图对象。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); // 加载布局
}

3. 视图的测量（Measure）

在视图树构建完成后，Android 会进行测量过程。每个视图都会被测量以确定其宽度和高度。这个过程分为两个阶段：

  • 测量阶段: 每个视图会调用 measure() 方法，传入父视图提供的宽高限制。视图根据这些限制计算出自己的大小。
  • 测量结果: 测量结果会存储在 View.MeasureSpec 对象中，包含了视图的大小和模式（如 AT_MOST、EXACTLY、UNSPECIFIED）。

4. 布局（Layout）

测量完成后，Android 会进行布局过程。每个视图会被放置在其父视图中，确定其位置。这个过程也分为两个阶段：

  • 布局阶段: 每个视图会调用 layout() 方法，传入其在父视图中的位置（左、上、右、下）。视图根据这些参数确定自己的位置。
  • 布局结果: 布局结果会影响视图的显示位置。

5. 绘制（Draw）

布局完成后，Android 会进行绘制过程。每个视图会被绘制到屏幕上。这个过程包括：

  • 绘制阶段: 每个视图会调用 draw() 方法，负责将其内容绘制到画布（Canvas）上。视图可以使用 Canvas 对象绘制文本、图像、形状等。
  • 绘制顺序: 绘制是从根视图开始，逐层向下绘制子视图。

6. 事件处理

视图绘制完成后，Android 会开始处理用户输入事件（如触摸、点击等）。每个视图可以注册事件监听器（如 OnClickListener），以响应用户的操作。

Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 处理按钮点击事件
    }
});

7. 更新视图

在应用运行过程中，视图可能会因为数据变化而需要更新。可以通过调用 invalidate() 方法请求重新绘制视图，或者通过 requestLayout() 方法请求重新测量和布局。

总结

Android 视图的显示过程包括创建视图、加载布局、测量、布局、绘制和事件处理等多个步骤。每个步骤都是 Android UI 系统中不可或缺的一部分，确保用户界面能够正确地显示和响应用户的操作。理解这些步骤有助于开发者更好地设计和优化 Android 应用的用户界面。

avatar
文章
阅读
粉丝