一、加载优化
1. 第三方模块放在CDN
例如 leaflet通过cdn引入，这样就不会占用打包体积了
2. prefetch 预加载
例如，之后马上有个场景需要一个图片，我们就可以通过link 的 prefetch 对资源进行预先加载
再例如，我们公司是无网络开发，之前依赖中并没有leaflet库，从外边导入又很麻烦，所以就引入了个leaflet.js，这个就可以用prefetch来进行预加载引入
javascript
<link rel="prefetch" href="./115506855.jpg">3. Promise.race去对比哪个ip响应最快，从而去加载该地方资源
由于公司内网开发，总共就两台服务器，所以可以通过Promise.race去判断哪个服务器响应快，从而去该服务器拿第三方资源
二、缓存
开启强缓存（Cache-Control、Expires）或者协商缓存（ETag 、Last-Modified）
三、图片优化
1. 小图可以使用雪碧图减少网络请求，或者使用iconfont，或者使用base64内联
2. webp格式替代其他图片格式
3. 图片懒加载
IntersectionObserver是浏览器原生提供的构造函数，通过给每个图片绑定观察者，判断是否图片出现在了视口区域。
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<style>
/* 为图片容器添加样式 */
.image-container {
margin: 20px;
width: 300px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
/* 图片样式 */
.lazy-image {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<h1 class="text-2xl font-bold mb-4">图片懒加载示例</h1>
<!-- 多个图片容器 -->
<div class="image-container">
<img class="lazy-image" data-src="https://picsum.photos/300/300?random=1" alt="Lazy Loaded Image">
</div>
<div class="image-container">
<img class="lazy-image" data-src="https://picsum.photos/300/300?random=2" alt="Lazy Loaded Image">
</div>
<div class="image-container">
<img class="lazy-image" data-src="https://picsum.photos/300/300?random=3" alt="Lazy Loaded Image">
</div>
<div class="image-container">
<img class="lazy-image" data-src="https://picsum.photos/300/300?random=4" alt="Lazy Loaded Image">
</div>
<div class="image-container">
<img class="lazy-image" data-src="https://picsum.photos/300/300?random=5" alt="Lazy Loaded Image">
</div>
<script>
// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy-image');
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 当图片进入视口时
const img = entry.target;
img.src = img.dataset.src;
// 停止观察该图片
observer.unobserve(img);
}
});
});
// 对每个懒加载图片添加观察
lazyImages.forEach(image => {
observer.observe(image);
});
</script>
</body>
</html> 4. 使用img的srcset，根据不同分辨率显示不同尺寸的照片，减少带宽
四、 CSS优化
1. css写在头部
五、JS优化
1. js写在body下面
2. js用defer放在头部，提前加载时间，又不阻碍dom解析
六、 渲染优化
1. 尽量减少，重绘和重排
2. 用变量缓存dom样式，减少频繁读取
读取dom样式也会触发重绘重排
3. 使用DocumentFragment对dom元素进行操作的缓存，最后统一将元素插入页面
4. 对于动画元素可以单开一个图层
重绘是以图层为单位的，如果图层中某个元素需要重绘，那么整个图层都需要重绘。所以为了提高性
能，我们应该让那些"变化的元素"单独作为一个图层。 可以使用
will-change:tranform;这个css属性单独开个图层。