SegmentFault 思否技术周刊 Vol.61 — 如何做好性能优化?

智善
• 阅读 2794

本期技术周刊一起看看如何做好性能优化?,欢迎大家阅读 ~

文章推荐

《近期对前端性能优化的总结》 作者:南城大前端

前端性能优化不管是在面试中还是在实际开发过程中,都是每一个前端开发工程师都必不可少的能力。本文总结本人多年开发经验中对前端性能优化的理解,希望对大家有所帮助,因涉及的优化方向较多,针对某些细节不再详细说明,大家有兴趣的可深入了解,话不多说,正文开始。

《性能优化必备——火焰图》作者:咕咕鸡

本文主要介绍火焰图及使用技巧,学习如何使用火焰图快速定位软件的性能卡点。
结合最佳实践实战案例,帮助读者加深刻的理解火焰图构造及原理,理解 CPU 耗时,定位性能瓶颈。

当前现状
假设没有火焰图,你是怎么调优程序代码的呢?让我们来捋一下。

《性能优化进阶:让你的移动端网页 1s 呈现》作者:wxp686

现在的消费者越来越依赖移动设备来访问内容和服务,这比以往任何时候都要求更高。当他们权衡您网站上的体验时,他们不仅将您与您的竞争对手进行比较,还会在使用完后对您的应用进行评级。

但是很多网站给用户带来的体验并不太好,以致造成潜在客户流失,所以,性能是留住用户的关键。

《前端晋升答辩-性能优化篇范式》作者:胡哥有话说

本文力争为你参加晋升答辩时,提供一个论述性能优化相关工作的范式。简单点儿来说,就是按照这个范式文来准备、阐述,就可以博得晋升评委的认可与喜爱。

痴迷写页面UI的前端千篇一律,懂得量化收益的前端万里挑一。

现在已经不是刀耕火种的前端原始时代了,能够高保真实现页面UI是每一个前端的基本技能,“没有功劳还有苦劳”这句话也不再适用于前端晋升了。你辛苦的工作可能会看在直属 leader 的眼里,知道你为了业务天天熬夜加班,会让你年终绩效更好一些,但是在晋升答辩中,尤其是高职级同学的晋升,基本都是跨部门、或通道评委评审的,他们是不会认为这些重复性劳动、像流水线一样的工作有什么重要价值。

如何让他们在短短时间内认识到你的工作价值呢,这是你在晋升之前要思考的问题!

《使用 normalizr 进行复杂数据转换》作者:jump__jump

笔者曾经开发过一个数据分享类的小程序,分享逻辑上类似于百度网盘。当前数据可以由被分享者加工然后继续分享(可以控制数据的过期时间、是否可以加工数据以及继续分享)。

分享的数据是一个深度嵌套的 json 对象。在用户读取分享数据时存入小程序云数据库中(分享的数据和业务数据有差异,没使用业务服务器进行维护)。如果拿到数据就直接存储的话,很快云数据库就会变得很大,其次我们也没办法分析各项和检索各项子数据给予分享者。

《我是如何做到百万数据跑批半小时结束》作者:Issues

跑批任务是要通过定时的去处理这些数据,不能因为其中一条数据出现异常从而导致整批数据无法继续进行操作,所以它必须是健壮的;并且针对于异常数据我们后续可进行补偿处理,所以它必须是可靠的;并且通常跑批任务要处理的数据量较大,我们不能让它处理的时间过于久,所以我们必须考虑其性能处理;总结一下,我们跑批处理的应用程序需要做到的要求如下

健壮性:针对于异常数据,不可导致程序崩溃
可靠性:针对于异常数据,我们后续可跟踪
大数据量:针对于大数据量,可在规定的时间内进行处理完毕
性能方面:必须执行在规定的时间内处理完从而避免干扰任何其他应用程序的正常运行

《「性能优化」为虚拟列表增加离屏渲染和缓存,提升渲染速度》作者:皮小蛋

在虚拟列表中的图片缩略图增加离屏渲染和压缩并缓存的能力, 作为功能增强。
优化的目的:
支持 2000 sku+ 可以同时正常操作;
进入页面加载时间在 2 - 3s 以内,滚动展示不卡顿,操作反馈正常;
更快的页面加载速度;

