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

在这里插入图片描述

前言

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

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

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

三个层面

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

  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.rhkb.cn/news/440187.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【c++】string类 (一)

简介 由于c的历史包袱&#xff0c;c要兼容c语言&#xff0c;c的字符串要兼容c语言&#xff0c;在 C 中&#xff0c;字符串通常使用两种主要的方式来表示&#xff1a; C风格字符串&#xff08;C-style strings&#xff09;&#xff1a; 依然是以 \0 结尾的字符数组。这种表示方…

掌握嵌套子查询:复杂 SQL 中 * 列的准确表列关系

在日常开发中&#xff0c;我们常常需要对复杂的 SQL 进行数据血缘分析。 本文重点讨论在具有 * 列的嵌套子查询中建立表和列之间正确关系的挑战。使用 Teradata SQL 代码示例来说明该过程。 本文聚焦于一个别名为 SUBSCRIBER_ 的子查询及其派生的列&#xff0c;这些列在外层查…

融媒体服务中PBO进行多重采样抗锯齿(MSAA)

如果不理解pbo 那先去了解概念&#xff0c;在此不再解释&#xff0c;这是我为了做融合服务器viewpointserver做的一部分工作&#xff0c;融合服务器的功能是将三维和流媒体&#xff0c;AI融合在一起&#xff0c;viewpointserver会直接读取三维工程的文件&#xff0c;同时融合rt…

英语词汇小程序小程序|英语词汇小程序系统|基于java的四六级词汇小程序设计与实现(源码+数据库+文档)

英语词汇小程序 目录 基于java的四六级词汇小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布道师&a…

初始项目托管到gitee教程,开箱即用

0.本地仓库与远程仓库关联&#xff08;需先在gitee创建仓库&#xff09; ①打开powershell生成ssh key ssh-keygen -t ed25519 -C "Gitee SSH Key"-t key 类型-C 注释 生成成功如下&#xff0c;并按下三次回车 ②查看公私钥文件 ls ~/.ssh/输出&#xff1a; id_…

vulnhub-Web Developer 1靶机

vulnhub&#xff1a;Web Developer: 1 ~ VulnHub 导入靶机&#xff0c;放在kali同网段&#xff0c;扫描 靶机在192.168.114.129&#xff0c;扫描端口 有网站服务&#xff0c;访问 没什么东西&#xff0c;扫目录 真不少&#xff0c;访问一下&#xff0c;也只是一些普通的Wordpr…

【IEEE PDF eXpress】格式不对

目录 一、问题二、解决方法 一、问题 word的文档&#xff0c;用IEEE PDF eXpress网站生成pdf后&#xff0c;提交论文出现错误&#xff1a; Document validation failed due to the following errors: Content exceeds IEEE template margins for its format (Page 1:Bottom).…

我对软件工程的理解

1 引言 从事软件行业这么年&#xff0c;写了10年代码&#xff0c;又从事了多年的项目产品方面的工作&#xff0c;一些每天用到的软件工程的方法&#xff0c;虽然天天都在用但一些概念总感觉似是而非&#xff0c;正好借假期的时间&#xff0c;好好整理下&#xff0c;以供自己或…

【Golang】Go语言中时间time相关处理方法

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

认识动态规划算法和实践(java)

前言 动态规划算法里面最有意思的一个东西之一。动态规划初学肯定会有一定晦涩难懂。如果我们去网上搜索&#xff0c;动态规划的资料&#xff0c;它一开始都是将很多的理论&#xff0c;导致会认为很难&#xff0c;但是这个东西实际上是有套路的。 动态规划的英语是Dynamic Pr…

MySQL之分库分表后带来的“副作用”你是怎么解决的?

目录标题 一、垂直分表后带来的隐患二、水平分表后带来的问题1.多表联查问题2.增删改数据问题3.聚合操作问题 三、垂直分库后产生的问题1.跨库join问题2.分布式事务问题3.部分业务库依然存在的性能问题 四、水平分库后需要解决的问题1.聚合操作和连表问题2.数据分页问题3.ID主键…

