图片的尺寸和布局偏移[B君笔记][博客]

noscript{position: fixed}图片的尺寸和布局偏移前端图片加载创建时间：2021-11-22 21:23:51

布局偏移

自己此时的时候遇到的真实例子，当我们点入一篇带锚点的文章链接时，首次进入页面后会定位到标题位置，随着图片加载，原本的文字会被往下退，此时就发生了布局偏移。而在多次偏移，我们可以成为累积布局偏移(CLS)。目前时Lighthouse中衡量一个页面性能的重要指标。

示例

在图片加载策略对页面性能影响测试页面介绍了本站文章页面的几个参数，可用修改页面图片加载方式

带锚点的链接

关闭尺寸设定，不开启惰性加载
如下图，标题错位了，在滚动之前就发生了布局偏移，这是比较影响使用体验的。
https://bjun.tech/blog/xphp/100?_NLN=2&_SWH=0&_ST=1#_43

关闭尺寸设定，不开启惰性加载，如下图，标题错位了

关闭尺寸设定，开启惰性加载
如下图，标题位置准确
特别注意：native loading lazy（?_NLN=0&_SWH=0&_ST=1#_43）和基于 Intersection Observer 的lozad（?_NLN=1&_SWH=0&_ST=1#_43）是可以避免发生操作前的布局偏移，而基于滚动条的惰性加载则会触发。
https://bjun.tech/blog/xphp/100?_NLN=0&_SWH=0&_ST=1#_43
开启尺寸设定，不开启惰性加载
如下图，标题位置准确
https://bjun.tech/blog/xphp/100?_NLN=2&_SWH=1&_ST=1#_43

滚动示例

全加载
现在在国内带宽还是不错的时代，内容不多的情况下，全部图片加载也是不错的。如果页面图片多且大的话，这就是用首屏加载时间换体验，视情况而定了。
惰性加载未设定尺寸
未设定尺寸但开启惰性加载，每次滚动后进行图片加载都会触发布局偏移。好在这个偏移是大概率是发生在屏幕外，对用户体验影响是比较小的。但还是会额外的回流成本。
https://bjun.tech/blog/xphp/100?_NLN=1&_SWH=0&_ST=1
或
https://bjun.tech/blog/xphp/100?_NLN=0&_SWH=0&_ST=1

设定图片尺寸

综合上面的例子，我们可以发现图片被设定尺寸后的优势。

减少或避免布局偏移，提高用户体验
减少回流，提高页面性能

设定方法

简单举例

直接设置width和hight
比如文章显示，在其被编辑的富文本编辑器中可以直接设置，但是对于超出屏幕的图片是做max-width:100%处理还是直接溢出。前者也会触发回流，后者则时情况而定。当然对于部分固定场景的页面，在设计之初就可以定好图片的尺寸。而我用的markdown-edit则没有该属性。
在img外面包裹一个指定大小的div
在某些布局已经固定的页面，如商城首页，图库缩略图。其图片可以进行部分裁剪而不影响，可以指定一个大小的容器，再图片设定显示模式，是缩放还是平铺。即不会触发布局偏移也不会触发回流，无论是性能或体验，都是一个不错选择。
在js插入前设置
这个方案比较复杂，但又是具备适配性，并且可以按原比例显示，正是我才用的方案。
但有几个条件
需要知道图片原始尺寸或者比例。
我的方案是在图片上传时则获取对应尺寸，将其作为图片链接中一个信息。
如 https://bjun.tech/?_x=file.out&idm=2031ab6&extr=375x812 中的 extr=375x812，则表示该图片的原始尺寸。
需要知道父容器尺寸或者窗口尺寸
获取页面的尺寸信息会强制清空渲染队列，也是一次性能损失，但比起多图片引发的多次回流，置换一下。当然，如果时手机尺寸的话，可以设定未屏幕的百分比，则可省去一次性能损失。
按比例换算成图片尺寸
在小于或等于容器宽度时，按原尺寸设定width和height。
在大于容器宽度时，按容器宽度显示，按比例换算高度，在设定对应尺寸，细节是，换算是要精确的小数点后2位。

这个方案的优点是灵活，可以处理很多场景，在响应页面也具有优势。缺点就是，每个场景都可能要去处理，并且在获取父容器尺寸的过程中，可能也是要付出一定代价的。

参考

Cumulative Layout Shift 累积布局偏移 (CLS)
本站相关标签：图片加载