php购物网站开发设计与实现,沧州凯航网络技术有限公司,网页制作基础教程教案,两个男生是怎么做的细写前言
性能优化是目前在面试中被问到非常多的问题#xff0c;主要就是通过各种算和技术来提高页和应用的速度和用户体前端性能优化的问题并不好回答 在回答的时候干万不要掉进一个误区#xff0c;认为性能优化只是几个技术点而已#xff0c;事实上性能优化涉及到的是多方面的…
前言
性能优化是目前在面试中被问到非常多的问题主要就是通过各种算和技术来提高页和应用的速度和用户体前端性能优化的问题并不好回答 在回答的时候干万不要掉进一个误区认为性能优化只是几个技术点而已事实上性能优化涉及到的是多方面的 我们首先需要知道当一个项目出现性能问题时并不是突然发生了而是日积月累的结果所以对于一个项目来说最好的性能优化应该是从平时开发过程中就要去注意和实现的
三个层面
所以接下来我们会从三个层面来聊一聊性能优化的内容包括
项目架构项目开发项目部署
项目架构
为什么架构设计会影响性能呢 俗话说如果战略如果错误那么在战术再怎么优秀也无法弥补失败。在真实开发中性能优化并不是一朝一夕的事情,如果等到我们的项目出现严重的性能问题再去解决往往会成为一坨大粪代码
那么架构设计需要考虑哪些因素
主要是两方面的因素协同开发、模块解耦。
项目架构的因素
协同开发 这是指多个开发人员能够有效地一起工作减少冲突和重复工作 良好的架构可以帮助团队成员独立开发各自的模块而不必过于依赖其他人 另外当我们出现人员流动时(有人入职或者离职),可以快速的应对。 有人入职可以快速分配任务协作开发。 有人离职不影响其他模块的迭代项目有序推进。 这是一个好的项目架构的前提 模块解耦 解耦是指在设计和开发过程中使各模块之间的依赖最小化 能够使代码更加灵活 易于维护和扩展 这对于大型项目或者长期维护项目非常重要因为它降低了修改某个模块时对其他模块的影响尽量每个模块需要做到高内聚 低耦合
项目架构的实现一采用模块化的架构设计
Utils工具封装模块
将项目中通用的工具函数封装在utils目录中比如日期格式化函数、数据处理函数等这些工具函数应该是纯函数保证输入相同输出相同不依赖于外部状态将工具函数分模块管理并在index.js中集中导出以便在项目的其他地方直接导入使用
Store状态管理模块
在Vue项目中可以通过Pinia的模块化设计来管理状态每个页面或功能模块有自己的store模块如userStorejs、productStorejs等同时可以创建一个公共store模块commonStore.js用于存放应用级别的状态如全局loading状态等组件、页面的模块开发
Vue源码相关架构
从大的模块来说它的渲染器、编译器、响应式系统是划分清晰的响应式系统和编译器可以作为独立的模块来开发和使用渲染器依赖于响应式系统和编译器从小的模块来说它的调度系统、watch、watchEffect等又单独做了分离包括keep-alive、suspense、teleport都可以作为一个独立的模块来开发再集成到整个Vue项目中。
项目架构的实现二 其他方面的设计
Webpack和Vite的优化
代码分割CodeSplittingWebpack和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 reldns-prefetch”href//zhaimou.com”) 通过异步加载或延加载如使用async或defer减少第三方脚本对页面加载速度的影响。
预加载Preload和预获取Prefetch
使用linkrel“preload href”/path/to/resourceasscript/style来预加载关键资源 使用linkrel“prefetch” href”/path/to/resource来预获取未来可能需要的资源 文章到这里就结束了,更多作为自我学习,也希望对你有所帮助
