所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标

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

我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么，通常我们并不清楚（不包括那些对性能优化有丰富经验的高手）。 事实上关于Web性能有很多可以优化的点，其中涉及到的知识大致可以划分为几类：度量标准、编码

白屏优化通常是在一些单页面应用中，因为单页面应用的内容是通过执行JavaScript代码添加到页面中的，在资源下载和执行的过程中存在页面白屏，用户体验不好。 Vue2中通过Object.defineProperty对数据进行劫持，从而实现视图响应数据的变化，这比较消耗时间。有时…

准备一份将VUE打包成DLL的webpack配置文件。 在build目录下新建一个文件webpack.vue.js，专门用于打包vue的DLL的。

对于一个动作的响应，我建议一般在 100 毫秒内解决，这适用于大多数输入，不管他们是在点击按钮、切换表单控件还是启动动画。 对于需要超过 500 毫秒才能完成的操作，请始终提供反馈，例如 Loading。 从纯粹的数学角度而言，每帧的预算约为 16 毫秒（1000 毫秒 / 6…

随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽下载更大体积的脚本文件。 然而仔细想想这完全是可以避免的：在开发时难道一行代码的修改也要重…