面试前端性能优化八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）如何⽤webpack来优化前端性能？

Webpack可以通过一系列的优化手段来提高前端性能：

代码压缩：使用UglifyJsPlugin等插件对代码进行压缩，减小文件体积。
代码分割：使用SplitChunksPlugin等插件将代码分割成多个小块，按需加载，提高页面加载速度。
按需加载：使用import()语法或者动态import()函数进行按需加载，减少首次加载时间。
资源优化：对图片、字体等静态资源进行压缩和懒加载，减小文件体积，提高页面加载速度。
缓存优化：通过Webpack的hash或chunkhash等机制生成文件名，实现文件内容变化时文件名变化，利用浏览器缓存机制，减少不必要的请求。
环境分离：使用Webpack的DefinePlugin等插件将开发环境和生产环境分离，提高开发效率，减小生产环境下的文件体积。
服务端渲染：使用Webpack配合服务器端渲染（SSR）框架，将部分页面逻辑在服务端完成，减少客户端渲染时间，提高页面加载速度和SEO。

综合使用这些优化手段，可以有效提高前端项目的性能，提升用户体验。

2）如何提⾼webpack的构建速度？

提高Webpack的构建速度可以采取以下措施：

使用缓存：使用Webpack的缓存功能，避免每次都重新构建未改变的模块。
使用多进程/多线程：使用HappyPack或ThreadLoader等工具，将部分工作分配给多个子进程或线程，提高并行处理能力。
优化Loader配置：减少Loader的使用数量，使用include和exclude选项只对必要的文件进行处理。
使用DllPlugin：将不经常变动的第三方库打包成单独的文件，并使用DllPlugin插件进行缓存，避免每次重新打包。
优化resolve配置：通过配置resolve.modules选项，告诉Webpack在哪些目录下搜索模块，避免搜索过多的目录，提高搜索速度。
使用Tree Shaking：通过配置Webpack进行无用代码的剔除，减少打包体积，同时也可以减少构建时间。

3）图片懒加载原理

图片懒加载是指将页面上的图片延迟加载，直到用户滚动到其所在的位置才开始加载，以节省带宽和加快页面加载速度的一种技术。其原理如下：

页面初始化时，只加载首屏可见区域内的图片，其它图片的src属性可以设置为占位图或者空字符串。
监听滚动事件，当用户滚动到某个区域时，判断该区域内的图片是否在可视范围内。
如果图片进入可视范围内，则将之前设置的占位图或空字符串替换为真实的图片地址，开始加载图片。
图片加载完成后，将其显示在页面上。

通过图片懒加载，可以减少页面初始加载时的资源请求量，提高页面加载速度，并且可以优化用户的使用体验。

4）节流和防抖

节流（Throttling）和防抖（Debouncing）是两种常见的优化前端性能的技术，用于限制某个函数的执行频率，以提高页面性能和用户体验。

节流：指在一定时间间隔内只执行一次函数。如果在指定的时间间隔内多次触发该函数，只有第一次会执行，其它的会被忽略。节流通常用于处理频繁触发的事件，如页面滚动、鼠标移动等。比如在页面滚动时，我们可能不希望滚动事件处理函数被频繁调用，而是希望在滚动停止后的一段时间内再执行一次。

防抖：指在一定时间间隔内只执行最后一次函数。如果在指定的时间间隔内多次触发该函数，只有最后一次会被执行，之前的都会被取消。防抖通常用于处理用户输入，如搜索框输入、窗口大小调整等。比如在用户连续输入搜索关键词时，我们可能希望在用户停止输入后的一段时间内再进行搜索请求，而不是每次输入都发起请求。

5）SPA首屏为什么加载慢？

SPA（单页面应用）首屏加载慢可能由以下原因造成：

大量的JavaScript代码：SPA通常会将所有的页面逻辑和路由控制都打包成一个较大的JavaScript文件，如果文件过大，会导致首屏加载时间较长。
大量的网络请求：SPA通常会通过异步加载数据和组件，如果页面依赖的数据量较大，或者需要加载的组件较多，会导致首屏加载慢。
懒加载未优化：如果SPA中的图片、组件等资源没有进行懒加载或者懒加载策略不合理，会导致首屏加载时间较长。
未优化的路由跳转：如果SPA中的路由跳转逻辑较复杂或者未经过优化，会导致页面加载慢。
服务器性能不足：如果SPA的后端服务器性能不足，无法快速响应页面请求，也会导致首屏加载慢。

针对以上问题，可以通过以下方式进行优化：

代码拆分：将SPA的代码拆分成多个小模块，按需加载，减小首屏加载时间。
懒加载和预加载：对于不必要立即加载的组件和资源，可以进行懒加载或者预加载，优化页面加载时间。
路由懒加载：使用路由懒加载技术，按需加载路由组件，减小首屏加载时间。
图片优化：对页面中的图片进行优化，如压缩、懒加载等，减小图片加载对首屏的影响。
服务端渲染（SSR）：将部分页面逻辑在服务端完成，将渲染好的页面直接返回给客户端，减少客户端渲染时间，提高首屏加载速度。

