面试题之项目做过哪些性能优化可以从哪方面说？

常见的性能优化措施：

1. 减少 HTTP 请求数：合并和压缩 CSS、JavaScript ⽂件，使⽤雪碧图、字体图标等减少图片请求，减少不必要的资源请求。

2. 减少 DNS 查询：减少使用不同的域名，以减少 DNS 查询次数。

3. 使⽤ CDN：将静态资源部署到 CDN 上，提供更快的访问速度。

将静态资源部署到 CDN 上步骤简述： Vue静态资源上CDN方案简述 - 掘金 (juejin.cn)

4. 避免重定向：确保网页没有多余的重定向，减少额外的网络请求。

5. 图⽚懒加载：延迟加载图⽚，只有当图片进⼊可视区域时再进⾏加载。

html

6. 减少 DOM 元素数量：优化⻚⾯结构，减少 DOM 元素的数量，提升渲染性能。

7. 减少 DOM 操作：避免频繁的 DOM 操作，合并操作或使用 DocumentFragment 进行批量操作。

js

var container = document.getElementById("container");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var div = document.createElement("div");
div.innerText = "Element " + i;
fragment.appendChild(div);
}
container.appendChild(fragment);

8. 使用外部 JavaScript 和 CSS：将 JavaScript 和 CSS 代码外部化，利用浏览器缓存机制提高页面加载速度。  

htm

9. 压缩文件：压缩 JavaScript、CSS、字体、图片等静态资源⽂件，减小文件大小。

10. 优化 CSS Sprite（精灵图）：将多个小图标合并为⼀个大图，并通过 CSS 进行定位，减少图片请求。

通过background-position定位小兔在大图上的位置。

.icon {
background-image: url("sprite.png");
background-position: -10px -20px;
width: 20px;
height: 20px;
}

11 . 使⽤ iconfont：将图标字体作为替代图像，减少图片请求并提⾼渲染性能。

html



12. 字体裁剪：只加载页面上实际使用的字体字符，减少字体⽂件的大小。需要使用字体⼯具

（如 Fontello 、 IcoMoon 等）进⾏裁剪

13. 多域名分发：将网站的内容划分到不同的域名下，以提高并发请求的能⼒。需要在项⽬中配

置不同的域名或子域名。

14. 减少使⽤ iframe：避免频繁使⽤ iframe，因为它们会增加额外的网络请求和页面加载时间。

15. 避免图⽚ src 为空：确保 img 标签的 src 属性不为空，避免浏览器发送不必要的请求。

16. 把样式表放在 link 中：避免使用内联样式，将样式表放在 link 标签中，使浏览器可以并⾏加

载样式和内容。

17. 把 JavaScript 放在⻚⾯底部：将 JavaScript 脚本放在页面底部，使页面内容可以先加载完毕，提升⽤户体验。

---

webpack性能优化

1. 使用生产模式（production mode）：在Webpack配置中设置 mode 为 production ，这将启⽤许多内置的优化功能，例如代码压缩、作⽤域提升等。

2. 代码分割（Code Splitting）：使⽤Webpack的代码分割功能，将代码拆分为多个小块，按需加载，避免打包⼀个巨⼤的⽂件。

3. 懒加载（Lazy Loading）：使⽤动态导入（Dynamic Import）或 import() 函数，按需加载模块，在需要时才加载相关代码。

4. Tree Shaking：通过配置Webpack的 optimization 选项，启⽤ sideEffects 和 usedExports ，以消除未使⽤的代码（dead code）。

5. 缓存：使⽤Webpack的 chunkhash 或 contenthash ⽣成⽂件名，实现缓存机制，利⽤浏览器缓存已经加载的⽂件。

6. 并⾏处理（Parallel Processing）：使⽤ thread-loader 或 HappyPack 插件，将Webpack的构建过程多线程化，加速构建速度。

7. 使⽤缩⼩作⽤域（Narrowing the Scope）：通过配置Webpack的 resolve 选项，缩⼩模块解析的范围，减少不必要的查找。

