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

CLS是测量在页面整个生命周期中发生的每个元素布局变化的分数总和。 为了提供良好的用户体验，网站应努力使CLS得分不超过0.1。

今天讲的三个属性都是在 link 标签上使用的，使用形式如下： 初看起来，这三个属性设置起来比较简单，但是如果使用得当，效果却会非常棒。比如 奈飞 通过使用 prefetch 把 TTI ( Time

前言最近做性能检测工具，很多知识点不清楚，打算查缺补漏，补一补。接下来从官方提供的性能检测工具Lighthouse(灯塔)开始我们的学习，简单介绍了下Lighthouse的一些点。

本文的目的就是通过一个案例分析了解前端性能的指标及其对应的优化手段。 根据刚刚疑问，前端性能优化的难点在于制定指标，并且将其具现化为数据展示，如果有个评分最好了，那我们就只要努力提供我们网站的评分就行了。 Ligthhouse收集了我们感兴趣的大部分数据，并对其进行了分析，将分…

提升前端页面的性能有很多方法，其中一类很重要的方法就是前端预加载，包括 dns-prefech, preconnect, preload, prefetch, prerender。

dns-prefetch(DNS预获取)是前端网络性能优化的一种措施。它根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，进而提高网站的访问速度。

如果你想要浏览器在你访问某个域名前先执行 DNS 解析，那么你使用 preconnect 和 prefetch-dns 都是可以的，这将会节省关键渲染路径的时间。本文主要分析这两者的区别，结论无法一句话概括。

Webpack插件之preload-webpack-plugin,preload-webpack-plugin插件的使用方法及详细配置。