实战|面试 关于一个页面加载缓慢的排查与优化

文章导读

记得在前一段时间找工作，面试的时候被问到一个这样的问题。当一个页面加载很慢，这时候你该如何去排查问题和解决问题。当时思考了两秒中，发现这道题不是想象中的那么简单，还好当时给答上了。面试结束之后，也去问了群里的很多小伙伴，很多的人回答都不是很全面。下面罗列一下几个稍微关键的回答：

1. MySQL添加索引，增加数据的查询速度。
2. 添加缓存，减少查询数据库的查询，提高接口的速度。
3. 页面文件静态化。
4. 静态资源放cdn。

...... 话说上面的几个回答确实没毛病。也是我们在日常开发中，经常去做的一些事情。但是你仔细想想，面试官真的是想要你这样的答案吗？这里说说我个人的一个理解吧。

1. 个人觉得这道题，面试官想考察大流量业务场景下的一个系统设计能力。
2. 一个页面加载慢，我们需要从多个方面去考虑。需要去思考，当用户打开这个网页，这个页面发生了哪些操作？请求接口数据、加载静态资源、数据渲染、DNS等等操作。这里面的某一个操作都有可能成为页面加载慢的罪魁祸首。

页面演示

下面我任意打开一个网页，搜索一个关键词。演示一个界面从资源的角度都做了哪些操作？

通过上图，我们可以看出来。当我们打开一个面，该页面去加载了许多的资源，有JavaScript文件、有image图片资源，有发起Ajax请求，还有我们的其他媒体资源等等。

请求流程

Snipaste_2021-10-10_17-29-28

浏览器调试

当我们开发一个web应用，学会浏览器调试是必不可少的。通过浏览器调试，我们能够解决很多的问题。如下图，我们通过浏览器的network工具栏，可以看到当前的页面都请求了哪些类型的资源，每种类型资源的大小、每种类型的加载时间、每一个请求最终的加载结果。通过资源的分类工具，也方便我们进行条件筛选。

接口请求分类

下面这张图，我们也很直观的能看出来，页面发起请求的总次数、页面请求的总大小、页面加载与渲染的时间是多少。而且还带有颜色的显示，依次用来告诉我们当前请求的时间是否符合正常情况。

总的加载时间

解决思路

通过浏览器的调试，其实我们很大程度上有了优化的思路。下面罗列一个我个人在这方面的一个解决思路。涉及到前端、后端和数据库相关内容的思考。

Snipaste_2021-10-10_17-24-29