我的编程空间,编程开发者的网络收藏夹
学习永远不晚

怎么优化前端性能

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

怎么优化前端性能

这篇文章主要讲解了“怎么优化前端性能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么优化前端性能”吧!

一 引发性能问题原因?

引发性能问题的原因通常不是单方面缘由,特别是大型系统迭代多年后,长期积劳成疾造成,所以我们要必要分析找到症结所在,并按瓶颈优先级逐个击破,拿我们项目为例,大概分几个方面:

1 资源包过大

通过Chrome DevTools的Network标签,我们可以拿到页面实际拉取的资源大小(如下图):

怎么优化前端性能

经过前端高速发展,近几年项目更新迭代,前端构建产物也在急剧增大,因为要业务先行,很多同学引入库和编码过程并没有考虑性能问题,导致构建的包增至几十MB,这样带来两个显著的问题:

  • 弱(普通)网络下,首屏资源下载耗时长

  • 资源解压解析执行慢

对于第一个问题,基本上会影响所有移动端用户,并且会耗费大量不必要的用户带宽,对客户是一个经济上的隐式损失和体验损失。

对于第二个问题,会影响所有用户,用户可能因为等待时间过长而放弃使用。

下图展示了延迟与用户反应:

怎么优化前端性能

2 代码耗时长

在代码执行层面,项目迭代中引发的性能问题普遍是因为开发人员编码质量导致,大概以下几个缘由:

不必要的数据流监听

此场景在hooks+redux的场景下会更容易出现,如下代码:

const FooComponent = () => {   const data = useSelector(state => state.fullData);   return <Bar baz={data.bar.baz} />; };

假设fullData是频繁变更的大对象,虽然FooComponent仅依赖其.bar.baz属性,fullData每次变更也会导致Foo重新渲染。

双刃剑cloneDeep

相信很多同学在项目中都有cloneDeep的经历,或多或少,特别是迭代多年的项目,其中难免有mutable型数据处理逻辑或业务层面依赖,需要用到cloneDeep,但此方法本身存在很大性能陷阱,如下:

// a.tsx export const a = {     name: 'a', }; // b.tsx import { a } = b; saveData(_.cloneDeep(a)); // 假设需要克隆后落库到后端数据库

上方代码正常迭代中是没有问题的,但假设哪天 a 需要扩展一个属性,保存一个ReactNode的引用,那么执行到b.tsx时,浏览器可能直接崩溃!

Hooks之Memo

hooks的发布,给react开发带来了更高的自由度,同时也带来了容易忽略的质量问题,由于不再有类中明码标价的生命周期概念,组件状态需要开发人员自由控制,所以开发过程中务必懂得react对hooks组件的渲染机制,如下代码可优化的地方:

