Frames部分，主要用于查看特定帧的fps，可以查看特定的帧情况。 此代码的问题在于，在每个动画帧中，它会更改每个方块的样式，然后查询页面上每个方块的位置。由于样式发生了变化，浏览器不知道每个方块的位置是否发生了变化，因此必须重新布局方块以计算其位置。

性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 首次绘制，FP（First Paint），这个…

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…

1.重要性 当我们面试的时候，前端性能优化方面算是必考的知识点，但是工作中我们又很少会重点的对项目进行前端优化，它真的不重要吗？ 如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%~10%。

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

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

因此大家都开始注重性能优化，很多厂商都开始做一些性能优化。比较有名的是雅虎军规，不过随着浏览器和协议等的发展，有一些已经逐渐被淘汰了。因此建议大家以历史的目光看待它。比如.尽量减少HTTP请求数这一条，在HTTP2协议下就不管用了，因为HTTP2实现了HTTP复用，HTTP请求…

1. 开启gzip压缩的好处 可以减小文件体积，传输速度更快。gzip是节省带宽和加快站点速度的有效方法。 客户端接受到数据后去检查对应字段的信息，就可以根据相应的格式去解码。 客户端请求时，可以用 Accept-Encoding:gzip，用户说明接受哪些压缩方法。 客户端在…

虽然前端开发作为 GUI 开发的一种,但是存在其特殊性,前端的特殊性就在于“动态”二字，传统 GUI 开发，不管是桌面应用还是移动端应用都是需要预先下载的,只有先下载应用程序才会在本地操作系统运行,而前端不同,它是“动态增量”式的,我们的前端应用往往是实时加载执行的,并不需要预…