前端面试宝典---性能优化
一、加载优化
1. 第三方模块放在CDN
例如 leaflet通过cdn引入，这样就不会占用打包体积了
2. prefetch 预加载
例如，之后马上有个场景需要一个图片，我们就可以通过link 的 prefetch 对资源进行预先加载
再例如，我们公司是无网络开发，之前依赖中并没有leaflet库，从外边导入又很麻烦，所以就引入了个leaflet.js，这个就可以用prefetch来进行预加载引入
<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是浏览器原生提供的构造函数，通过给每个图片绑定观察者，判断是否图片出现在了视口区域。
<!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属性单独开个图层。