6）为什么要做性能优化

性能优化是为了提升网站或应用的加载速度、渲染速度和交互速度，从而改善用户体验和满足用户需求。具体来说，性能优化的重要性体现在以下几个方面：

提升用户体验：快速的加载速度和流畅的交互可以提升用户体验，增加用户的满意度和忠诚度。
降低跳失率：如果网站或应用加载速度过慢，用户可能会选择放弃访问，导致跳失率增加。通过性能优化，可以降低跳失率，提高用户的停留时间和转化率。
提高SEO排名：搜索引擎通常会将网站的加载速度作为排名的一个因素，快速加载的网站更容易获得较高的排名，吸引更多的用户访问。
节省服务器成本：优化后的网站或应用通常会减少服务器的负载和流量消耗，降低服务器成本。
提高整体系统的稳定性：优化后的网站或应用可以更好地应对高并发和突发流量，提高系统的稳定性和可靠性。

综上所述，性能优化不仅可以提升用户体验，还可以带来更多的商业价值和技术优势，是开发过程中必不可少的一部分。

7）常见性能优化有哪些关键指标？

常见的性能优化关键指标包括：

加载时间（Load Time）：网页或应用从发起请求到完全加载完成所需的时间。
首屏加载时间（First Contentful Paint）：用户首次看到页面内容的时间，影响用户的第一印象。
首次输入延迟（First Input Delay）：用户首次与页面交互（点击按钮、输入框等）到页面响应的时间。
页面交互响应时间（Time to Interactive）：用户能够与页面进行交互的时间。
网页渲染性能（Rendering Performance）：包括帧率（FPS）、动画流畅性等，直接影响用户的视觉体验。
资源加载时间（Resource Load Time）：各种资源（图片、样式、脚本等）的加载时间。
HTTP请求数量和大小：页面发起的HTTP请求数量和请求的数据大小，过多的请求和大的数据体积会影响加载速度。

这些指标可以通过浏览器的开发者工具或性能监测工具进行监测和分析，帮助开发者找到性能瓶颈并进行优化。

8）性能优化方式有哪些

性能优化方式多种多样，其中一些常见的包括：

代码压缩和混淆：减小文件体积，提高加载速度。
资源文件缓存：通过合理配置缓存头，利用浏览器缓存机制减少不必要的请求。
懒加载和预加载：延迟加载不必要立即加载的资源，或者在需要之前预先加载。
异步加载脚本：将不影响首屏渲染的脚本标记为异步加载，提高页面渲染速度。
图片优化：使用适当的图片格式、压缩图片、懒加载等方式减小图片加载对性能的影响。
CDN加速：通过使用内容分发网络（CDN），将静态资源分发到全球各地的服务器，加速资源加载速度。
服务端渲染（SSR）：将部分页面逻辑在服务端完成，减少客户端渲染时间。
减少HTTP请求数量：合并和减少文件、使用CSS Sprites、使用字体图标等方式减少HTTP请求。
前端框架优化：对于特定框架，如Vue、React等，使用框架提供的性能优化工具和机制，如Vue的keep-alive、React的shouldComponentUpdate等。

9）Vue 有什么性能优化的地方？

Vue性能优化的一些关键点包括：

虚拟DOM（Virtual DOM）：Vue使用虚拟DOM来进行DOM操作，通过差异化更新减少实际的DOM操作，提高渲染效率。
keep-alive：Vue提供的keep-alive组件可以缓存不活动的组件实例，避免频繁创建和销毁，提高性能。
合理使用v-if和v-show：v-if适用于在运行时条件不经常改变的情况，而v-show适用于频繁切换的情况。
函数式组件：对于无状态的组件，可以使用函数式组件，减少实例化开销。
异步组件：使用Vue的异步组件机制，将组件按需加载，提高页面加载速度。
优化事件处理：避免在模板中频繁使用函数表达式，可以通过methods定义函数，提高性能。
路由懒加载：使用Vue Router提供的路由懒加载功能，按需加载路由组件。

10）React 有什么性能优化的地方？

React性能优化的一些关键点包括：

虚拟DOM（Virtual DOM）：类似于Vue，React也使用虚拟DOM来进行高效的DOM操作，通过差异化更新减少实际的DOM操作。
shouldComponentUpdate：通过在组件中实现shouldComponentUpdate生命周期方法，手动控制组件是否需要更新，避免不必要的渲染。
React.memo：使用React.memo来包裹函数组件，实现组件的浅层比较，避免在相同props下重复渲染。
useMemo和useCallback：使用React Hooks中的useMemo和useCallback来缓存计算结果和函数引用，避免重复计算和创建。
React.lazy和Suspense：使用React.lazy和Suspense实现组件的按需加载，减小首屏加载体积。
合理使用状态管理：对于大型应用，合理使用状态管理库（如Redux）来管理组件状态，避免状态分散在多个组件中导致不必要的渲染。
使用Profiler：React提供的Profiler组件可以帮助开发者识别组件渲染的性能瓶颈，优化性能。

这些优化策略可以根据具体的应用场景和需求进行选择和组合使用。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

前后端总计已经 700+ Star，1W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