本期技术周刊一起看看如何做好性能优化？，欢迎大家阅读 ～
文章推荐
《近期对前端性能优化的总结》 作者：南城大前端
前端性能优化不管是在面试中还是在实际开发过程中，都是每一个前端开发工程师都必不可少的能力。本文总结本人多年开发经验中对前端性能优化的理解，希望对大家有所帮助，因涉及的优化方向较多，针对某些细节不再详细说明，大家有兴趣的可深入了解，话不多说，正文开始。
《性能优化必备——火焰图》作者：咕咕鸡
本文主要介绍火焰图及使用技巧，学习如何使用火焰图快速定位软件的性能卡点。
结合最佳实践实战案例，帮助读者加深刻的理解火焰图构造及原理，理解 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：
- react 组件较多时，拖拽遇到性能问题，造成页面卡顿
- 请问 vue 从别人的网站加载图标 这样写，会造成页面卡顿，影响性能吗？
- 请问一个数据大小为何引起巨大性能问题？
- 循环内定义变量和循环外定义变量有性能区别吗？
- 如何实现一个高性能的以时间为条件的查询器？
# SegmentFault 技术周刊 #
「技术周刊」是社区特别推出的技术内容系列，一周一主题。
每周二更新，欢迎「关注」。大家也可以在评论处留言自己感兴趣的主题，推荐主题相关的优秀文章。
如有问题可以添加小姐姐微信~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。