主要的处理:
增加一个用离屏渲染压缩图片的 Avatar 组件, 并替换原有的 Avatar 组建;
增加了 LRU Cache 来缓存压缩过后的图片;
实验性的加入 Web worker 防止压缩图片时主线程卡顿;
使用更强大的 react-virtualized 代替原本的 react-virtual-list
下文主要分享方案设计以及核心代码的实现, 希望对大家有所帮助。

《一顿骚操作版本号比较性能提升 300%》作者:Gopher指北

CompareVersion 的逻辑清晰且简单,而根据火焰图知性能主要消耗在 strings.Split 函数上,所以老许的第一目标是尝试优化 strings.Split 函数。

每当此时老许首先想到的方法就是百度大法和谷歌大法,最后在某篇文章中发现 strings.FieldsFunc 函数,根据该文章描述,strings.FieldsFunc 函数分割字符串的速度远快于 strings.Split 函数。那么我们到底能不能使用 strings.FieldsFunc 函数替换 strings.Split 函数请看下面测试结果。

问答推荐

Unanswered:

Most frequent:


# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。

每周二更新,欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

如有问题可以添加小姐姐微信~

SegmentFault 思否技术周刊 Vol.61 — 如何做好性能优化?

点赞
收藏
评论区
推荐文章
凯特林 凯特林
4年前
Vue 项目性能优化—实践指南
Vue项目性能优化—实践指南前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效
Dax Dax
4年前
前端性能优化
前端性能优化1、减少资源的请求次数和大小压缩合并js和css文件,减少http请求次数和请求资源的大小;在项目中使用webpackglup等打包编译工具2、尽量使用字体图标或者svg图标代替传统的png(jpg)图渲染更快,减少代码体积,且放大不会出现变形等3、使用图片懒加载目的是减少页面第一次加载的http请求次数,实现思路:
Souleigh ✨ Souleigh ✨
4年前
Vue 性能优化
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
爱丽丝13 爱丽丝13
5年前
聊聊前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
巴拉米 巴拉米
5年前
前端性能优化
为什么要做性能优化?性能优化有多重要?网站的性能对于用户的留存率、转化率有很大的影响,直白的说,提高网站的性能可以直接提高网站带来的收益。性能优化的分类前端的性能优化主要分为两类:1.加载时优化;2.运行时优化;例如压缩文件、使用CDN加载静态资源属于加载时优化;及时的解绑事件、减少DOM的操作属于运行时优化。吉
Chase620 Chase620
4年前
面试官问 Vue 性能优化,我该怎么回答
前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
极致性能优化:前端SSR渲染利器Qwik.js | 京东云技术团队
前端性能已成为网站和应用成功的关键要素之一。让我们一起深入探索Qwik.js,发现它如何超越传统,成为前端性能优化的新标杆。
前端最近发生的那些新鲜事儿(SEO,SSR和SSG?)
作者:京东科技贾玉龙技术的车轮滚滚向前,前端开发的最新动态包罗万象。近期前端又有一些新鲜事儿。框架更新、性能优化、响应式设计趋势以及其他新动向都有所发展。在框架方面,React19引入了新的编译器特性,优化了性能,而Next.js15则支持React19编
linbojue linbojue
1个月前
通俗讲解前端性能优化+项目实战(一)
一、前端性能优化基础概念前端性能优化是指通过技术手段和策略提升网页加载速度、响应效率及用户体验的过程。其核心目标包括减少资源消耗、加快页面加载速度、提升交互流畅性1.性能优化核心维度1.FCP(FirstContentfulPaint,首次内容渲染时间)定
实践指南-前端性能提升 270% | 京东云技术团队
本文详细介绍了一个前端项目优化的详细过程,从优化前的问题分析,到具体的优化措施,最终实现了前端性能提升了近3倍。同时也将性能指标落到监控平台,实现可视化的监控前端性能指标。
聊聊前端性能指标那些事儿
作为C端前端研发,除了攻克业务难点以外,也要有更深层的自我目标,那就是性能优化。这事儿说大不大,说小也不小,但难度绝对不一般,所涉及的范围优化点深入工程每个细胞。做好前端性能优化绝非简单之事!文章主要内容介绍前端性能考核指标及优化方案。