admin管理员组文章数量:1659356
爱奇艺视频生产智能云平台系统在今年进行了一次重大升级，前端团队也趁此机会将底层技术架构从三年前的 Arm.js（内部MVC框架）+ Java BFF + Velocity 模板完全切换到了 Vue.js + Node.js BFF 的技术栈。
新的前端应是一个拥有超过十个业务模块的单页面应用，每个模块已经通过路由懒加载进行了拆分，同时公共的第三方依赖也拆分到了单独的 Vendor 文件。不过在上线试用初期，用户还是普遍反馈页面打开速度较老版本有比较明显的下降，存在几秒钟不等的白屏等待时间。
为了提升用户体验和使用效率，团队内部对新版前端应用进行了多次优化，最终效果提升非常显著。本文的主要内容就是针对中后台 Web 应用性能的分析思路及解决方案的总结分享。
问题梳理
我们先通过提问题的方式，从资源文件加载、页面渲染性能、接口响应速度等三个方面分别列出了一些可能存在性能瓶颈的环节。
资源加载问题
在一个复杂的 Web 应用中，通常会依赖很多 JS/CSS/Images 等资源文件。如何在最短时间内获取页面所需的最小资源，我们需要考虑以下几个问题：
源码中有无冗余的模块？是否进行了压缩、合并等操作？
服务器响应及网络传输速度是否正常？有没有最大化利用浏览器的并发请求？
资源文件的缓存策略是否合理？是否每次发布上线都需要重新请求所有文件？
首次页面渲染是否下载了不必要的资源文件？每次渲染所需的资源文件能不能提前加载？
页面渲染问题
由于 JS 是在单线程中执行，而 Vue.js 框架的大部分渲染任务都在浏览器端完成。为了解决白屏、卡顿等问题，我们需要考虑以下几个问题：
是否可以通过骨架屏等方式提前渲染核心布局？
主线程是否存在非常耗时的长任务？是否可以进行任务分片、延迟渲染？
是否存在时间复杂度过高的算法？是否存在大量重复计算？
是否重复初始化相同的对象？是否存在内存泄露？
接口速度问题
在列表查询等依赖后台数据展示的页面，接口的响应速度也至关重要。由于我们通过 Node.js 搭建的 BFF 来整合多个服务提供方的接口，因此可能存在以下几个问题：
后端服务提供的接口速度是否响应慢？网关、数据库、索引等服务是否正常？
针对实时性要求较低的数据，是否可以利用缓存服务？
同时调用多方接口时，是否最大化进行并发请求？非必要接口是否可以单独发起请求？
与浏览器脚本一样，是否存在复杂算法、内存泄露等问题代码？
解决方案
带着以上的这些问题，我们开始着手对现有的应用进行一次详细的检查，逐步定位影响性能的关键问题并一一进行解决。
资源加载优化
Webpack 构建问题分析
由于我们的项目通过 Webpack 4.x 构建，因此为了分析资源文件的个数及大小，采用了 Webpack 插件webpack-bundle-analyzer对产出的静态资源文件进行了统计，如下图所示（截取了几个体积较大的文件）。
根据统计我们发现了以下几个主要问题：
缓存问题。每次改动任意代码，所有生成的 JS/CSS 等文件的 Hash 值都发生了变化，这意味着每次发布上线，浏览器都需要重新请求全部资源。
文件大小。通过 node_modules 生成的 chunk-vendor 原始大小超过 1.5 M。其中，体积最大的是 ElementUI，超过 650K，其次是 moment.js，体积超过 250K。剩余部分则由 Vue.js、Lodash 等基础类库组成。
重复打包。部分业务模块对应的 chunk 文件原始大小在 500K 左右。其原因是使用到了 d3，echarts 等依赖的模块，直接将它们打包到了对应模块中。而这些第三方库，占整个文件大小的 70% 左右。
资源个数。由 Webpack 自动生成了多个模块间的公共 chunk，大
版权声明：本文标题：优化无止境，爱奇艺中后台 Web 应用性能优化实践 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729834105a1214286.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论