习题

浏览器渲染原理

Nash

• 10 min read

浏览器渲染页面的过程可以分为多个步骤，主要包括以下几个阶段：

解析 URL 并发起请求：
当用户输入 URL 或点击链接时，浏览器通过 DNS 查询域名，找到目标服务器的 IP 地址，建立 TCP 连接（通过三次握手），然后发送 HTTP 请求，获取服务器返回的 HTML 文件。

HTML 解析和 DOM 树构建：
浏览器解析返回的 HTML 文件，将 HTML 元素转化为 DOM（Document Object Model）树。DOM 是一个 JavaScript 对象模型，代表了 HTML 页面结构。DOM 树是一个按文档结构排列的节点树。

CSS 解析并生成 CSSOM 树：
同时，浏览器会解析所有 CSS 文件（包括内联样式和外部样式），生成 CSSOM（CSS Object Model）树。CSSOM 树包含了页面上所有元素的样式信息，和 DOM 树一起构成页面的渲染树。

渲染树的构建：
浏览器通过将 DOM 树与 CSSOM 树结合，生成渲染树。渲染树中的节点不仅包含 DOM 树中的元素，还包含了样式信息。渲染树的节点不包括那些不可见的元素（例如：display: none 的元素）。

布局（Reflow）：
渲染树完成后，浏览器会根据各个元素的大小、位置等信息进行布局计算，确定每个元素的精确位置和尺寸。这一过程称为布局（也叫回流）。浏览器通过计算每个元素的位置和大小，生成一张页面的布局图。

绘制（Paint）：
完成布局后，浏览器根据渲染树的信息，将页面的每个元素绘制成位图，进行像素渲染。这一阶段将页面的所有可见内容绘制到屏幕上。

合成层并显示：
对于复杂的页面（如包含动画或有硬件加速效果的元素），浏览器会将页面分成多个层，分别进行合成处理。最终这些层会被合成并显示到屏幕上。

如何优化页面的首次渲染和加载速度？

减少 HTTP 请求：
减少页面资源（如图片、CSS、JavaScript）的数量，通过合并文件、使用雪碧图等方式减少 HTTP 请求次数。HTTP/2 可以利用多路复用技术来减少请求延迟。

资源压缩与缓存：
压缩 JS、CSS、HTML 文件（例如使用 Gzip 或 Brotli 压缩），并配置合理的缓存策略，减少资源的重复下载。

异步加载 JavaScript 和 CSS：
使用 async 和 defer 属性加载 JavaScript 脚本，避免阻塞页面的渲染。同时，将非关键 CSS 文件放在 link 标签的 media 属性中，延迟加载不立即需要的样式。

懒加载图片和其他资源：
对于图片、视频等大文件，使用懒加载技术，只在需要时加载资源，避免页面加载时占用过多带宽。

减少阻塞渲染的资源：
尽量避免将 JavaScript 代码放在页面的 <head> 部分，影响浏览器的渲染流程。可以将脚本放在 <body> 底部，或者使用 defer 或 async 关键字，确保脚本不会阻塞渲染。

优先渲染关键内容：
优化渲染流程，使用关键渲染路径（Critical Rendering Path）技术，优先渲染页面中用户最关心的部分，避免所有资源都阻塞渲染。

服务端渲染（SSR）和静态站点生成（SSG）：
使用 SSR 或 SSG 来将页面的 HTML 结构提前渲染好，减轻浏览器的负担，加快首屏渲染时间。

性能监控和分析：
使用 Lighthouse、WebPageTest、Chrome DevTools 等工具，监控和分析页面性能，发现瓶颈并进行优化。

DOM 树、渲染树和布局的区别

DOM 树：
DOM 树是从 HTML 文档中解析出来的节点树，表示文档的结构。每一个 DOM 节点对应一个 HTML 元素，包含该元素的标签名、属性、子元素等信息。DOM 树主要用于 JavaScript 访问和操作页面的结构。

渲染树：
渲染树是在 DOM 树的基础上，结合了 CSSOM 树的样式信息构建出来的树。它表示页面中的可见内容及其样式，不包含像 display: none 的隐藏元素。渲染树提供了元素的尺寸、位置、颜色等信息。

布局（Layout）：
布局（或称为回流）是根据渲染树中的元素进行的计算过程，用于确定每个元素的尺寸和位置。它不涉及样式，只计算元素在页面中的具体坐标和大小。布局过程是渲染过程中的一个关键步骤，影响最终的渲染效果。

页面加载优化

什么是首屏加载？

首屏加载指的是用户进入网站时，浏览器渲染并展示的页面内容。在大多数情况下，首屏包含用户在页面加载后立刻看到的内容。首屏加载的优化对用户体验至关重要，尤其是在移动设备上，加载速度慢会直接影响到网站的留存和转化率。

如何优化首屏渲染时间？

资源优先级管理：
确保首屏内容所需的资源优先加载。可以使用 <link rel="preload"> 或 <link rel="prefetch"> 来预加载首屏所需的 CSS、JavaScript 和字体文件。

压缩与缓存：
压缩 CSS、JS 和 HTML 文件（例如使用 Gzip、Brotli 等），并合理配置缓存策略，减少重复加载，提高加载速度。

