关于javascript:谷歌性能指标优化

一、CLS（Cumulative Layout Shift）
1、定义：
CLS是所有布局偏移分数的汇总，但凡在页面残缺生命周期内意料之外的布局偏移都包含。布局偏移产生在任意工夫，当一个可见元素扭转了它的地位，从一个渲染帧到下一个。（须要留神的是，布局偏移只产生在曾经存在的元素扭转起始地位的时候。如果一个新的元素被增加到dom上，或者已存在的元素扭转它的尺寸，除非扭转了其余元素的起始地位，否则都不算布局偏移。）

2、衡量标准：

好的CLS分数：75%以上的用户小于0.1。
CLS代表的是每个Element非预期位移的累积，而每个位移的算法如下:
元件位移分数(Layout Shift Score) = 影响范畴(Impact Fraction) * 挪动间隔(Distance Fraction)

如上例来说，影响范畴(红色)占比Viewport 75%，箭头(紫色)挪动占Viewport的height 25%，故0.75 * 0.25 = 0.1875。

3、排除：
使用者操作后的500ms内的Layout Shifts Performance Entry的hadRecentInput标识为true，将不被计入CLS指标内。如通过点击一个链接、按了一个按钮或在搜寻框打字等操作500ms内引起的元素位移不被计入CLS指标内。如果操作后发动了ajax申请，且响应工夫超过500ms，响应后引起的元素位移会被计入CLS指标内。

4、工具应用：
（1）Web Vitals插件
（2）谷歌控制台Performance面板
（3）WebPageTest
Advanced -> Custom headers:
cookie: MSRV=B_202003301000;

5、优化CLS：
（1）为元素设定好尺寸（占位）
a: 图片百分比占位：
包裹图片的元素padding占位，图片相对定位，宽高100%：
padding-top: height / width * 100%;

.box {  position: relative;  padding-top: 300px / 400px * 100%;}img {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

可参考：https://css-tricks.com/aspect...
b: 图片宽高比占位：

<!-- set a 400:300 - or 4:3 - aspect ratio --><img src="myimage.jpg" width="400" height="300" alt="my image" />img {  width: 100%;  height: auto;}

可参考：https://blog.logrocket.com/ja...
c: 图片相对占位：
限度相对宽高，比方400 x 300 px。
d: 字体图标占位：
包裹字体图标的元素需设定宽高，不能只设置font-size。

（2）躲避ajax引起的CLS：
a: 不影响其余指标（如LCP）的前提下，可把须要ajax申请的数据放到首屏，初始化页面时一起获取并渲染。
b: 使用者操作后发动ajax申请时，建设空白占位区域，并显示加载图标，ajax响应后将内容渲染到空白区域。
c: 对于ajax内容旁边或上面的元素，可思考先暗藏，待ajax内容渲染结束后再显示。

（3）躲避优化用户体验引起的CLS：
a: 对于头部banner广告，如果页面初始化时要求不显示，上拉到顶后再显示，能够初始化时，用跳转a标签锚点的形式暗藏掉banner。

<a name="header_anchor"></a>location.href = '#header_anchor';

b: 如果要求用户下滑后，header吸顶，header地位扭转会引起CLS，能够复制2份header，别离在相应条件下显示或暗藏。

（4）躲避元素本身位移引起的CLS：
a: 当元素本身要扭转地位时，能够先暗藏或将透明度设置为全透明，地位扭转后再显示或去掉透明度设置。（有时须要适当延时一会儿再显示，如10ms）
b: CSS中的transform属性能够让你在应用动画的时候不会产生布局偏移:
用 transform:scale() 来替换 width 和 height 属性
用 transform:translate() 来替换 top, left, bottom, right 属性

二、LCP（Largest Contentful Paint）
1、定义：
显示最大内容元素所需工夫 (掂量网站首次载入速度)。

2、衡量标准：

好的LCP分数：在2.5秒内实现最大内容绘制

3、大小确定：
用户在视口内可见的大小。如果元素延长到视口之外，或者任何元素被剪裁或具备不可见的溢出，则这些局部不计入元素的大小。
对于所有元素，不思考通过CSS利用的任何边距、填充或边框，如margin / padding / border。

4、浏览器报告最大内容：
因为网页上的 Element 可能继续加载，最大的 Element 也可能继续扭转 (如文字载入完，而后载入图片) ，所以当每一个当下最大的 Element 载完，浏览器会收回一个 PerformanceEntry Metric，直到使用者能够进行 Keydown / Scrolling / Tapping 等操作，Browser才会进行发送 Entry，故只有抓到最初一次 Entry ，即能判断 LCP 的持续时间。

5、工具应用：
同CLS

6、优化LCP：
（1）尽早确定最大元素：
如详情页主图，首屏加载了第一张图片（图1），前面通过ajax获得第二屏数据后，再将主图切换到另一张图片（图10），那么浏览器会以图10加载实现算作LCP工夫。优化的办法是，在首屏就确定加载图10，之后不再变动。

（2）缩小接口申请个数和数据大小：
a: 对于php，可将同步调用的接口改为并发申请；适当给某些接口减少缓存；对于不重要或看不见的数据，页面初始化时可不申请，等页面加载实现后再通过ajax申请。
b: 能够缩小首屏申请的数据量，如列表页，一页需获取48个商品的，改为首次获取6个，页面渲染实现后，再获取剩下的42个。

（3）尽早建设第三方连贯：
对第三方源的服务器申请也会影响LCP，比方要加载的图片域名是第三方的。应用rel="preconnect"告诉浏览器尽早建设第三方连贯。
<link rel="preconnect" href="https://example.com" />
还能够应用dns-prefetch更快地解析 DNS 查找。
<link rel="dns-prefetch" href="https://example.com" />

（4）预加载和异步加载：
a: 将最大元素的图片预加载：
<link rel="preload" as="image" href="https://example.com/myimage.jpg">
c: JS异步加载：
对于不影响页面渲染，不立刻执行的JS，可应用异步加载，防止阻塞HTML解析渲染：
<script defer src="index.js"></script>
d: CSS异步加载：
对于不影响首屏可见区域元素渲染的CSS，可应用异步加载，防止阻塞HTML解析渲染：
<link rel="stylesheet" href="index.css" media="none" onload="this.media='all'">
<link rel="preload" as="style" href="index.css">（这种形式的异步加载浏览器反对度较低）

（5）内联要害CSS：
对于影响首屏渲染的要害CSS，可通过<style>内联到html中。（也可通过CDN服务器将要害JS/CSS同html一起push下来）

（6）缩小资源大小和个数：
a: 将资源进行打包压缩。
b: 移除冗余代码。
c: 合并资源（如多个字体文件合并为一个，同时删除冗余字体图标；应用雪碧图等）。
d: 缩小图片的应用，某些设计可通过css实现。

（7）强制设定最大元素：
如列表页首屏显示了多张图片，大小都一样，浏览器并不会肯定把第一张图片当做最大元素，有可能第二张、第三张等。优化的办法是，将第一张图片元素宽高都加大2px，把它固定为最大元素，配合图片预加载优化LCP。

二、FID（First Input Delay）
1、定义：
首次输出提早，测量从用户第一次与页面交互（如点击链接、按钮、图片，在输入框中输出内容等）到浏览器理论可能开始解决这个交互事件的工夫。

2、衡量标准：

好的FID分数：首次输出提早不超过100毫秒

参考：
https://web.dev/cls/
https://web.dev/lcp/
https://web.dev/fid/
https://css-tricks.com/aspect...
https://blog.logrocket.com/ja...