是如何影响DOM树构建的？什么是HTML树？

DOM 树：它如何影响 DOM 树的构建？

什么是 DOM

从网络传递到渲染引擎的 HTML 文件字节流不能被渲染引擎直接理解，所以必须转换成渲染引擎可以理解的内部结构 DOM。DOM 提供了 HTML 文档的结构化表示。在渲染引擎中，DOM 在三个层次上起作用。

简而言之，DOM 是表示 HTML 的内部数据结构，将网页连接到脚本，并过滤掉不安全的内容。

DOM 树是如何生成的

渲染引擎内部的 HTML () 模块将 HTML 字节流转换为 DOM 结构。

HTML 解析器在解析之前不会等待整个文档被加载，而是与网络进程加载一样多的数据，HTML 解析器解析尽可能多的数据。

具体流程

它如何影响 DOM 生成

补充笔记

渲染引擎还有一个名为的安全检查模块，用于检测词法安全。解析Token后，会检查这些模块是否安全，比如是否引用了外部脚本，是否符合CSP规范，是否有跨站请求等。如果有任何不合规的内容，脚本或下载任务将被拦截。

渲染管道：CSS 如何影响首次加载时的白屏时间

影响页面显示的因素及优化策略

渲染管线影响首页显示速度，而首页显示速度直接影响用户体验。

从发起一个 URL 请求到第一次显示页面内容，在视觉上经历了三个阶段：

第二阶段的主要问题是白屏时间。如果白屏时间过长，会影响用户体验。为了缩短白屏时间，我们来一一分析这个阶段的主要任务，包括解析HTML、下载CSS、下载、生成CSSOM、执行、生成布局树、绘制页面等一系列操作。

通常瓶颈主要在下载CSS文件，下载文件和执行。

所以如果想缩短白屏时间，可以有以下策略：

通过以上策略，可以缩短白屏显示的持续时间。但是，在实际项目中，总是有各种各样的情况。这些策略不能随意引用，需要根据实际情况调整最佳方案。

分层和合成机制：为什么 CSS 动画比

显示器如何显示图像

帧与帧率

如何生成一帧图像

生成任何帧有三种方法：重新排列、重绘和合成。

这三种方法的渲染路径是不同的。通常，渲染路径越长，生成图像所需的时间就越多。比如重排，它需要根据 CSSOM 和 DOM 重新计算布局树，这样当生成一张图片时，整个渲染管线的每个阶段都会执行一次。如果布局复杂，渲染效率难以保证。重绘效率稍高一些，因为没有重新布局阶段，但是在绘制操作之后仍然需要重新计算绘制信息并触发一系列操作。与重新排列和重绘相比，合成操作的路径很短，不需要触发布局和绘图两个阶段。如果使用GPU，合成效率会非常高。

如何实现组合操作

三字总结：分层、分块、综合

分层和合成

为什么要引入分层和合成

通常页面的组成很复杂，有些页面需要实现一些复杂的动画效果，比如点击菜单时弹出菜单的动画效果，鼠标滚轮时页面滚动的动画效果滚动，当然还有一些很酷的 3D 动画。特殊效果。如果不使用分层机制，直接从布局树生成目标图，那么每次页面有微小的变化，就会触发重新排序或重绘机制。严重影响页面的渲染效率。

在这个过程中，将材料分解成多层的操作称为分层，最终将这些层合并在一起的操作称为合成。因此，分层和合成经常一起使用。

如何实现分层和构图

堵塞

如果说分层在宏观层面提高了渲染效率，那么分块在微观层面提高了渲染效率。

通常，页面的内容比屏幕大得多。在显示页面时，如果等待所有图层生成后再合成，会产生一些不必要的开销，而且合成图像也需要时间。变长。

因此，合成线程会将每一层分成固定大小的瓦片，然后优先绘制靠近视口的瓦片，这样可以大大加快页面的显示速度。但是，有时，即使只绘制那些优先级最高的瓦片也会花费很多时间，因为其中涉及到一个非常关键的因素——纹理上传，因为从计算机内存上传到 GPU 内存的操作会比较慢。

为了解决这个问题，采用了另一种策略：第一次合成瓦片时使用低分辨率的图像。例如，可以是正常分辨率的一半，如果分辨率降低一半，则纹理会降低四分之三。第一次显示页面内容时，显示的是低分辨率图像，然后合成器继续绘制正常比例的网页内容。当绘制正常比例的网页内容时，它会替换当前显示的低分辨率内容。这比什么都看不到要好，即使用户最初会看到低分辨率的内容。

如何使用分层技术优化代码

在编写 Web 应用程序时，您可能经常需要对元素执行几何形状变换、透明度变换或一些缩放操作。如果用这些效果来写这些效果，会涉及到整个渲染管线，所以渲染效率会很低。

此时，您可以使用 will- 告诉渲染引擎您将对元素进行一些特殊的转换。CSS代码如下：

.box {will-change: transform, opacity;}

这段代码是提前告诉渲染引擎盒子元素会进行几何变换和透明度变换。这时候渲染引擎会单独实现元素的一帧。当这些变换发生时，渲染引擎会直接通过合成线程处理变换。变换不涉及主线程，大大提高了渲染效率。这就是为什么 CSS 动画比动画更有效的原因。

