【阿里前端面试题】聊聊前端性能优化的方案，解决过什么样的性能问题？

大家好，我是“寻找DX3906”。每天进步一点。日积月累，有朝一日定会厚积薄发！

前言：

前面已经和大家分享了4篇面试题：

《【阿里前端面试题】浏览器的加载渲染过程》

《【阿里前端面试题】客户端和服务器交互，为什么选用tcp协议建立链接？》

《【阿里前端面试题】客户端和服务器交互的过程中，丢包是怎么产生的？》

《【阿里前端面试题】知道了解浏览器渲染对自己有什么帮助？》

从上面的面试题可以看出，面试官在从一个“浏览器的加载渲染”的问题，一步一步的引导和验证面试者的实际工作经验。

前端性能优化在面试中出现概率很高。不了解前端的性能优化并不会影响你成为一名合格的前端工程师。但它是每一个优秀的前端工程师多多少少都需要知道的东西。

那我们就从浏览器渲染加载和交互的角度，来切入这个前端性能优化的话题。

第一方案：使用函数节流和函数防抖-（接口数量多，重复调用）

函数节流（Throttling）和函数防抖（Debouncing）是两种在JavaScript编程中常用的优化技术，它们主要用于控制函数的执行频率，提高程序的性能和用户体验。

函数节流（Throttling）

作用： 节流主要用于控制函数在一定时间内只能执行一次。这在处理诸如窗口大小调整、滚动等频繁触发的事件时非常有用。

优点：

频率控制：可以保证函数在指定的时间间隔内最多只执行一次，避免因事件频繁触发而导致的性能问题。
性能优化：减少函数执行次数，降低CPU占用率，提高应用响应速度。
适用性广：适用于任何需要限制事件触发频率的场景。

示例场景：

浏览器窗口大小改变事件。
滚动事件。
连续的按键事件。

函数防抖（Debouncing）

作用： 防抖确保函数在事件触发后等待一定的延迟时间后才执行，如果在这段延迟时间内再次触发事件，则重新开始计算延迟时间。

优点：

延迟执行：可以延迟函数的执行，直到停止触发事件一段时间后。
避免抖动：适用于用户输入等场景，避免因用户操作未完成而导致的函数错误执行。
提高效率：减少因连续快速触发事件而导致的函数执行次数。

示例场景：

用户输入搜索框。
连续的点击事件。
鼠标连续移动（如拖拽）。

总结

节流：适合那些我们希望在触发事件后，每隔一定时间执行一次的场景。
防抖：适合那些我们希望在触发事件操作完成后才执行一次的场景。

两者都是为了优化性能和用户体验，选择使用哪一个取决于具体的应用场景和需求。在实际开发中，根据事件的特性和业务逻辑的需要，合理选择节流或防抖，有时也可以结合使用两者，以达到更好的效果。

具体解决方案，可以参考以前分享的文章：

《【解决方案】【最佳实践】测试小姐姐动了我的奶酪：JS前端节流与防抖》

第二方案：减少DOM重排和重绘-（页面DOM重复渲染）

性能影响：

DOM重排可能导致性能问题，因为它需要浏览器进行大量的计算来重新布局页面。如果重排的元素较多或较复杂，这个过程可能会很耗时。

相比DOM重排，重绘通常对性能的影响较小，因为它不需要计算布局变化，只是简单地“涂抹”像素。

最佳实践：

为了提高网页性能，可以采取以下措施减少DOM重排和重绘：

减少DOM操作：尽量一次性修改多个属性，而不是分开多次修改，这样可以减少浏览器的重排次数。
使用文档片段（Document Fragment）：当需要添加多个节点到DOM时，使用文档片段来处理，然后再一次性将片段添加到文档中。
使用CSS变换（Transform）：对于位置或尺寸的改变，使用CSS的transform属性可以避免触发重排，因为变换在合成层（合成器）上处理。
使用CSS动画（Animation）：对于复杂的视觉效果，使用CSS动画而不是JavaScript动画，因为CSS动画可以更高效地利用浏览器的优化。
避免使用昂贵的CSS属性：有些CSS属性（如box-shadow、border等）会触发昂贵的重排或重绘，应谨慎使用。
使用requestAnimationFrame：在进行动画或连续的DOM更新时，使用requestAnimationFrame可以确保在浏览器的下一次重绘之前更新DOM，从而提高性能。

具体解决方案，可以参考以前分享的文章：

【浏览器渲染机制】回流（Reflow）和重绘（Repaint）

第三方案：前端代码工程打包，开启GZIP压缩-（静态资源压缩，接口数据压缩）

开启GZIP压缩在前端开发中带来的好处主要包括以下几点：

