前端面试宝典---性能优化

一、加载优化

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属性单独开个图层。

5. 可以用通过ransform: translateZ(0);或者will-change:tranform; 欺骗浏览器开启硬件加速

6. 使用requestAnimationFrame代替setTimeout来实现动画，requestAnimationFrame与浏览器的刷新率同步，可以避免不必要的计算

七、打包优化

1. 开启Cache-loader 实现打包缓存，对于之前读过文件进行缓存，而不需要再去读系统文件

2. thread-loader开启多进程打包，提升打包速度

3. 在生产环境下把source-map关闭

八、VUE优化

1. 路由懒加载

2. keep-alive 缓存组件

3. v-for的key值使用唯一id

4. 对于vue2中不需要的响应式数据，通过Object.freeze冻结，不让vue递归绑定响应式数据

5. v-if 和 v-for不要同时使用

九、用户体验

1. 可以通过A/B试验，对比不同优化方案的实际效果，基于数据决策最佳实践

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/79722.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/79722.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！