近期在对我们的控制台做性能优化，这次记录下代码执行方面的性能排查与优化（纯 JS 上的不包含 DOM 操作等优化）。其它的优化点以后有机会再分享。 首先需要排查出需要优化的点，这个我们可以借助 Chrome 的 DevTool 来排查网站中的性能问题。 第一种方式可以借助 Pe…

很明显，我们的对于用户的响应速度和界面渲染速度，提升了 50% 左右。 该工具已经在 npm 发了包，也在 git 提交了项目，有兴趣的可以去看看，顺便点个 star ，谢谢了。 已经有 n 久没有写过文章了，由于最近工作比较忙，而且项目当中对于前端性能还有架构方面的挑战性还是…

Performance 一个在前端开发领域中，无法被忽视的存在，如果我们的开发是一个满足需求就可以的产品，那么可能就用不到它；但是如果我们想对我们的这个产品，做一个极致的优化，那么 Performance 是一个很好的选择，也是一个不容忽视的选择。 大致的介绍了一下工具和api…

本篇内容是连续，建议收藏，开篇会有前几篇链接。开此专题会带领大家如何开发一个真正的，有意义的性能分析系统，而不是单纯的炫技。 性能分析，首要的就是数据，本期就带大家在数据的海洋里捞针。 PerformanceAPI 是使用最多的，通过这个 api，我们可以采集到页面的很多数据，…

hello~各位亲爱的看官老爷们大家好。估计大家都听过，尽量将CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（b…

云音乐前端性能监控平台，底层使用了 Lighthouse 进行审计评分，在实践过程中我们积累了一些 Lighthouse 内部实现的研究经验，希望通过这篇文章可以分享给各位读者。 本篇文章基于 Lighthouse 5.2.0 版本，介绍了 Lighthouse 的测试流程、架…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

Nemo近一年以来做了不少h5活动，，积累了不少优化开发流程经验以及优化用户加载与性能经验。 但是每次复盘转化率都不高,我们不希望任何用户流失。 跟踪这些问题，有助于我们优化页面。 Nemetrics(Nemo Metrics开源) 利用最新的 W3C Performance …

在前端性能数据的获取方法上，现在业内大多使用手动埋点的方式，即在代码中，人工判断首屏完成的位置，并在该处添加首屏记录的代码，类似：firstscreen.report() 这样。 基于上面的分析，我们近期尝试了一些方案，试图将首屏时间计算自动化，节省人力、并提高准确性。 我们将…