减少传输数据量：GZIP是一种通用的文件压缩算法，可以显著减少文件大小，这意味着在网络传输时需要发送的数据量减少。
加快加载速度：由于需要传输的数据量减少，文件加载速度会加快，这可以提升用户体验，尤其是在带宽有限或网络条件不佳的情况下。
减少服务器负载：压缩后的数据量减少，可以减轻服务器的负载，尤其是在高流量情况下。
提高缓存效率：压缩后的文件更小，缓存效率更高，这有助于提高页面的重复访问速度。
节省存储空间：在服务器上存储压缩后的文件可以节省存储空间。
提高搜索引擎优化（SEO）：加载速度是搜索引擎排名的一个因素，开启GZIP压缩可以间接提高网站的SEO。
兼容性好：几乎所有现代浏览器都支持GZIP压缩，因此无需担心兼容性问题。
配置简单：在服务器上配置GZIP压缩通常很简单，许多服务器软件（如Apache、Nginx等）都支持GZIP压缩的配置。
自动处理：一旦配置好，GZIP压缩通常是自动处理的，无需开发者手动压缩每个文件。
支持多种文件类型：GZIP可以压缩多种类型的文件，包括HTML、CSS、JavaScript等。

开启GZIP压缩是一个简单且有效的方法，可以提升网站的性能和用户体验。不过，需要注意的是，压缩和解压过程会消耗服务器的CPU资源，因此在资源非常有限的服务器上，可能需要权衡压缩带来的性能提升和CPU资源消耗之间的关系。

具体解决方案，可以参考以前分享的文章：

【解决方案】前端React 、Vue工程如何开启GZIP压缩

第四方案：使用骨架屏-（页面加载，交互感知性能优化）

当用户在浏览网页时，如果遇到长时间的加载过程，他们往往会感到不耐烦，甚至可能在页面完全加载前就选择离开。为了避免这种情况，除了采取压缩代码、利用缓存等技术手段来提升页面加载速度外，还可以通过引入一种称为“骨架屏”的界面设计来改善用户体验。这种设计通过展示一个页面的基本结构和布局，即使在内容完全加载之前，也能给用户一种页面正在积极加载的印象，从而减少用户的等待焦虑，提高他们对网站的整体满意度。

第五方案：正确使用`defer`或把javascript脚本放在最后加载

脚本的下载和执行，会阻塞其他资源（样式文件或图片）的下载。因此，将<script>标签尽量尽可能放到<body>标签的底部。

在传统的网页开发中，我们倾向于将<script>标签放置在HTML文档的底部，这样做的目的是为了让浏览器在解析HTML内容时不会被JavaScript的执行所干扰，从而提高页面的加载速度和用户体验。

然而，如果出于某些原因，我们需要在文档的头部或者中间位置放置<script>标签，同时又希望避免JavaScript的加载和执行影响页面的渲染过程，我们可以使用defer属性来实现这一需求。

使用defer属性的<script>标签可以保证JavaScript文件在下载时不会阻塞页面的解析过程，并且会在DOM完全构建完成以及CSS样式完全渲染之后，才开始执行脚本。这意味着，即使<script>标签位于HTML文档的前面，页面的渲染也不会因为JavaScript的加载而被延迟。

简而言之，defer属性允许我们合理安排<script>标签的位置，同时确保页面的渲染流程不受影响，从而实现页面加载性能和脚本执行效率的双重优化。

第六方案：图片优化

1.将png/jpg/gif图片替换为webp格式图片

WEBP图片格式是一种先进的图像压缩技术，它在减少文件大小方面做得比传统的PNG和JPG格式更好。这意味着使用WEBP格式的图片可以更快地加载，节省网络流量，并且缩短用户等待页面加载的时间。

WEBP还有一个优点，它提供了两种压缩方式：一种是有损压缩，类似于JPG，可以在保持较小文件大小的同时减少一些图像质量；另一种是无损压缩，类似于PNG，保持图像的完美质量，但文件大小也相对较大。

如果你想要尝试WEBP格式的压缩效果，可以使用一个叫做Squoosh的在线工具来轻松实现，它是免费的，并且可以让你直观地比较压缩后的文件大小。

关于浏览器的兼容性，现在大多数浏览器都支持WEBP格式，大约有95%的市场份额。对于那些少数不支持WEBP的浏览器，比如Internet Explorer，我们可以通过一些技术手段来确保它们也能正常显示图片，所以不需要太担心兼容性问题。

2.图片懒加载

我们打开一个网页，很多时候我们第一眼看到的只是页面的一小部分，也就是所谓的"首屏"。首屏之外的图片，如果我们一开始就全部加载，就好比买了很多可能用不到的东西，既浪费钱又占地方。

为了避免这种浪费，我们可以采取一种叫做"懒加载"的技巧。这个技巧的意思就是：我们先不给图片指定具体的存放位置，而是等到图片快要被我们看到的时候，才告诉浏览器去加载这张图片。

具体来说，就是：

占位符：一开始，我们先给图片的位置放一个"占位符"，比如一个空白的框或者一个小图标，表示这里有一张图片。
等待时机：然后，我们等待用户滚动页面，当图片快要进入我们的视线时，我们再告诉浏览器去加载这张图片。
加载图片：一旦图片的位置被我们看到，浏览器就会收到指令，开始加载这张图片，然后图片就会显示出来。