8. 使⽤外部依赖（External Dependencies）：将⼀些稳定的、不经常修改的库或框架通过 externals 配置排除，使⽤CDN引⼊，减少打包体积。

9. 使⽤插件和加载器（Plugins and Loaders）：选择⾼效的插件和加载器，合理配置它们的项，以优化构建过程和资源处理。

10. 使⽤Webpack Bundle Analyzer：使⽤Webpack Bundle Analyzer⼯具分析打包后的⽂件，查找体积较⼤、冗余或不必要的模块，进⾏进⼀步优化。

---

Vue的性能优化策略：

1. 使⽤Vue的生产模式：在构建Vue应⽤时，确保使用⽣产模式，这将禁⽤⼀些开发模式下的警告和调试⼯具，并启用性能优化的功能。

2. 合理使⽤ v-if 和 v-show 指令： v-if 指令用于条件渲染，只在条件为真时渲染元素，而v-show 指令仅控制元素的显示和隐藏。根据具体情况选择合适的指令，避免频繁的DOM操作。并且要避免将它们同时⽤在同⼀个元素上，这可能导致不必要的计算和渲染。

3. 列表性能优化：在渲染⼤量列表数据时，使⽤key属性来提高性能。 key 属性可以帮助Vue跟踪每个节点的标识，减少不必要的 DOM 操作。

4. 懒加载路由：对于⼤型单⻚应⽤，可以考虑使⽤路由懒加载技术，按需加载路由组件，减少初始加载时间。

5. 异步组件：将应⽤中的⼀些复杂组件拆分为异步组件，按需加载，提⾼初始渲染性能。

6. 避免不必要的重新渲染：使⽤Vue的计算属性和侦听器来优化视图的更新。确保只有在依赖的数据发⽣变化时才会重新计算和渲染。

8. 使⽤ keep-alive 组件：对于需要缓存的组件，可以使⽤Vue的 keep-alive 组件来缓存组件的状态，避免重复的创建和销毁。

9. 懒加载图片：对于页⾯中的图⽚，可以使⽤懒加载技术，延迟加载图⽚，提⾼页⾯的初始加

载速度。

10. 优化⽹络请求：合理使用Vue的异步组件和懒加载技术，减少页⾯初始加载时的网络请求量。

---

React的性能优化策略：

1. 使用React.memo() 或 PureComponent ：对于函数组件，可以使⽤ React.memo() 函数或继承 PureComponent 类来进⾏浅⽐较，避免不必要的重新渲染

2. 使用 key 属性进⾏列表优化：在渲染列表时，为每个列表项提供唯⼀的 key 属性，以帮助React 更有效地更新和重⽤组件

3. 使用 shouldComponentUpdate 或 React.memo() 进⾏组件渲染控制：在类组件中，可以通过实现 shouldComponentUpdate ⽣命周期方法来控制组件的重新渲染。对于函数组件，可以使用React.memo() 包裹组件并传递⾃定义的比较函数

4. 懒加载组件：对于较⼤的组件或页⾯，可以使⽤ React.lazy() 和 Suspense 组件进行按需加载，减少初始加载时间

5. 使用虚拟化列表：对于⻓列表或⼤型数据集，可以使⽤虚拟化列表库（如 react-virtualized 或 react-window ）来仅渲染可见部分，减少DOM操作和内存占⽤

6. 使用 Memoization 进⾏计算的缓存：通过使⽤ Memoization 技术，可以将计算结果缓存起来，避免重复计算，提⾼性能。可以使⽤ Memoization 库（如 reselect ）来实现

7. 使用 React Profiler 进⾏性能分析： React Profiler 是React提供的性能分析⼯具，可以帮助定位应⽤中的性能瓶颈，并进行优化

8. 使用 ESLint 和代码分析⼯具：通过使⽤ ESLint 等代码规范⼯具和静态代码分析⼯具，可以发现潜在的性能问题和优化机会，并进行相应的调整