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

常见的性能优化措施:

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

  1. 减少 DNS 查询:减少使用不同的域名,以减少 DNS 查询次数。

  2. 使⽤ CDN:将静态资源部署到 CDN 上,提供更快的访问速度。

javascript 复制代码
 <script src="https://cdn.example.com/script.js"></script>

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

  1. 避免重定向:确保网页没有多余的重定向,减少额外的网络请求。

  2. 图⽚懒加载:延迟加载图⽚,只有当图片进⼊可视区域时再进⾏加载。
    html

javascript 复制代码
<img src="placeholder.jpg" data-src="image.jpg" class="lazyload">
<script src="lazyload.js"></script>
  1. 减少 DOM 元素数量:优化⻚⾯结构,减少 DOM 元素的数量,提升渲染性能。

  2. 减少 DOM 操作:避免频繁的 DOM 操作,合并操作或使用 DocumentFragment 进行批量操作。
    js

javascript 复制代码
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

javascript 复制代码
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

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

  1. 优化 CSS Sprite(精灵图):将多个小图标合并为⼀个大图,并通过 CSS 进行定位,减少图片请求。

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

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

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

javascript 复制代码
<i class="iconfont"></i>
  1. 字体裁剪:只加载页面上实际使用的字体字符,减少字体⽂件的大小。需要使用字体⼯具

(如 Fontello 、 IcoMoon 等)进⾏裁剪

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

置不同的域名或子域名。

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

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

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

载样式和内容。

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

webpack性能优化

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

  1. 代码分割(Code Splitting):使⽤Webpack的代码分割功能,将代码拆分为多个小块,按需加载,避免打包⼀个巨⼤的⽂件。

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

  1. Tree Shaking:通过配置Webpack的 optimization 选项,启⽤ sideEffects 和 usedExports ,以消除未使⽤的代码(dead code)。

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

  3. 并⾏处理(Parallel Processing):使⽤ thread-loader 或 HappyPack 插件,将Webpack的构建过程多线程化,加速构建速度。

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

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

  2. 使⽤插件和加载器(Plugins and Loaders):选择⾼效的插件和加载器,合理配置它们的项,以优化构建过程和资源处理。

  3. **使⽤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.异步组件: 将应⽤中的⼀些复杂组件拆分为异步组件,按需加载,提⾼初始渲染性能。

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

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

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

载速度。

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

React的性能优化策略:

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

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

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

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

  1. **使用虚拟化列表:**对于⻓列表或⼤型数据集,可以使⽤虚拟化列表库(如 react-virtualized 或 react-window )来仅渲染可见部分,减少DOM操作和内存占⽤

  2. 使用****Memoization 进⾏计算的缓存:通过使⽤ Memoization 技术,可以将计算结果缓存起来,避免重复计算,提⾼性能。可以使⽤ Memoization 库(如 reselect )来实现

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

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

相关推荐
superman超哥12 分钟前
04 深入 Oracle 并发世界:MVCC、锁、闩锁、事务隔离与并发性能优化的探索
数据库·oracle·性能优化·dba
前端青山10 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
青云交15 小时前
大数据新视界 -- 大数据大厂之 Impala 性能优化:应对海量复杂数据的挑战(上)(7/30)
大数据·性能优化·impala·数据分区·查询优化·海量复杂数据·经典案例
chusheng184019 小时前
Python 爬取大量数据如何并发抓取与性能优化
开发语言·python·性能优化
XMYX-02 天前
MySQL 性能优化策略:提升响应速度与系统稳定性
mysql·性能优化
PangPiLoLo2 天前
高可用架构-业务高可用
java·性能优化·架构
尸僵打怪兽2 天前
软考(中级-软件设计师)数据库篇(1101)
数据库·oracle·性能优化·软考
程序猿进阶2 天前
系统上云-流量分析和链路分析
java·后端·阿里云·面试·性能优化·系统架构·云计算
飞腾开发者3 天前
飞腾平台Arm ComputeLibrary编译安装指南
linux·服务器·arm开发·后端·性能优化
新知图书4 天前
MySQL 9从入门到性能优化-系统信息函数
数据库·mysql·性能优化