前端性能优化 面试如何完美回答

news2025/2/3 21:06:38

在这里插入图片描述

前言

性能优化是目前在面试中被问到非常多的问题,主要就是通过各种算和技术来提高页和应用的速度和用户体前端性能优化的问题并不好回答

在回答的时候干万不要掉进一个误区,认为性能优化只是几个技术点而已,事实上性能优化涉及到的是多方面的

我们首先需要知道,当一个项目出现性能问题时,并不是突然发生了,而是日积月累的结果,所以对于一个项目来说,最好的性能优化应该是从平时开发过程中就要去注意和实现的

三个层面

所以接下来我们会从三个层面来聊一聊性能优化的内容,包括

  1. 项目架构
  2. 项目开发
  3. 项目部署

项目架构

为什么架构设计会影响性能呢?
俗话说如果战略如果错误那么在战术再怎么优秀也无法弥补失败。在真实开发中,性能优化并不是一朝一夕的事情,如果等到我们的项目出现严重的性能问题,再去解决,往往会成为一坨大粪代码

那么架构设计需要考虑哪些因素

主要是两方面的因素协同开发、模块解耦。

项目架构的因素

协同开发
这是指多个开发人员能够有效地一起工作,减少冲突和重复工作

良好的架构可以帮助团队成员独立开发各自的模块,而不必过于依赖其他人

另外当我们出现人员流动时(有人入职或者离职),可以快速的应对。

有人入职,可以快速分配任务,协作开发。

有人离职,不影响其他模块的迭代,项目有序推进。
这是一个好的项目架构的前提
模块解耦
解耦是指在设计和开发过程中,使各模块之间的依赖最小化

能够使代码更加灵活 易于维护和扩展 这对于大型项目或者长期维护项目非常重要,因为它降低了修改某个模块时对其他模块的影响
尽量每个模块需要做到高内聚 低耦合

项目架构的实现(一)采用模块化的架构设计
Utils工具封装模块:
  1. 将项目中通用的工具函数封装在utils目录中,比如日期格式化函数、数据处理函数等
  2. 这些工具函数应该是纯函数,保证输入相同输出相同,不依赖于外部状态
  3. 将工具函数分模块管理,并在index.js中集中导出,以便在项目的其他地方直接导入使用
Store状态管理模块:
  1. 在Vue项目中,可以通过Pinia的模块化设计来管理状态
  2. 每个页面或功能模块有自己的store模块,如userStorejs、productStorejs等
  3. 同时,可以创建一个公共store模块commonStore.js用于存放应用级别的状态,如全局loading状态等
  4. 组件、页面的模块开发
Vue源码相关架构
  1. 从大的模块来说,它的渲染器、编译器、响应式系统是划分清晰的
  2. 响应式系统和编译器可以作为独立的模块来开发和使用,渲染器依赖于响应式系统和编译器
  3. 从小的模块来说,它的调度系统、watch、watchEffect等又单独做了分离,包括keep-alive、suspense、teleport都可以作为一个独立的模块来开发,再集成到整个Vue项目中。
项目架构的实现二 其他方面的设计
Webpack和Vite的优化

代码分割(CodeSplitting):Webpack和Vite都支持代码分割,这有助于只加载需要的模块,减少初始加载时间并提高性能

动态导入(DynamicImport):使用动态导入可以根据需要懒加载模块,进一步降低加载时间。

TreeShaking:通过去除未使用的代码来优化最终输出文件的大小。Webpack和Vite都有内置的支持

使用版本控制和分支策略

Git工作流:团队可以采用Git工作流,比如GitFlow,以确保开发人员在不同的分支上独立工作,然后通过合并请求(pullrequests)进行代码审查和集成

代码审查codereview:代码审查是协同开发的重要部分,确保代码质量和一致性,同时让团队成员对代码变更保持透明(包括ESlint、Prettier等)

其他方面的考虑

持续集成/持续部署(CI/CD)工具的使用:利用CI/CD管理和自动化部署流程,确保团队开发的一致性,提高测试和部署的效率

文档和沟通:良好的文档、沟通机制来确保团队协同工作,特别是在项目架构和代码约定方面

项目开发

项目开发框架相关优化(Vue)
合理使用v-if和v-show

v-if用于条件变化不频繁的场景,避免不必要的组件创建和销毁

v-show用于频繁切换显示状态的场景,通过控制CSS的display属性来提升性能避免不必要的组件染:

避免不必要的组件重渲染

