云音乐 XRN 平台性能优化实践

2023-12-05 19:39:27

引言

云音乐 XRN 平台是一个可视化的搭建页面平台，通过拖拽组件与设置组件，XRN 可以快速生成同时能在 React Native 与 Web 端渲染的页面。不管是 React Native 端还是 Web 端，我们都期望能够输出高性能的页面，带给用户更好的体验。本文将总结 XRN 平台在前端性能优化实践中的一些心得体会，包括项目背景、优化前的状态、优化思路、优化方案和优化效果等内容，旨在帮助读者了解 XRN 平台是如何通过优化提升前端性能的，并为其他前端项目提供一些优化经验。

项目背景

XRN 平台是一个相对较新的项目，于 2021 年 3 月份正式上线。上线初期，平台的性能问题并不突出，但随着平台功能的不断完善和用户量的不断增长，平台的性能问题也逐渐显现。主要表现为以下几个方面：

页面加载速度慢，尤其是复杂页面加载时间超过 10 秒；
页面交互卡顿，尤其是列表滑动和组件拖拽操作；
内存占用高，导致手机端 App 容易闪退。

优化前的状态

为了了解 XRN 平台的性能瓶颈，我们对平台进行了全面的性能测试。测试结果表明，XRN 平台的性能瓶颈主要集中在以下几个方面：

页面加载速度慢，主要原因是页面资源过多，导致浏览器加载时间过长；
页面交互卡顿，主要原因是组件渲染和更新过于频繁，导致浏览器和 React Native 端的渲染压力过大；
内存占用高，主要原因是组件过多，导致 React Native 端的内存占用过高。

优化思路

在了解了 XRN 平台的性能瓶颈之后，我们制定了以下几个方面的优化思路：

减少页面资源，优化资源加载顺序，缩短页面加载时间；
减少组件渲染和更新的频率，降低浏览器和 React Native 端的渲染压力；
减少组件的数量，优化组件的实现方式，降低 React Native 端的内存占用。

优化方案

基于上述优化思路，我们提出了以下几个方面的优化方案：

减少页面资源：
- 使用 tree shaking 技术，去除未使用的代码；
- 使用压缩工具，压缩 CSS 和 JavaScript 代码；
- 将资源按需加载，避免一次性加载所有资源。
优化资源加载顺序：
- 将 CSS 和 JavaScript 代码放在页面头部，以便浏览器尽快加载；
- 将图片和视频等资源放在页面底部，避免影响页面的首屏加载速度。
减少组件渲染和更新的频率：
- 使用 React 的 shouldComponentUpdate 生命周期函数，避免不必要的组件渲染；
- 使用 React 的 PureComponent 类，减少组件更新的次数；
- 使用 Immutable.js 库，使组件的 state 成为不可变对象，减少组件更新的次数。
减少组件的数量：
- 使用组合组件的方式，将多个小组件组合成一个大组件，减少组件的数量；
- 使用函数式组件，代替 class 组件，减少组件的数量。
优化组件的实现方式：
- 避免在组件中使用昂贵的操作，如循环和排序；
- 使用 memo 函数，避免不必要的函数调用；
- 使用 React.lazy 和 Suspense API，实现按需加载组件。