页面优化总结

一、异步数据加载

背景：经常做页面的时候，数据没有返回回来，页面元素空白的情况，最经典的就是用户头像，用户头像返回的一个https连接，从发起请求到页面接受病渲染，这段时间是空白的，那么怎么处理呢？

这样来处理在头像没有被加载出来的占位，不用通过骨架屏去占位。

.avatar[src=""] {
  filter: blur(1px);
  opacity: 0.8;
}

二、非首屏元素采用懒加载

<img src="item1.jpg" loading="lazy">

但是依然没有问题，延时加载是处理了，但是未加载出来之前仍然是一片空白 怎么解决呢 css强大占位 锁定宽高比，添加占位的背景色

img[loading="lazy"] {  
aspect-ratio: 16/9; /* 你的图片比例 */  
width: 100%;  
background: #f0f0f0; /* 占位背景 */
}