掘力计划第25期 性能专场精彩内容回顾

9月23日,"掘力计划"第25期沙龙活动以"性能专场"为主题在北京举行。本次活动邀请了多位技术专家,就Web前端性能优化等话题进行分享交流。现场反响热烈,内容丰富多彩。本文对本次活动的5场精彩分享进行简要回顾。

分享一:《前端研发全流程的性能监控实践》

本次分享由字节跳动架构前端 APM 团队的李俊安和嵇晓濛两位讲师进行。他们介绍了字节跳动在前端性能监控方面的探索与实践。

首先,李俊安讲师解析了前端研发的典型流程,提出了从线上监控逐步向左侧扩展的需求。这需要在研发流程的更早阶段进行监控,以尽早发现问题。具体来说,可以从全量发布扩展到灰度发布,以小流量环境测试新版本;进一步可以延伸到持续集成环节,在各个节点实施监控。

然后,嵇晓濛讲师详细介绍了灰度发布阶段的监控实践。重点在于区分灰度数据,按比例调整报警阈值,关注版本引入的新问题等。另外还介绍了在持续集成环节的页面快照、端到端测试等方面的监控做法。这些举措可以尽早发现问题,减少对用户的影响。

最后,两位讲师表示逐步左移监控点,可以在更早研发阶段捕捉问题,从而提升产品质量,对其他前端团队具有借鉴意义。

分享二:《基于定制Chromium的前端内存泄露监控分析实践》

本场由字节跳动 Web Infra 团队的庞进林主讲。他首先分析了 Electron 应用中内存泄露的业务和技术背景。

然后介绍了构建可以还原崩溃场景的内存监控指标体系、自动化内存测试方案,以及扩展 DevTools 帮助内存调试的实践。这些举措可以帮助发现和定位内存泄露问题。

最后指出,内存优化不是唯一目标,还需要考虑应用的安全性、稳定性等因素。但本次分享的经验对其他 Electron 和 WebView 开发者仍具有很好的参考价值。

分享三:《"抛弃"技术指标,构建真正意义上的用户体验评价体系》

本场由字节跳动架构前端 APM 团队的彭莉和张皓洋主讲。他们分析了现有监控系统存在的问题,即功能和数据孤岛,难以反映真实用户体验。

为此,他们构建了基于用户视角的单次绘画满意度模型,可以评估各种因子对用户情绪的影响;还实现了页面和系统整体维度的量化指标,可以更全面反映性能和稳定性。

这种以用户体验为中心的监控评估体系,可以生成有价值的提示,指导开发者优化体验、提高效率。

分享四:《跨端框架的性能优化实践》

本场由 DCloud 公司 CTO 崔红保主讲。他首先从功能、扩展性、性能等维度解析了选择跨端框架的考量因素。

然后剖析了跨端框架的共性性能痛点,主要来自 Web 渲染层的问题。目前主流方案是引入原生组件规避问题,但原生组件带来了新的 visual 和通信方面的性能损耗。

为实现与原生应用媲美的性能,UTS 框架采用 TS + Vue 开发,通过编译的方式生成逻辑层和视图层同构的代码,消除了通信损耗。这是当前跨端框架朝原生应用性能靠拢的一个突破。

分享五:《npm包管理性能优化实践》

本场分享由字节跳动 Node.js Infra 团队的李世民进行。他首先介绍了 npm 的组成部分,以及 npm CLI 与 npm registry之间的交互过程。

然后重点介绍了 npm 性能优化的实践,包括:压缩 metadata 加速下载;利用缓存避免重复请求;优化存储结构减少查询;使用全球 CDN 提高下载速度等。这些优化可以显著提升 npm 的性能。

最后指出,虽然各种 npm 客户端都在优化性能,但从社区长远发展考虑,npm 更关注安全性和生态系统的健康可持续发展。性能并不是 npm 优化的唯一目标。

总结

本次"掘力计划"性能专场活动内容丰富,涵盖了前端性能监控、npm 优化、跨端框架、用户体验评估等多个方面。现场反响热烈,与会者表示收获很大。相信这些宝贵经验将对业内前端技术的发展产生积极影响。期待后续"掘力计划"能持续推出更多高质量的技术沙龙。

相关推荐
HwJack2035 分钟前
HarmonyOS批量数据与性能优化实战:万条数据入库与不卡 UI 的查询
ui·性能优化·harmonyos
长征coder3 小时前
【无标题】
java·性能优化
CharlesYu013 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
昇腾知识体系3 小时前
昇腾 950 RegBase 性能优化:从 msprof 采数到优化手法
人工智能·华为·性能优化·知识图谱
平头哥技术团队3 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰5 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面5 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方5 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结5 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言6 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码