前端框架性能优化篇

Ethan Evergreen

于 2024-06-06 21:42:36 发布

阅读量1.2k

点赞数 24

文章标签：前端框架性能优化前端

本文链接：https://blog.csdn.net/A_fork/article/details/139510601

版权

今天不聊技术，聊一聊前端如何做性能优化

Vue如何做性能优化？

Vue.js应用的性能优化可以从多个层面进行，以下是一些常见的优化方案：

路由懒加载：通过动态导入（如使用import()）来延迟加载那些非初始页面的组件，直到用户访问这些路由时才加载相应的组件代码，减少首屏加载时间。
使用Keep-Alive缓存组件：对于切换频率高的页面或组件，可以使用<keep-alive>标签包裹，这样当组件切换出去时，它的状态会被缓存下来，下次再进入时可以直接复用，避免重新渲染。
优化v-for指令：
- 避免在v-for内使用v-if进行条件渲染，可以考虑使用计算属性预先过滤数据。
- 为列表中的每一项元素提供唯一的key属性，帮助Vue更高效地进行DOM diff。
组件拆分与复用：合理拆分组件，减少不必要的渲染，提高代码复用性和可维护性。
使用事件委托：在使用v-for渲染列表时，避免为每个元素单独绑定事件监听器，可以将事件监听器绑定到父元素上并通过事件冒泡来处理，减少事件监听器的数量。
优化计算属性和侦听器：尽量使用计算属性（computed）代替方法（methods），因为计算属性有缓存机制，只有依赖发生变化时才会重新计算。对于需要监听数据变化执行的操作，合理使用watch，注意避免在其中执行耗时操作。
图片懒加载：对于长列表或页面中的大量图片，使用懒加载技术，即在图片进入可视区域时才开始加载，减少初次加载时间。
预渲染和SSR：预渲染（Prerendering）可以在构建时生成静态HTML文件，对于SEO友好且首屏加载快；服务器端渲染（Server-Side Rendering, SSR）可以进一步提升首屏加载速度和SEO。
Bundle优化：通过Webpack配置进行代码分割、压缩、Tree Shaking等，减少最终打包文件的体积。
使用Vue性能分析工具：如Vue DevTools的Performance面板，可以帮助识别性能瓶颈，比如过度渲染、长时间的渲染时间等。
限制监听器数量：避免在data上绑定过多的响应式属性，减少不必要的watcher创建。
长列表性能优化：对于展示大量数据的列表，可以使用虚拟滚动（Virtual Scrolling）技术，只渲染可视区域内的元素，大大减少DOM节点数量。

结合以上方案，可以显著提升Vue应用的性能和用户体验。

react如何做性能优化？

React应用的性能优化策略是多方面的，旨在减少不必要的渲染、提升首次加载速度和提高交互响应能力。以下是一些关键的优化方法：

使用PureComponent或React.memo：对于无需频繁重渲染的组件，可以继承PureComponent或使用React.memo进行包裹。它们会对props进行浅比较，避免当props未改变时不必要的渲染。
利用React.Fragment避免额外的DOM节点：使用<>...</>或<React.Fragment></React.Fragment>包裹子元素，避免因额外的DOM节点造成的渲染性能损耗。
按需加载（Code Splitting）：通过Webpack等打包工具实现代码分割，使得应用程序可以按需加载代码块，减少初始加载时间。
使用Suspense和Lazy进行懒加载：React.lazy配合React.Suspense可以实现组件的懒加载，即在需要时才加载对应的组件代码。
优化state管理：避免在顶层组件存储所有状态，考虑使用Redux、MobX或Context API进行细粒度的状态管理，减少不必要的状态传递和更新。
使用React.memo和useCallback避免不必要的函数创建：对于传递给子组件的函数，使用useCallback确保函数引用在依赖项不变时保持稳定，避免子组件不必要的重新渲染。
减少渲染次数：利用shouldComponentUpdate生命周期方法（在类组件中）或React.memo的第二个参数（在函数组件中）来控制组件何时渲染。
虚拟列表（Virtualization）：对于长列表，使用虚拟滚动库如react-virtualized或react-window仅渲染可视区域内的列表项，显著减少DOM节点数量。
图片和资源优化：对图片进行压缩、选择合适的图片格式，并利用懒加载技术按需加载图片，减少页面初次加载时间。
事件防抖和节流：在处理滚动、窗口大小调整等高频触发的事件时，使用防抖(debounce)或节流(throttle)技术减少事件处理函数的执行频率。
生产环境构建：确保在生产环境中使用React的生产版本构建，这通常包括代码压缩、去除console.log等开发时代码，以及对模块进行优化。
性能监控：使用React DevTools的Performance工具监控组件渲染和更新性能，识别瓶颈并针对性优化。

通过上述方法的综合运用，可以有效提升React应用的运行效率和用户体验。

微信小程序性能优化方案！

首先在微信小程序官网里明确指出微信小程序如何做性能优化，如下图：

网址（微信开放文档）

下面我列举和总结了官网列举了性能优化方案：

微信小程序的性能优化主要围绕减少启动加载时间、提升页面渲染效率、降低内存占用等方面展开。以下是一些关键的优化策略：

分包加载：利用小程序的分包加载功能，将代码和资源按模块拆分成不同的包，使得首次加载时只下载必要的基础包，其他包按需加载，加快启动速度。
按需引入组件和接口：尽量减少页面初始化时引入的组件和API，对于不立即使用的组件和接口采用动态引入的方式。
优化资源加载：
- 图片懒加载：只在图片即将进入视口时加载，减少初次加载时间。
- 资源压缩：对图片、音频、视频等资源进行压缩，减小文件大小。
- 使用WebP等高效格式：相比JPEG和PNG，WebP格式通常能提供更好的压缩率。
数据预加载：在合适的时机预加载数据，如在页面切换动画期间，减少用户等待时间。
减少网络请求：
- 合并请求：将多个小请求合并为一个大请求，减少请求次数。
- 缓存策略：合理使用本地缓存，如wx.setStorageSync，避免重复请求。
优化渲染性能：
- 减少setData的调用：setData是导致界面更新的核心，频繁调用会阻塞UI线程。尽量批量更新数据，避免不必要的渲染。
- 使用WXS：WXS（WeiXin Script）是一种运行在客户端的小程序脚本语言，可以减少与逻辑层的数据传输，提升性能。
- 节流与防抖：在处理滚动、拖动等高频事件时，使用节流和防抖技术减少处理函数执行频率。
内存泄漏检测与处理：
- 注意清理不再使用的定时器、监听器等资源。
- 使用小程序的性能监控工具，定期检查内存使用情况，及时发现并修复内存泄漏问题。
避免使用复杂的样式和布局：尽量使用简单的布局结构和CSS样式，避免使用过于复杂的选择器和过多的层级嵌套，减少渲染计算负担。
异步任务和页面卸载处理：确保所有异步操作（如网络请求、setTimeout等）在页面卸载时能够被正确取消，避免内存泄漏和无效操作。