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

常见的性能优化措施:

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

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

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

 <script src="https://cdn.example.com/script.js"></script>

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

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

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

html
<img src="placeholder.jpg" data-src="image.jpg" class="lazyload">
<script src="lazyload.js"></script>

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
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

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
<i class="iconfont"></i>

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 等代码规范⼯具和静态代码分析⼯具,可以发现潜在的性能问题和优化机会,并进行相应的调整

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

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

相关文章

19-k8s的附加组件-coreDNS组件

一、概念 coreDNS组件&#xff1a;就是将svc资源的名称解析成ClusterIP&#xff1b; kubeadm部署的k8s集群自带coreDNS组件&#xff0c;二进制部署需要自己手动部署&#xff1b; [rootk8s231 ~]# kubectl get pods -o wide -A k8s系统中安装了coreDNS组件后&#xff0c;会有一个…

ubuntu20.04.6wifi图标消失问题解决方案

介绍 本人电脑 惠普战99 2023版 集显版 双系统&#xff1a;win11 ubuntu 20.04.6LTS 安装ubuntu系统后WiFi图标无法显示&#xff0c;四处寻找方法&#xff0c;得以解决 注意 本人亲测有效&#xff0c;但不保证所有机型适用 方法 下载firmware&#xff1a; 链接: https:…

【算法题】108. 将有序数组转换为二叉搜索树

题目 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例 1&#xff1a; 输入&#xff1a;nums [-10,-3,0…

AcWing1239.乘积最大

[题目概述] 给定 N 个整数 A1,A2,…AN。 请你从中选出 K 个数&#xff0c;使其乘积最大。 请你求出最大的乘积&#xff0c;由于乘积可能超出整型范围&#xff0c;你只需输出乘积除以 1000000009 的余数。 注意&#xff0c;如果 X<0&#xff0c; 我们定义 X 除以 1000000009…

平台组成-门户系统

门户系统是整个平台的门面。从功能上讲&#xff0c;可以区分为内部门户和外部门户。内部门户面向内部应用&#xff0c;是内部管理的入口&#xff0c;一般运行在内网里&#xff1b;外部门户面向公众&#xff0c;是企业宣传、对外服务的窗口&#xff0c;一般运行在外网上。从访问…

20240211-日常学习(嵌入式微处理器)

目录 嵌入式微处理器的存储体系结构指令集主流的嵌入式微处理器 一些具体介绍冯诺依曼/普林斯顿结构ARM系列嵌入式微处理器 嵌入式微处理器的 存储体系结构 冯诺依曼/普林斯顿结构哈佛结构 指令集 RISCCISC 主流的嵌入式微处理器 ARM系列嵌入式微处理器MIPS系列嵌入式微处…

解锁Spring Boot中的设计模式—05.策略模式:探索【策略模式】的奥秘与应用实践!

1.策略者工厂模式&#xff08;Map版本&#xff09; 1.需求背景 假设有一个销售系统&#xff0c;需要根据不同的促销活动对商品进行打折或者其他形式的优惠。这些促销活动可以是针对不同商品类别的&#xff0c;比如男装、女装等。 2.需求实现 活动策略接口&#xff1a;定义了…

Java:集合以及集合进阶 --黑马笔记

一、集合概述和分类 1.1 集合的分类 除了ArrayList集合&#xff0c;Java还提供了很多种其他的集合&#xff0c;如下图所示&#xff1a; 我想你的第一感觉是这些集合好多呀&#xff01;但是&#xff0c;我们学习时会对这些集合进行分类学习&#xff0c;如下图所示&#xff1a;…

112 C++可调用对象,std::function std::bind

一 可调用对象 本节课将可调用对象整理一下 1 函数指针 2.具有operator()成员函数的类对象仿函数&#xff08;&#xff09; 3. 可被转换为函数指针的类对象 4. 类成员函数指针 5.总结 二 std::function(可调用对象包装器) 1.绑定普通函数 2.绑定类的静态成员函数 3.绑定仿函数…

javaweb学习day03(JS+DOM)