减少渲染阻塞资源：
通过 async 和 defer 标签来异步加载 JavaScript 文件，避免这些脚本阻塞 HTML 渲染过程。将关键 CSS 文件放在 <head> 中，尽量避免使用外部或未优化的 CSS 库。

使用服务端渲染（SSR）：
服务端渲染（SSR）将页面的 HTML 在服务器端生成，用户可以快速看到渲染好的页面内容，从而提升首屏渲染速度。SSR 特别适用于动态内容较多的应用。

优化字体加载：
使用 font-display: swap 来避免字体加载时的闪烁，同时将不必要的字体文件延迟加载。

减少页面的初始渲染范围：
只渲染用户可视区域内的内容，尤其是对于长页面。这样可以快速展示首屏内容，并减少渲染时间。

如何利用懒加载、按需加载来减少资源的加载？

懒加载：
懒加载是指延迟加载非首屏内容，例如图片、视频、或外部资源，直到用户滚动到该内容时才进行加载。可以使用 IntersectionObserver API 来判断何时加载图片或其他元素。

按需加载：
按需加载是根据用户行为或需求加载特定资源。通过 JavaScript 动态加载模块，只有在用户访问到需要时，才去请求额外的资源。可以使用 import() 动态导入 JS 文件、<link rel="preload"> 来按需加载关键资源。

JavaScript 分割与懒加载：
利用 Webpack 等工具实现代码分割，将页面拆分为多个模块，仅当用户需要时加载相关模块。这避免了将所有 JavaScript 一次性加载，提升了首屏加载速度。

图片优化

如何优化网页中的图片？

选择合适的图片格式：

  • JPEG：适用于照片等色彩丰富的图片。支持有损压缩，文件较小，适合网络加载。
  • PNG：适合透明背景的图片，但文件相对较大，建议尽量避免使用除非需要透明度。
  • WebP：一种现代图片格式，相比 JPEG 和 PNG，WebP 图片体积更小，质量相当，支持透明度和动画，建议优先选择。
  • SVG：适合图标和矢量图，文件体积小且支持无限缩放，适合网页上的图标、图表等。

压缩图片：

  • 使用工具如 ImageOptim、TinyPNG、Squoosh 来压缩图片，减少文件体积。
  • 对于动画图像，建议使用 APNG 或 WebP 格式进行优化。

响应式图片：

  • 使用 <picture> 标签和 srcset 属性，根据不同的屏幕尺寸和分辨率加载不同的图片尺寸，避免加载过大的图片。
  • 例如，针对手机设备使用更小分辨率的图片，减少加载的图片体积。

图片懒加载：

  • 使用懒加载技术仅加载可视区域内的图片，延迟加载其他图片，减少首屏加载的资源量。可以通过原生的 loading="lazy" 属性，或者 JavaScript 库如 lazysizes 来实现。

代码分割

代码分割的原理

代码分割是将应用的 JavaScript 文件拆分为更小的块，按需加载每个块的技术。通过将代码拆分成多个模块，只有在用户需要时才加载相关的代码，这样可以减少初始加载时的 JavaScript 文件大小，加快页面加载速度。

代码分割的主要原理是：

  • 静态分析：通过静态分析代码，识别出哪些部分是独立的、可以异步加载的，哪些是需要立即执行的。
  • 按需加载：将代码拆分成多个文件，并利用异步加载技术（如 import()）按需加载这些文件。
  • 懒加载和预加载：根据用户行为和页面交互动态加载代码，避免一次性加载所有代码。

如何在项目中实现代码分割？

使用 Webpack 实现代码分割： Webpack 提供了多种代码分割的方式：

  • 入口代码分割：通过配置 Webpack 的 entry 配置项来分割不同的入口点。
  • 按需加载（动态导入）：使用 import() 来按需加载模块。Webpack 会自动将这些动态导入的代码分割成独立的 chunk。
  • 共享库分割：利用 SplitChunksPlugin 来将多个入口文件中重复的依赖分割成共享的 chunk，从而避免多次加载相同的库。
// Webpack 示例：动态导入代码
import(/* webpackChunkName: "module-name" */ './module').then(module => {
  // 使用模块
});

React 和 Vue 等框架中的代码分割：

  • 在 React 中，可以利用 React.lazy 和 Suspense 来实现代码分割：
const MyComponent = React.lazy(() => import('./MyComponent'));

在 Vue 中，可以使用 Vue Router 的懒加载功能来分割代码：

const MyComponent = () => import('./MyComponent.vue');

按路由分割代码： 通过将每个路由的组件分割成独立的代码块，只有在用户访问该路由时才加载对应的代码。例如，React Router 或 Vue Router 都支持懒加载路由组件。

CSS 和其他资源分割： 除了 JavaScript，CSS 和其他资源（如图片、字体）也可以进行分割。例如，使用 Webpack 的 MiniCssExtractPlugin 来提取 CSS 到独立的文件，按需加载。

通过这些方法，代码分割不仅能加快首次加载速度，还能降低后续的网络请求，提高页面的整体性能。

苏ICP备2025153828号