使用key确保组件唯一性,避免不必要的DOM更新

使用v-once指令确保不变的数据只渲染一次。

合理使用Vue生命周期勾子,控制组件是否需要重新渲染

组件懒加载(LazyLoading)

使用动态import实现按需加载组件,减少初始加载时间

使用Vue的computed

使用computed属性缓存计算结果,避免重复计算

状态下沉

根据虚拟DOM更新特性,将状态下沉到子组件,避免全局或父组件频繁更新

合理使用Keep-Alive

使用<keep-alive>组件缓存动态组件,避免不必要的组件销和创建

项目开发-公共开发代码优化
减少不必要的计算

避免在染过程中进行大量计算,将重计算操作放在适当位置,如computed或方法调用

抖动(Debouncing)和节流(Throttling)

在频繁触发的事件(如滚动、输入)上使用去抖动和节流,减少事件处理频率

优化循环和选代

优化循环使用,比如获取长度在外部获取arr.length,避免在循环中创建新对象和数组等

使用WebWorkers

将繁重计算任务移到WebWorkers中,避免阻塞主线程,保持流畅性

避免内存泄漏

在组件销毁时清理定时器、事件监听器,闭包小心内存泄漏等资源,避免内存泄漏

使用现代图片格式和精图

使用WebP、AVIF等格式减少图片文件大小,加快加载速度,对图片进行压缩处理。

精灵图的使用,页面只需要发送一次请求来加载这张大图,而不是为每个小图标发送多个请求,这可以显著减少HTTP请求的数量,降低网络开销。

图片懒加载

使用懒加载技术只加载可视区域的图片,减少初始加载时间和带宽消耗CSS选择器优化
使用简单有效的选择器,避免复杂的选择器链,提高染性能

避免回流和重绘

尽量减少DOM操作,使用批量更新,优化回流和重绘性能。
使用transform和opacity进行动画效果,避免触发回流

使用CSS动画

优先使用CSS动画而JavaScript动画,提升性能

项目开发-其他方面优化
服务端渲染(SSR):

SSR(服务端染)是在服务器端预先染页面,并将完整的HTML发送到客户端SSR提高了首屏染速度,特别适用于SEO需求强的项目和需要快速加载的应用

代码压缩和混滑

使用Terser等工具压缩JavaScript,减少文件大小

压缩CSS和HTML文件,优化代码传输速度

按需加载和代码拆分

使用Webpack、vite等工具实现代码拆分,按需加载模块

第三方包按需引入

使用Babel插件或Vite配置,按需引入UI库组件,减小打包体积

使用虚拟列表等技术

在处理长列表时,使用虚拟滚动技术,只染可视区域的元素,提升性能

项目部署 优化手段

CDN使用和配置

CDN(内容分发网络)是一组分布在多个地理位置的服务器,用于加速静态资源(如图片、CSS、JavaScript文件等)的传输通过将资源缓存到离用户更近的服务器上,CDN可以显著减少资源加载时间,提升用户体验 。选择可靠的CDN提供商,根据目标用户群体的位置选择最佳的CDN服务器节点。

将静态资源托管到CDN提供商(如阿里云、腾讯云、Cloudflare、AWSCloud等)上

配置构建工具(如Webpack或vite)输出静态资源的路径

首屏渲染速度优化

将首屏染所需的关键CSS内联到HTML中,减少CSS阻塞染的时间,也可以整合网络请求。

使用async或defer属性来异步加载JavaScript脚本,避免阻塞染

通过按需加载(LazyLoading)和代码分割(CodeSplitting)技术,将非关键代码分 减少初始加载时间。

当然也包括我们前面架构中提到的SSR技术。

HTTP缓存策略

HTTP缓存策路通过在客户端缓存静态资源 避免重复请求,减少服务器负载和页面加载时间。

设置适当的HTTP缓存头(如Cache-Control、ETag和Expires),为静态资源设置缓存策略

根据文件的特性,设置强制缓存(Cache-Control和Expires),比如JS文件、CSS文件等(可以结合文件指纹hash,在文件更新时文件生成新的文件名,让客户端可以加载新的文件)。

对于频繁更新的文件,使用协商缓存((ETag和Last-Modified)),比如如果HTML页面经常变更(可以让浏览器根据页面内容变化判断是否需要重新加载)。

代码压缩和优化

代码压缩和优化是通过去除多余的空格、注、代码缩 (例如将变量名缩短) 当然也包括Treeshaking等方式减少文件大小 加快传输速度