所以，如果遇到一些可以使用合成线程来处理 CSS 效果或动画的情况，尽量使用 will- 提前告诉渲染引擎为元素准备一个单独的图层。但一切都有两个方面。每当渲染引擎为一个元素准备一个独立的层时，它所占用的内存也会大大增加，因为从层树开始，后续的每个阶段都会有一个额外的层结构，这需要额外的内存，所以需要使用 will-适当地。

页面性能：如何系统地优化您的页面

所谓页面优化，其实就是让页面显示和响应更快。

通常一个页面有三个阶段**：加载阶段、交互阶段和关闭阶段**。

加载阶段

图片、音频、视频等文件不会阻塞页面的首次渲染；但是第一次请求的HTML资源文件和CSS文件会阻塞第一次渲染，因为在构建DOM的过程中需要HTML和文件，并且构建了渲染树。在此过程中需要 CSS 文件。

这些可以阻止网页首次渲染的资源称为关键资源。根据关键资源，可以提炼出影响页面首次渲染的三个核心因素。

一般的优化原则是减少关键资源的数量，减少关键资源的大小，减少关键资源的RTT数量

互动阶段

讲交互阶段的优化，其实就是讲渲染进程渲染帧的速度，因为在交互阶段，帧的渲染速度决定了交互的流畅度。

交互阶段通常由交互动画触发。

优化方法

虚拟DOM

DOM 错误

不断修改DOM树，每次操作DOM渲染引擎，都需要进行重新排序、重绘或合成等操作。因为DOM结构复杂，生成的页面结构也会复杂。排序或重绘操作非常耗时，这给我们带来了真正的性能问题。

所以我们需要一种方法来减少对DOM的操作，然后虚拟DOM就派上用场了。

虚拟DOM

虚拟 DOM 的作用：将页面的更改应用到虚拟 DOM，而不是直接应用到 DOM。当对虚拟 DOM 应用更改时，虚拟 DOM 并不急于渲染页面，而只是调整虚拟 DOM 的内部状态，从而使虚拟 DOM 的运行成本变得非常轻。在虚拟 DOM 收集到足够的更改后，这些更改会立即应用于真实 DOM。

虚拟DOM运行过程：

从双缓存和MVC模型的角度谈虚拟DOM

1. 双缓存

在游戏开发或其他图形处理过程中完全手册javascript动态网页开发详解，屏幕从前端缓冲区中读取数据并显示出来。然而完全手册javascript动态网页开发详解，许多图形操作很复杂，需要大量的操作。例如，一张完整的图片可能需要多次计算才能完成。如果每次都计算一部分图像，将其写入缓冲区，这会造成后果。，也就是在显示稍微复杂一点的图片的过程中，你看到的页面效果可能会显示一部分，所以用户在刷新页面时会感觉到界面的闪烁。

使用双缓冲可以让你将计算的中间结果存储在另一个缓冲区中，并且在所有计算结束后，缓冲区已经存储了完整的图形，然后一次性复制缓冲区中的图形数据。到显示缓冲区，这使得整个图像的输出非常稳定。

在这里，您可以将虚拟 DOM 视为 DOM 之一。和图形显示一样，在完成一个完整的操作后，将结果应用到 DOM 中，这样可以减少一些不必要的更新，也可以保证 DOM 的稳定输出。

2. MVC 模式

MVC 是一种非常重要且应用广泛的模式，因为它可以将数据和视图分离，当涉及到一些复杂的项目时，可以大大降低项目的耦合度，使程序更易于维护。

MVC 的整体结构比较简单，由模型、视图和控制器组成。它的核心思想是将数据和视图分离，这意味着视图和模型之间不允许直接通信。它们之间的通信由设备控制来完成。通常，通信路径是视图发生了变化，然后通知控制器，控制器根据情况判断是否需要更新模型数据。当然，根据不同的通信路径和控制器的不同实现方式，基于MVC还可以衍生出很多其他的模式，比如MVP、MVVM等，但基本骨架都是基于MVC的。.

在分析基于 React 或 Vue 的前端框架时，我们需要先重点把握大型 MVC 骨架结构，然后重点关注通信方法和控制器的具体实现，这样才能从一个角度理解这些前端框架。建筑视角。. 比如在分析React项目的时候，我们可以把React部分看成MVC中的一个视图，在项目中结合Redux可以构建一个MVC模型结构，如下图所示：

在这个图中，我们可以将虚拟 DOM 视为 MVC 的视图部分，其控制器和模型由 Redux 提供。具体实施过程如下：

渐进式 Web 应用程序 (PWA)：它为 Web 应用程序解决了哪些问题？

浏览器的三种进化路线：一是Web应用；二是网络应用移动性；三是网络操作系统；

PWA，全称Web App，是渐进式的Web应用程序。

进步

PWA的定义：通过技术手段，逐步增强Web的优势，逐步缩短与原生应用或小程序的距离的一组概念

Web 应用与原生应用

针对以上 Web 缺陷，PWA 提出了两种解决方案：尝试通过引入来解决离线存储和消息推送的问题，以及通过引入 .json 来解决一级入口的问题。

解决了离线存储和消息推送的问题。

主要思想是在页面和网络之间添加一个拦截器来缓存和拦截请求。

在安装之前，直接通过网络模块请求资源。模块安装完成后，在请求资源的时候会先通过，这样就可以判断是返回缓存的资源还是重新向网络请求资源。所有的控制权都交给处理。

设计理念：

1. 架构

“让它脱离主线程”是 Web 的核心思想。

2. 新闻推送

3. 安全

文章来源:https://baijiahao.baidu.com/s?id=1722163844133026068&wfr=spider&for=pc

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。