【面试】当页面加载较慢时，我们应该从哪些角度考虑排查与优化？前端+后端+网络+硬件多角度分析

爱写代码的July

于 2024-08-12 13:16:33 发布

阅读量309

点赞数 14

分类专栏：面试文章标签：面试 java 计算机网络前端后端

本文链接：https://blog.csdn.net/Liu_y_xin/article/details/141128497

版权

面试专栏收录该内容

16 篇文章 0 订阅

订阅专栏

“当页面加载较慢时，我们应该从哪些角度考虑排查与优化？”这是面试中经常被拷打的问题，大多数人可能会回答出数据库调优、清缓存....等操作，但是面试官再深挖就回答不出了，而且也很难组织出一个有条理的答案。本篇文章我们就来系统探讨一下这个问题。

要搞清楚页面为什么加载缓慢，我们要先从页面加载时发生了哪些过程开始。也就是“当用户打开这个网页，这个页面发生了哪些操作？”

一当用户打开这个网页，这个页面发生了哪些操作？

要想搞明白这个问题，我们可以先打开一个网页，查看一下界面从资源的角度都做了哪些操作。

具体而言，我们可以把页面的加载分为以下几步：

1. URL解析与DNS查询

URL解析：用户在浏览器中输入URL后，浏览器会解析这个URL，将其分解为协议（如HTTP、HTTPS）、主机名（域名）、端口号（如80、443）、路径和查询参数等部分。
DNS查询：浏览器将解析得到的主机名（域名）转换为IP地址。这个过程通常通过查询DNS（域名系统）服务器来完成。如果域名已经被解析过并且存在于本地缓存中，浏览器会直接使用缓存的IP地址；否则，会向DNS服务器发送请求以获取IP地址。

2. 建立TCP连接

浏览器通过DNS解析得到的IP地址向服务器发起TCP（传输控制协议）连接请求。TCP连接的建立过程包括三次握手，以确保服务器和浏览器之间建立可靠的连接。

3. 发送HTTP请求

浏览器向服务器发送HTTP（超文本传输协议）请求，请求网页的内容。请求的内容可能包括HTML文件、CSS文件、JavaScript文件、图片、视频等资源。HTTP请求包括请求行、请求头和请求体等部分。

4. 服务器处理请求并返回HTTP响应

服务器接收到浏览器发送的HTTP请求后，根据请求的内容进行处理。处理过程可能涉及数据库查询、动态页面生成等操作。
服务器将处理结果封装成HTTP响应，并发送给浏览器。HTTP响应包括状态码、响应头和响应体等部分。状态码用于表示请求的结果，如200表示请求成功，404表示未找到资源。

5. 浏览器接收响应并解析渲染页面

浏览器接收到服务器返回的HTTP响应后，开始接收响应的数据。如果响应的内容是HTML文件，浏览器会逐步解析HTML文件并开始渲染页面。
解析HTML文件：浏览器解析HTML文件，构建DOM（文档对象模型）树。DOM树表示网页的结构，包括HTML元素、属性等信息。
解析CSS文件：浏览器解析CSS文件，构建CSSOM（样式对象模型）树。CSSOM树表示网页的样式信息，包括元素的样式属性、选择器等。
构建渲染树：浏览器将DOM树和CSSOM树合并，构建渲染树（Render Tree）。渲染树包含需要显示的节点和这些节点的样式信息，但不包含不需要显示的节点。
布局和绘制：浏览器根据渲染树计算每个节点在页面中的位置和大小，这个过程称为布局或回流（Layout或Reflow）。然后浏览器使用计算好的布局信息将页面内容绘制到屏幕上。

6. 脚本执行和资源加载

如果HTML文件中包含了JavaScript代码，浏览器会解析并执行JavaScript代码。JavaScript的执行过程中可能会修改DOM树和CSSOM树，从而触发重新布局和重绘。
浏览器还会加载页面中的其他资源，如图片、视频等。这些资源的加载可能是异步的，即不会阻塞DOM树的构建和页面的渲染。

7. 页面加载完成

当所有资源都加载完成并且页面渲染完毕后，浏览器会触发DOMContentLoaded事件，表示页面已经加载完成。此时用户可以开始与页面进行交互。

看到这么多文字是不是又晕了？概括一下，整体流程不外乎用户在客户端发起请求、通过DNS解析ip地址、请求接口数据、加载静态资源、数据渲染等等，那么我们只需要从这几个方面去考虑即可。

二当页面加载较慢时，我们应该从哪些角度考虑排查与优化？

1.前端方面

存在过多的HTTP请求：检查页面是否加载了过多的外部资源，如图片、CSS、JavaScript文件等。我们可以使用开发者工具（如Chrome DevTools）的Network面板查看请求数量和大小。

资源加载阻塞：检查是否有大型资源（如大图片、大视频文件）阻塞了页面的渲染。

JavaScript执行时间过长：长时间占用JS线程可能导致页面渲染被阻塞。我们可以使用Performance面板分析JavaScript的执行时间和堆栈。