10款好用的开源 HarmonyOS 工具库

大家好&#xff0c;我是 V 哥&#xff0c;今天给大家分享10款好用的 HarmonyOS的工具库&#xff0c;在开发鸿蒙应用时可以用下&#xff0c;好用的工具可以简化代码&#xff0c;让你写出优雅的应用来。废话不多说&#xff0c;马上开整。 1. efTool efTool是一个功能丰富且易用…

全球IP归属地查询-IP地址查询-IP城市查询-IP地址归属地-IP地址解析-IP位置查询-IP地址查询API接口

IP地址城市版查询接口 API是指能够根据IP地址查询其所在城市等地理位置信息的API接口。这类接口在网络安全、数据分析、广告投放等多个领域有广泛应用。以下是一些可用的IP地址城市版查询接口API及其简要介绍 1. 快证 IP归属地查询API 特点&#xff1a;支持IPv4 提供高精版、…

k8s 中微服务之 MetailLB 搭配 ingress-nginx 实现七层负载

目录 1 MetailLB 搭建 1.1 MetalLB 的作用和原理 1.2 MetalLB功能 1.3 部署 MetalLB 1.3.1 创建deployment控制器和创建一个服务 1.3.2 下载MealLB清单文件 1.3.3 使用 docker 对镜像进行拉取 1.3.4 将镜像上传至私人仓库 1.3.5 将官方仓库地址修改为本地私人地址 1.3.6 运行清…

【前端】-音乐播放器(源代码和结构讲解,大家可以将自己喜欢的歌曲添加到数据当中,js实现页面动态显示音乐)

前言&#xff1a;音乐播放器是前端开发中的一个经典项目&#xff0c;通过它可以掌握很多核心技术&#xff0c;如音频处理、DOM操作、事件监听、动画效果等。这个项目不仅能提升前端开发的技能&#xff0c;还能让开发者深入理解JavaScript与HTML的协同作用。 页面展示&#xff1…

Web安全 - 文件上传漏洞(File Upload Vulnerability)

文章目录 OWASP 2023 TOP 10导图定义攻击场景1. 上传恶意脚本2. 目录遍历3. 覆盖现有文件4. 文件上传结合社会工程攻击 防御措施1. 文件类型验证2. 文件名限制3. 文件存储位置4. 文件权限设置5. 文件内容检测6. 访问控制7. 服务器配置 文件类型验证实现Hutool的FileTypeUtil使用…

Python中的机器学习:从入门到实战

机器学习是人工智能领域的一个重要分支&#xff0c;它通过构建模型来使计算机从数据中学习并做出预测或决策。Python凭借其丰富的库和强大的生态系统&#xff0c;成为了机器学习的首选语言。本文将从基础到实战&#xff0c;详细介绍如何使用Python进行机器学习&#xff0c;涵盖…

【汇编语言】寄存器(CPU工作原理)(二)—— 汇编指令的基础操作

文章目录 前言正文——&#xff08;一气呵成解决本文内容&#xff09;结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程的角度出发就太片面了&#xff0c;其实学习汇编语言可以深入理解计算机底…

Android Framework AMS(02)AMS启动及相关初始化5-8

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要涉及systemserver启动AMS及初始化AMS相关操作。同时由于该部分内容过多&#xff0c;因此拆成2个章节&#xff0c;本章节是第二章节&…

LabVIEW提高开发效率技巧----使用动态事件

在LabVIEW开发过程中&#xff0c;用户交互行为可能是多样且不可预知的。为应对这些变化&#xff0c;使用动态事件是一种有效的策略。本文将从多个角度详细介绍动态事件的概念及其在LabVIEW开发中的应用技巧&#xff0c;并结合实际案例&#xff0c;说明如何通过动态事件提高程序…