使用构建工具(如Webpack ite)压缩插件(如Terser)对JavaScript代码行压缩和优化 玉缩CSS和HTML文件,减少文件体积。
可以使用诸如TinyPNG、mageoptim、 squoosh等工具对图片进行压缩 减少图片文件的大小

对图标和简单的图形 可以使用SVG格式 这种格式不仅文件小 而且可以无损缩放。

文件压缩是通过压缩算法(如gzip、减少文件体积的技术,可以显著减少文本文件(如HTML、CSS、JavaScript)和部分图像文件的体积,降低网络传输时间(实现也非常简单,在服务器中中启用gzip或Brotli压缩即可)。

减少和优化资源请求

减少DNS查询 通过将多个资源托管在一域名下,减少DNS查询的时间。
对于必须跨域的资源,使用DNS预解析(<link rel=dns-prefetch”href=//zhaimou.com”>)

通过异步加载或延加载(如使用async或defer)减少第三方脚本对页面加载速度的影响。

预加载(Preload)和预获取(Prefetch):

使用<linkrel=“preload href=”/path/to/resourceas=script/style>来预加载关键资源

使用<linkrel=“prefetch” href=”/path/to/resource">来预获取未来可能需要的资源!

文章到这里就结束了,更多作为自我学习,也希望对你有所帮助

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2191345.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2024年10月测试通过】conda下使用虚拟环境安装最新版pytorch2.4+cuda12.4

开头先说重点&#xff1a; 1.采用conda的虚拟环境&#xff0c;会在沙盒环境下安装好所有所需包&#xff0c;而且该虚拟环境拷贝给其他人员可以直接用&#xff0c;很方便。 2.pytorch官网访问不了&#xff0c;有一个国内镜像推荐&#xff0c;地址为PyTorch - PyTorch 中文 3.…

unity ps 2d animation 蛇的制作

一、PS的使用 1.打开PS 利用钢笔工具从下往上勾勒填充 2.复制图层&#xff0c;Ctrl T,w调为-100% 3.对齐图层并继续用钢笔工具进行三角勾勒 3.画眼睛,按U快捷键打开椭圆工具&#xff0c;按住Shift可以画圆&#xff0c;填充并复制图层对称。 4.画笔工具&#xff0c;打开小…

Golang | Leetcode Golang题解之第458题可怜的小猪

题目&#xff1a; 题解&#xff1a; func poorPigs(buckets, minutesToDie, minutesToTest int) int {if buckets 1 {return 0}combinations : make([][]int, buckets1)for i : range combinations {combinations[i] make([]int, buckets1)}combinations[0][0] 1iterations…

「漏洞复现」用友U8 CRM config/fillbacksettingedit.php SQL注入漏洞

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

蓝牙定位的MATLAB仿真程序(基于信号强度,平面内的定位,四个蓝牙基站)

这段代码通过RSSI信号强度实现了蓝牙定位,展示了如何使用锚点位置和测量的信号强度来估计未知点的位置。它涵盖了信号衰减模型、距离计算和最小二乘法估计等基本概念。通过图形化输出,用户可以直观地看到真实位置与估计位置的关系。 文章目录 蓝牙定位原理蓝牙定位的原理优缺…

【综合性渗透利器】- TscanPlus

如果你在寻找一款轻量级、实用且开源的漏洞扫描工具&#xff0c;那么 TscanPlus 绝对值得一试。这款工具由 TideSec 团队打造&#xff0c;以其简洁、高效、易用的特点&#xff0c;广受好评&#xff0c;目前在github上拥有1.5k star。 为什么推荐 TscanPlus&#xff1f; 无论你…

基于Zynq SDIO WiFi移植一(支持2.4/5G)

基于SDIO接口的WIFI&#xff0c;在应用上&#xff0c;功耗低于USB接口&#xff0c;且无须USB Device支持&#xff0c;满足某些应用场景 1 硬件连接 2 Vivado工程配置 3 驱动编译 3.1 KERNRL CONFIG (build ENV) 修改 export KERNELPATH<path of kernel header>export T…

【web安全】——SSRF服务器端请求伪造

1.SSRF漏洞基础 1.1SSRF漏洞概述与成因 SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。 一般情况下&#xff0c;SSRF攻击的目标是从外网无法访问的内部系统。&#xff08;正是因为它是由服务端发起的&#xf…

Java--IO高级流

缓冲流 缓冲流,也叫高效流&#xff0c;是对4个基本的FileXxx 流的增强&#xff0c;所以也是4个流&#xff0c;按照数据类型分类&#xff1a; 字节缓冲流&#xff1a;BufferedInputStream&#xff0c;BufferedOutputStream 字符缓冲流&#xff1a;BufferedReader&#xff0c;Buf…

Python | Leetcode Python题解之第458题可怜的小猪

题目&#xff1a; 题解&#xff1a; class Solution:def poorPigs(self, buckets: int, minutesToDie: int, minutesToTest: int) -> int:if buckets 1:return 0combinations [[0] * (buckets 1) for _ in range(buckets 1)]combinations[0][0] 1iterations minutesT…

StreamProvider组件的用法

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了通道相关的内容,本章回中将介绍StreamProvider组件.闲话休提,让我们一起Talk Flutter吧。 1 概念介绍 在Flutter中Stream是经常使用的组件,对该组件的监听可void main() {///让状态栏和程序的appBar融为一体…

yub‘s Algorithm Adventure Day6

链表相交 link&#xff1a;面试题 02.07. 链表相交 - 力扣&#xff08;LeetCode&#xff09; 思路分析 看到描述很直接的想到双指针&#xff0c;但是看到题解之后被K佬的神级理解折服&#xff0c;太妙了&#xff01; 双指针 public class Solution {public ListNode getIn…

计算机毕业设计 乡村生活垃圾管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

设计模式、系统设计 record part03

创建者模式 1.创建、使用&#xff0c;二者分离 2.降低&#xff0c;耦合度 3.使用者&#xff0c;不用关注&#xff0c;对象的创建细节 工厂模式&#xff1a; 1.对象由工厂生产&#xff0c; 2.使用者与工厂交流&#xff0c;不与对象直接打交道&#xff0c; 3.在工厂里直接更换对象…

使用 Vertex AI Gemini 模型和 Elasticsearch Playground 快速创建 RAG 应用程序

作者&#xff1a;来自 Elastic Jeff Vestal 在这篇博客中&#xff0c;我们将使用 Elastic 的 Playground 和 Vertex AI API 将 Elasticsearch 连接到 Google 的 Gemini 1.5 聊天模型。将 Gemini 模型添加到 Playground 使 Google Cloud 开发人员能够快速建立 LLM、测试检索、调…

开源的云平台有哪些?

开源云平台为用户提供了构建、管理和运行云基础设施及应用的能力&#xff0c;同时允许社区参与开发和改进。以下是一些知名的开源云平台&#xff1a; 1. OpenStack 简介&#xff1a;OpenStack&#xff1a;一个广泛使用的开源云平台&#xff0c;它由多个组件组成&#xff0c;提…

PriorityQueue分析

概述 PriorityQueue&#xff0c;优先级队列&#xff0c;一种特殊的队列&#xff0c;作用是能保证每次取出的元素都是队列中权值最小的&#xff08;Java的优先队列每次取最小元素&#xff0c;C的优先队列每次取最大元素&#xff09;。元素大小的评判可以通过元素本身的自然顺序…

linux信号 | 学习信号四步走 | 透析信号是如何被处理的?

前言&#xff1a;本节内容讲述linux信号的捕捉。 我们通过前面的学习&#xff0c; 已经学习了信号的概念&#xff0c; 信号的产生&#xff0c; 信号的保存。 只剩下信号的处理。 而信号的处理我们应该着重注意的是第三种处理方式——信号的捕捉。 也就是说&#xff0c; 这篇文章…

基于yolov8的100种蝴蝶智能识别系统python源码+pt模型+训练日志+精美GUI界面

【算法介绍】 基于YOLOv8的100种蝴蝶智能识别系统是一个结合了深度学习和人工智能技术的先进工具&#xff0c;旨在提高生物多样性监测和保护领域的效率和精确度。该系统利用YOLOv8深度学习算法&#xff0c;通过9955张图片的训练&#xff0c;能够准确识别100种不同的蝴蝶类型&a…

15分钟学 Python 第37天 :Python 爬虫入门(三)

Day 37 : Python爬虫入门大纲 章节1&#xff1a;Python爬虫概述 1.1 什么是爬虫&#xff1f; 网页爬虫&#xff08;Web Crawler&#xff09;是一种自动访问互联网上网页并提取数据的程序。爬虫的作用包括搜索引擎索引内容、市场调查、数据分析等。 1.2 爬虫的工作原理 发起…