一、javascript入门 1 官方文档 地址: https://www.w3school.com.cn/js/index.asp离线文档: W3School 离线手册(2017.03.11 版).chm 2 基本说明 JavaScript 能改变 HTML 内容&#xff0c;能改变 HTML 属性&#xff0c;能改变 HTML 样式 (CSS)&#xff0c;能完成 页面的数据…

K8s进阶之路-Pod的生命周期

Pod创建过程&#xff1a; 首先创建一个pod&#xff0c;然后创建一个API Server 和 Etcd【把创建出来的信息存储在etcd中】 然后创建 Scheduler&#xff0c;监控API Server是否有新的Pod&#xff0c;如果有的话&#xff0c;会通过调度算法&#xff0c;把pod调度某个node上 在nod…

HDR 摄影

HDR 摄影&#xff0c;即高动态范围 High Dynamic Range摄影&#xff0c;旨在通过合并不同曝光值的照片来捕捉场景中从最亮到最暗部分的全部细节。 这种技术对于在一个图像中展现广泛的亮度范围特别有用&#xff0c;尤其是在自然光线条件下&#xff0c;如直射日光或阴影区域&…

力扣代码学习日记四

Problem: 459. 重复的子字符串 文章目录 思路解题方法复杂度代码 思路 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s "abab" 输出: true 解释: 可由子串 "ab" 重复两次构成。示例 2: 输入: s &q…

独孤思维:出了20多单,但优化空间巨大

前些日子&#xff0c;在绝版书陪跑群里&#xff0c;有个学员&#xff0c;说自己买了20多本书。 大家都觉得挺不错的&#xff0c;想听听她分享。 结果分享出来以后&#xff0c;我觉得有很大的优化空间。 虽然她把每个精准的对标店铺&#xff0c;做了筛选。 但是对于单个品&a…

BUGKU-WEB source

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 看源码&#xff0c;看F12网络请求没有东西只能老老实实按照提示用Linux去扫描目录 相关工具 kali虚拟机安装gobuster 或者dirsearch 解题步骤 先查看源码&#xff1a; flag{Zmxhz19ub3RfaGvyzS…

【c++基础】小鱼的航程

说明 有一只小鱼&#xff0c;它上午游泳150公里&#xff0c;下午游泳100公里&#xff0c;晚上和周末都休息&#xff08;实行双休日)&#xff0c;假设从周x(1<x<7)开始算起&#xff0c;请问这样过了n天以后&#xff0c;小鱼一共累计游泳了多少公里呢&#xff1f; 输入数…

枚举,#define,C中程序内存区域划分

目录 一、枚举 1.1枚举类型的声明 1.2枚举类型的优点 1.3枚举类型的使用 二、#define定义常量 三、C中程序内存区域划分 一、枚举 1.1枚举类型的声明 枚举顾名思义就是⼀⼀列举。 把可能的取值⼀⼀列举。 比如我们现实生活中&#xff1a; ⼀周的星期⼀到星期日是有限…

自研爬虫框架的经验总结(理论及方法)

背景&#xff1a; 由于业务需要&#xff0c;承接一部分的数据采集工作。目前市场内的一些通用框架不太适合。故而进行了自研。 对比自研和目前成熟的框架&#xff0c;自研更灵活适配&#xff0c;可以自己组装核心方法&#xff1b;后者对于新场景的适配需要对框架本身有较高的理…

LeetCode LCR 085. 括号生成

题目链接https://leetcode.cn/problems/IDBivT/description/ 正整数 n 代表生成括号的对数&#xff0c;请设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 class Solution {public List<String> generateParenthesis(int n) {List<String>…

租房招聘|在线租房和招聘平台|基于Springboot的在线租房和招聘平台设计与实现(源码+数据库+文档)

在线租房和招聘平台目录 目录 基于Springboot的在线租房和招聘平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、房屋管理 2、招聘管理 3、平台资讯管理 4、平台资讯类型管理 四、数据库设计 1、实体ER图 六、论文参考 七、最新计算机毕设选题推荐 八、源…