前端优化杂项

图片优化

1.不同屏幕宽度加载不同大小的图片

<img sizes="(max-width:500px) 100px,(max-width:600px) 200px" srcset="./img1.png 100w, ./img2.png 200w" />

2.根据屏幕大小加载有用的css

<link href="index.css" rel="stylesheet" meida="screen and (min-width:1024px)">

3利用InterSectionObserver进行延时加载的策略按需加载图片