页面回流和重绘：频繁的DOM操作可能导致页面回流和重绘，影响性能。我们可以检查并优化DOM操作，减少不必要的回流和重绘。

内存泄漏：内存泄漏可能导致浏览器占用过多内存，影响页面加载速度。我们可以使用Heap Snapshot等工具分析内存使用情况。

网络问题：考虑使用CDN等技术优化网络传输。

对应的，我们可以提出相应的优化措施：

减少HTTP请求：合并和压缩CSS、JavaScript和HTML文件。使用雪碧图（CSS Sprites）、Base64编码等减少图片请求。利用浏览器缓存机制减少重复请求。

优化资源加载：延迟加载非关键资源，如图片、视频等。使用异步加载（async）或延迟加载（defer）JavaScript脚本。拆分代码，按需加载。

压缩资源：使用Gzip、Brotli等压缩算法对CSS、JavaScript和HTML等文本资源进行压缩。优化图片格式和大小，使用WebP、JPEG XR等高效图像格式。

优化网络连接：使用CDN加速静态资源的加载。DNS预解析和TCP连接复用等技术减少网络延迟。

减少重绘回流：尽量减少DOM操作，使用DocumentFragment等技术批量修改DOM。使用CSS3硬件加速特性（如transform、opacity等）减少重绘。

Webpack性能优化：打包公共代码，动态导入和按需加载。删除无用的代码，进行代码分割和懒加载。使用长缓存优化，公共代码内联等技术减少加载时间。

减少iframes使用：iframes会增加额外的HTTP请求和DOM操作，尽量避免使用。

避免table布局：table布局在渲染时可能较为复杂，容易导致回流和重绘。使用Flexbox或Grid等现代CSS布局技术替代。

使用现代前端框架和库：现代前端框架和库（如React、Vue、Angular）提供了高效的组件化和虚拟DOM等特性，可以显著提高页面性能。

性能监控和调优：使用性能监控工具（如Google Analytics、New Relic等）监控页面加载时间和性能瓶颈。根据监控结果不断调整和优化页面性能。

2.后端方面

数据库查询优化：检查数据库查询语句是否高效，是否存在全表扫描、未使用索引等低效操作，分析查询执行计划，查看是否有优化空间。

后端代码性能：使用性能分析工具（如Profiler）分析后端代码的执行时间和资源消耗，检查是否存在代码冗余、循环嵌套过深、不必要的计算等问题。

服务器负载与资源：监控服务器的CPU、内存、磁盘IO等性能指标，查看是否达到瓶颈。我们可以分析服务器日志，查看是否有异常或错误导致性能下降。

网络延迟与带宽：检查服务器与客户端之间的网络延迟和带宽使用情况，分析网络传输过程中的丢包、重传等问题。

第三方服务调用：检查页面加载过程中是否调用了第三方服务，如API接口、外部数据库等，分析第三方服务的响应时间和稳定性。

缓存策略：检查是否使用了缓存机制来减少数据库查询和计算量，分析缓存的命中率、过期策略等是否合理。

对应的优化策略包括：

数据库优化：

了解和优化表结构：了解表的字段及其类型和索引情况是基础。通过PROCEDURE ANALYSE工具，可以分析表中的数据并给出优化建议。处理冗余数据，确保每行数据可以被唯一区分，避免包含其他表中已存在的非关键信息。对于大数据量的表，拆分成多个小表可以提高性能。例如，可以将不常用的属性分离成单独的小表。
创建合适的索引：在经常用于检索和排序的字段上创建索引，如姓名、员工部门等字段。控制每个表的索引数量，一般不超过6个，以避免降低插入和更新操作的效率。避免在索引上进行计算或者使用函数，这会导致数据库无法利用索引而进行全表扫描。
使用预编译查询：尽量使用参数化SQL，这样数据库会对参数化查询进行预编译，从而提高执行速度。
调整查询语句中的连接顺序：在WHERE子句中先写表之间的连接条件，然后再写其他过滤条件，这样可以尽早地过滤掉不必要的记录。
压缩多条SQL语句到单一语句中：每次执行SQL都会经历网络连接、权限校验等耗时过程，尽量减少SQL语句的执行次数。
用WHERE字句替换HAVING字句：HAVING对结果集进行过滤，而WHERE在聚合前就进行过滤，能更有效地减少数据处理量。
使用临时表暂存中间结果：将复杂的查询分解成多个步骤，并使用临时表暂存中间结果，可以减少对主表的多次扫描。
优化数据类型和字段：尽可能使用 varchar/nvarchar代替char/nchar，变长字段更节省存储空间，查询效率也更高。
优化SELECT语句：只选择需要的列而不是所有列（*），避免在WHERE子句中对字段进行NULL值判断，这会导致忽略索引而全表扫描。
分析查询计划：使用EXPLAIN命令查看查询的执行计划，分析各节点的表扫描、索引使用情况，识别并解决性能瓶颈。
维护和重建索引：定期重建或优化索引，保持索引在最佳状态以提高查询效率。
避免使用游标处理大数据量：游标处理大量数据时效率较低，如果必须处理大量数据，考虑优化需求或采用其他方案。