这样做的好处是：

节省资源：不需要一开始就加载所有的图片，节省了带宽和加载时间。
加快速度：页面打开的速度会更快，因为减少了一开始需要加载的内容。
提升体验：用户可以更快地看到页面的内容，不需要等待所有的图片都加载完成。

总的来说，懒加载就像是我们去超市购物，只买我们真正需要的东西，而不是一次性把所有可能用到的东西都买回家。这样既节省了钱，又让家里看起来更整洁。

3.采用svg图片或者字体图标

字体图标和SVG图像是由代码构建的矢量图形，它们就像数字世界里的变形金刚，无论放大多少倍，都能保持清晰，不丢失细节。使用时，它们跟文字一样灵活，可以随意调整大小、颜色等属性，就像给文字换颜色和大小一样简单。更赞的是，这些图标文件小巧玲珑，不会占用太多空间，让网页加载更快，体验更流畅。

第七方案：SSR服务端渲染

采用服务端渲染（SSR）技术，可以大幅提升页面首次加载速度，因为它只加载首页，对搜索引擎优化（SEO）也很有利。不过，SSR可能导致服务器负载增加，且页面数据更易被爬虫获取。

目前，nuxt.js和next.js是两个广泛使用的SSR框架，它们帮助开发者便捷地实现SSR功能。

第八方案：合理使用浏览器缓存策略

浏览器缓存策略是一种优化网页加载速度的技术，它通过减少服务器请求和重复数据传输来提高网页的加载效率。以下是浏览器缓存策略的几个关键点：

强缓存（HTTP缓存）：
- 浏览器在首次请求资源后，会根据HTTP响应头中的Cache-Control和Expires字段来决定是否可以从本地缓存中读取数据，而无需再次请求。
- 强缓存适用于不经常变动的资源，如CSS、JavaScript文件和图片。
协商缓存：
- 当资源有可能发生变化时，浏览器会使用ETag或Last-Modified字段来与服务器进行验证。
- 如果资源未发生变化，服务器会返回304 Not Modified状态码，告诉浏览器可以使用本地缓存的版本。
Service Workers：
- Service Workers是一种运行在浏览器后台的脚本，可以拦截网络请求并返回缓存的响应。
- 开发者可以编写自定义的缓存策略，控制哪些请求可以被缓存，哪些需要从网络获取。
浏览器行为：
- 不同的浏览器可能对缓存的处理方式略有不同，但大多数现代浏览器都遵循HTTP规范。
- 用户可以通过清除浏览器缓存来手动刷新页面资源。
缓存更新：
开发者可以通过设置合适的HTTP头来控制资源的缓存行为，比如通过Cache-Control: no-cache强制浏览器每次都检查资源是否更新。
缓存位置：
浏览器缓存通常分为内存缓存和磁盘缓存。内存缓存读取速度快，但关闭浏览器后缓存会丢失；磁盘缓存则可以持久存储。
缓存粒度：
可以针对单个资源设置缓存策略，也可以针对整个网站或特定类型的资源进行设置。
性能影响：
合理配置缓存策略可以显著提高网页的加载速度和用户体验，减少服务器的负载。

通过这些策略，浏览器能够智能地决定何时从本地缓存读取数据，何时从服务器获取最新数据，从而平衡加载速度和数据的实时性。

前端性能优化检测工具：

前端性能优化的检测工具有很多，可以帮助开发者定位和解决性能问题，以下是一些常用的性能检测工具：

Lighthouse
- 由Google开发，是一个开源的自动化工具，用于改进网络应用的质量。
- 可以作为Chrome扩展程序运行，或从命令行运行。
- 能够生成有关页面性能的详细报告，包括加载性能、SEO、PWA等多个方面。
WebPageTest
- 一个在线工具，可以测试网站的加载速度和性能。
- 提供详细的瀑布流图表，帮助分析网络请求和响应时间。
- 支持从不同地理位置和网络条件下进行测试。
Chrome DevTools
- 内置于Google Chrome浏览器的一套开发者工具。
- 提供性能分析、网络分析、内存分析等功能。
- 可以记录页面的帧率、CPU使用情况和网络请求等信息。
PageSpeed Insights
- 由Google提供的在线服务，用于分析网页在移动设备和桌面设备上的性能。
- 根据Google的算法给出性能评分，并提供优化建议。
GTmetrix
- 一个在线分析工具，提供网站性能的详细报告。
- 结合了Google PageSpeed Insights和YSlow的规则进行评分。
Pingdom
- 一个在线网站性能测试工具，提供加载速度测试和分析。
- 可以分析页面的HTML、CSS、JavaScript等资源的加载时间。
Load Impact
一个性能测试工具，可以模拟多用户访问网站，测试其负载能力。
WebPagetest Chrome扩展
基于WebPageTest的Chrome扩展，方便在浏览器中直接进行性能测试。
Calibre
由Calibre App团队开发，提供性能分析和优化建议。
AutoWebPerf
一个模块化工具，可以从多个来源自动收集性能数据。