const Foo = () => { // 1. Foo可用React.memo,避免无props变更时渲染     const result = calc(); // 2. 组件内不可使用直接执行的逻辑,需要用useEffect等封装     return <Bar result={result} />; // 3.render处可用React.useMemo,仅对必要的数据依赖作渲染 };

Immutable Deep Set

在使用数据流的过程中,很大程度我们会依赖lodash/fp的函数来实现immutable变更,但fp.defaultsDeep系列函数有个弊端,其实现逻辑相当于对原对象作深度克隆后执行fp.set,可能带来一些性能问题,并且导致原对象所有层级属性都被变更,如下:

const a = { b: { c: { d: 123 }, c2: { d2: 321 } } }; const merged = fp.defaultsDeep({ b: { c3: 3 } }, a); console.log(merged.b.c === a.b.c); // 打印 false

3 排查路径

对于这些问题来源,通过Chrome  DevTools的Performance火焰图,我们可以很清晰地了解整个页面加载和渲染流程各个环节的耗时和卡顿点(如下图):

怎么优化前端性能

当我们锁定一个耗时较长的环节,就可以再通过矩阵树图往下深入(下图),找到具体耗时较长的函数。

怎么优化前端性能

诚然,通常我们不会直接找到某个单点函数占用耗时非常长,而基本是每个N毫秒函数叠加执行成百上千次导致卡顿。所以这块结合react调试插件的Profile可以很好地帮助定位渲染问题所在:

怎么优化前端性能

如图react组件被渲染的次数以及其渲染时长一目了然。

二 如何解决性能问题?

1 资源包分析

作为一名有性能sense的开发者,有必要对自己构建的产物内容保持敏感,这里我们使用到webpack提供的stats来作产物分析。

首先执行 webpack --profile --json > ./build/stats.json 得到 webpack的包依赖分析数据,接着使用  webpack-bundle-analyzer ./build/stats.json 即可在浏览器看到一张构建大图(不同项目产物不同,下图仅作举例):

怎么优化前端性能

当然,还有一种直观的方式,可以采用Chrome的Coverage功能来辅助判定哪些代码被使用(如下图):

怎么优化前端性能

红色表示未执行过的代码

最佳构建方式

通常来讲,我们组织构建包的基本思路是:

  • 按entry入口构建。

  • 一个或多个共享包供多entry使用。

而基于复杂业务场景的思路是:

  • entry入口轻量化。

  • 共享代码以chunk方式自动生成,并建立依赖关系。

  • 大资源包动态导入(异步import)。

webpack 4中提供了新的插件 splitChunks 来解决代码分离优化的问题,它的默认配置如下:

module.exports = {     //...     optimization: {         splitChunks: {             chunks: 'async',             minSize: 20000,             minRemainingSize: 0,             maxSize: 0,             minChunks: 1,             maxAsyncRequests: 30,             maxInitialRequests: 30,             automaticNameDelimiter: '~',             enforceSizeThreshold: 50000,             cacheGroups: {                 defaultVendors: {                     test: /[\\/]node_modules[\\/]/,                     priority: -10                 },                 default: {                     minChunks: 2,                     priority: -20,                     reuseExistingChunk: true                 }             }         }     } };

根据上述配置,其分离chunk的依据有以下几点:

  • 模块被共享或模块来自于node_modules。

  • chunk必须大于20kb。

  • 同一时间并行加载的chunk或初始包不得超过30。

理论上webpack默认的代码分离配置已经是最佳方式,但如果项目复杂或耦合程度较深,仍然需要我们根据实际构建产物大图情况,调整我们的chunk  split配置。

解决TreeShaking失效

“你项目中有60%以上的代码并没有被使用到!”

treeshaking的初衷便是解决上面一句话中的问题,将未使用的代码移除。

webpack默认生产模式下会开启treeshaking,通过上述的构建配置,理论上应该达到一种效果“没有被使用到的代码不应该被打入包中”,而现实是“你认为没有被使用的代码,全部被打入Initial包中”,这个问题通常会在复杂项目中出现,其缘由就是代码副作用(code  effects)。由于webpack无法判定某些代码是否“需要产生副作用”,所以会将此类代码打入包中(如下图):

怎么优化前端性能

所以,你需要明确知道你的代码是否有副作用,通过这句话判定:“关于&lsquo;副作用&rsquo;的定义是,在导入时会执行特殊行为的代码(修改全局对象、立即执行的代码等),而不是仅仅暴露一个  export 或多个 export。举例说明,例如 polyfill,它影响全局作用域,并且通常不提供 export。”

对此,解决方法就是告诉webpack我的代码没有副作用,没有被引入的情况下可以直接移除,告知的方式即:

  • 在package.json中标记sideEffects为false。

  • 或 在webpack配置中 module.rules 添加sideEffects过滤。

模块规范

由此,要使得构建产物达到最佳效果,我们在编码过程中约定了以下几点模块规范:

  • [必须] 模块务必es6 module化(即export 和 import)。

  • [必须] 三方包或数据文件(如地图数据、demo数据)超过 400KB 必须动态按需加载(异步import)。

  • [禁止] 禁止使用export * as方式输出(可能导致tree-shaking失效并且难以追溯)。

  • [推荐] 尽可能引入包中具体文件,避免直接引入整个包(如:import { Toolbar } from '@alife/foo/bar')。

  • [必须] 依赖的三方包必须在package.json中标记为sideEffects: false(或在webpack配置中标记)。

2 Mutable数据

基本上通过Performance和React插件提供的调试能力,我们基本可以定位问题所在。但对于mutable型的数据变更,我这里也结合实践给出一些非标准调试方式:

冻结定位法

众所周知,数据流思想的产生缘由之一就是避免mutable数据无法追溯的问题(因为你无法知道是哪段代码改了数据),而很多项目中避免不了mutable数据更改,此方法就是为了解决一个棘手的mutable数据变更问题而想出的方法,这里我暂时命名为“冻结定位法”,因为原理就是使用冻结方式定位mutable变更问题,使用相当tricky:

constob j= {     prop: 42 };  Object.freeze(obj);  obj.prop=33; // Throws an error in strict mode

Mutable追溯

此方法也是为了解决mutable变更引发数据不确定性变更问题,用于实现排查的几个目的:

  • 属性在什么地方被读取。

  • 属性在什么地方被变更。

  • 属性对应的访问链路是什么。

如下示例,对于一个对象的深度变更或访问,使用 watchObject  之后,不管在哪里设置其属性的任何层级,都可以输出变更相关的信息(stack内容、变更内容等):

const a = { b: { c: { d: 123 } } }; watchObject(a); const c =a.b.c; c.d =0; // Print: Modify: "a.b.c.d"

watchObject 的原理即对一个对象进行深度 Proxy 封装,从而拦截get/set权限,详细可参考:  https://gist.github.com/wilsoncook/68d0b540a0fea24495d83fc284da9f4b

避免Mutable

通常像react这种技术栈,都会配套使用相应的数据流方案,其与mutable是天然对立的,所以在编码过程中应该尽可能避免mutable数据,或者将两者从设计上分离(不同store),否则出现不可预料问题且难以调试

3 计算&渲染

最小化数据依赖

在项目组件爆炸式增长的情况下,数据流store内容层级也逐渐变深,很多组件依赖某个属性触发渲染,这个依赖项需要尽可能在设计时遵循最小化原则,避免像上方所述,依赖一个大的属性导致频繁渲染。

合理利用缓存

(1)计算结果

在一些必要的cpu密集型计算逻辑中,务必采用 WeakMap 等缓存机制,存储当前计算终态结果或中间状态。

(2)组件状态

对于像hooks型组件,有必要遵循以下两个原则:

  • 尽可能memo耗时逻辑。

  • 无多余memo依赖项。

避免cpu密集型函数

某些工具类函数,其复杂度跟随入参的量级上升,而另外一些本身就会耗费大量cpu时间。针对这类型的工具,要尽量避免使用,若无法避免,也可通过  “控制入参内容(白名单)” 及 “异步线程(webworker等)”方式做到严控。

比如针对 _.cloneDeep ,若无法避免,则要控制其入参属性中不得有引用之类的大型数据。

另外像最上面描述的immutable数据深度merge的问题,也应该尽可能控制入参,或者也可参考使用自研的immutable实现:https://gist.github.com/wilsoncook/fcc830e5fa87afbf876696bf7a7f6bb1

const a = { b: { c: { d: 123 }, c2: { d2: 321 } } }; const merged = immutableDefaultsDeep(a, { b: { c3: 3 } }); console.log(merged === a); // 打印 false console.log(merged.b.c === a.b.c); // 打印 true

感谢各位的阅读,以上就是“怎么优化前端性能”的内容了,经过本文的学习后,相信大家对怎么优化前端性能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

怎么优化前端性能

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Web前端:Web前端性能优化

编程学习网:脚本简单地说就是一条条的文字命令,这些文字命令是可以看到的(如可以用记事本打开查看、编辑),脚本程序在执行时,是由系统的一个解释器,将其一条条的翻译成机器可识别的指令,并按程序顺序执行。因为脚本在执行时多了一道翻译的过程,所以它比二进制程序执行效率要稍低一些。
Web前端:Web前端性能优化
2024-04-23

前端性能优化应该怎么做?

原本项目打包出来的JS文件只有一个bundle.js,涵盖了整个项目的业务代码,对于业务方来说来说,可能访问最多的就是新增和详情两个页面,所以对于首屏加载是不友好的,应该优化成访问哪个页面加载对应页面的资源,基于Ice2.0调研,将路由中的

前端性能优化心法

这篇文章想要从流程方面和具体的技术细节上对软件性能优化上遇到的问题做一些总结和分类,以方便在后续类似的场景下可以提供给开发者一个参考。

前端性能优化实战

相信前端的同学对于 Performance API 应该都不陌生,通常我们将浏览器提供的可以进行测算和采集的 API 统称为 Performance API,该类型的对象可以通过调用只读属性 window.performance 来获得。

如何优化前端性能?

本文基于Quick BI(数据可视化分析平台)历年架构变迁中性能的排查、解决和总结出的“个性”问题,尝试总结整个前端层面相对“共性”的问题,提供一些前端性能解决思路。

Web前端性能优化思路

在实际应用开发过程中,因为受限于开发成本,所以需要平衡优化所花的代价与其对应产生的成效。可以有针对性地对性能瓶颈进行分析和处理,同时也需要避免引入不必要的优化措施,以确保最终优化效果。
Web前端开发2024-12-02

前端性能优化——图片篇

图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以对图片进行优化势在必行。

前端工程化之H5性能优化篇

导读:从粗糙到精致,从简单到复杂,全球互联网Web App(网页应用)平均体积已增压到1.6Mb,随着音视频等富媒体内容的流量池膨胀,终端设备上的用户对网页装载速度尤其敏感。页面不能做到秒开,就会有大量用户选择离开。重视并改善网站性能,优化即时网页装载时间,加
前端工程化之H5性能优化篇
2017-09-19

如何进行Web前端性能优化

这篇文章给大家介绍如何进行Web前端性能优化 ,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献。广为人知的优
2023-06-08

Vue实现原理+前端性能优化

Vue在前端框架中的地位就像曾经的jQuery,由于其简单易懂、开发效率高,已经成为了前端工程师必不可少的技能之一。
Vue代码前端2024-12-03

前端性能优化之关键路径渲染优化

当 DOM 树和 CSSOM 树都构建完成的时候,他们就会合并在一起构建 render tree,因为要在页面上渲染不仅需要这个页面的结构,也需要知道整个页面的样式,所以 render tree 是 DOM 树和 CSSOM 树的结合体,有

京东PLUS前端H5性能优化实践

随着移动互联网的发展,用户对产品的使用体验要求越来越高。H5 作为业务的重要载体,应用非常广泛,如何把控好 H5 的性能是一门重要的工作。因此 H5 页面性能是一个非常核心的用户体验指标。

如何提高web前端的性能优化

如何提高web前端的性能优化,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。前端性能优化是一个不断追求的过程,前面的文章虽然讲解了一些性能优化,但是关于性能优化的路还有很长,很多
2023-06-08

近期对前端性能优化的总结

希望大家都能找到自己合适的优化方向,把项目优化的妥妥的。
前端优化2024-12-01

编程热搜

目录