面试题-性能优化
前端项目优化:
一般考虑方面: (挑几点记住)
-
我们学的: 懒加载: 路由、图片懒加载
骨架屏的使用
-
压缩文件:可以使用压缩工具(如GZIP)对页面文件进行压缩,减小文件大小,提高页面加载速度。
-
减少HTTP请求:减少页面元素的请求次数,可以使用雪碧图、字体图标、JS、CSS合并等优化方式,减小文件数量,提高页面加载速度。
-
图片优化:尽量避免在页面中使用大量图片,使用图片时建议进行优化(如进行压缩、减小图片大小等),以提高页面加载速度。
-
JavaScript优化:尽量避免使用全局变量、提取公共方法、减少全局函数调用、异步加载JS文件等,优化JavaScript代码,提高网页响应效率。
-
CSS优化:避免使用不必要的样式、提取重复样式、减少选择器的数量等操作,优化CSS代码,减小页面加载时间。
-
使用CDN:使用CDN可以将静态文件分发到全球多个节点,减少响应时间和资源文件下载时间,加快资源文件传输速度,提高页面性能和用户体验。
减少项目打包体积: (建议记2,3,5)
减小打包后的体积,我们可以采取以下几种方法:
- Tree shaking:webpack内置的功能,打包时自动运行。
- 能剔除掉 JavaScript 中未被使用的代码,当模块 export 的代码没有被其它模块引用时,打包工具会自动将其从依赖树中剔除
- 是基于ES6模块机制实现的,只能对静态代码进行剔除,对于动态,无法进行优化 (静态就是我们常用的export, import ; 动态就是require的)
- 按需引入第三方库:对于一些常用的第三方库,可以只引入自己需要的功能,例如只引入 lodash 中的某个函数。
- 图片和字体资源优化:对于图片资源和字体资源,我们可以将其压缩并进行优化处理,以减小打包后的体积。
对于图片资源,可以采用:- 使用在线图片压缩工具:网上有许多在线图片压缩工具,可以直接上传图片进行压缩,例如:TinyPNG、Compressjpeg等。
- 使用图片处理库:比如说,使用JavaScript图片处理库,如:Sharp等。
- 使用webpack-loader:在webpack中,有一些图片压缩的loader可以用来实现自动压缩图片,如:image-webpack-loader、url-loader、file-loader等。这些loader也可以与其他构建工具一起使用。
- 使用精灵图技术:可以将多张小图片合并成一张图,通过调整图片的位置来显示不同的小图,从而减少网页的加载次数和带宽消耗。
- 减少重复代码:在编写代码时,以通过函数封装、代码抽离等方式减少不必要的重复代码,来减小代码体积。 (尽可能遵循
DRY
原则: Don’t Repeat Yourselt) - 服务器和webpack打包同时配置Gzip:
- 是一种常见的压缩方式,前端开发中,常常将静态资源(如 CSS、JavaScript 和字体等)进行 Gzip 压缩,从而减小文件大小。
- 原理是将文件中出现重复的字符串压缩掉,然后将压缩后的结果和原始文件一起传输给浏览器,浏览器接收到数据后再进行解压缩 (HTTP 协议支持 Gzip 压缩)
- 项目中使用插件可以
vite-plugin-compression
- 后端需要进行相应配置,开启gzip的使用
相关文章:
面试题-性能优化
前端项目优化: 一般考虑方面: (挑几点记住) 我们学的: 懒加载: 路由、图片懒加载 骨架屏的使用 压缩文件:可以使用压缩工具(如GZIP)对页面文件进行压缩,减小文件大小,提高页面加载速度。 减少HTTP请求&a…...
自身文档管理规范
之前在 这里 叙述了 用 sphinx 生成静态网站, 并利用 静态网络托管服务 readthedocs 现在我们有了新的需求,想知道这些东西到底是什么。 过程 过程A : markdown/rst -> html mkdocs sphinx相关: pandoc(不能生成整个网站的h…...

php学习05-常量
常量可以理解为值不变的量。常量值被定义后,在脚本的其他任何地方都不能改变。一个常量由英文字母、下划线和数字组成,但数字不能作为首字母出现。 在PHP中使用define()函数来定义常量,该函数的语法格式如下: define(string cons…...
MFC:如何将JPEG等图片显示到对话框客户区
步骤: 0、打开VS2022创建一个基于对话框的MFC应用,项目名称命名为PicShow,创建完成后将对话框客户区中的"确定"按钮等内容删除(具体步骤略)。 1、建立菜单栏:文件->打开、退出。具体步骤&#x…...
MIUI解BL锁+刷系统教程
解除BL锁 打开设置找到My device->Detailed info and specs->连点5下MIUI version(进入开发者模式)重新打开设置找到Additional settings->Developer opentions->Mi lock status->Add account and device下载官方解锁工具包(miflash_unlock…...
数据结构和算法笔记3:双指针法(快慢指针)
双指针法(快慢指针法)在数组、字符串和链表的操作中是非常常见的,这里结合力扣上的题进行可一下梳理,主要的思路是我们要明确快指针指的是什么,慢指针指的是什么。 1. 移除元素类问题 27. 移除元素 要我们移除目标元…...

股票价格预测 | Python实现Autoformer, FEDformer和PatchTST等模型用于股价预测
文章目录 效果一览文章概述环境描述源码设计效果一览 文章概述 Autoformer、FEDformer和PatchTST是一些用于时间序列预测,包括股价预测的模型。它们都是在Transformer模型的基础上进行了改进和扩展,以更好地适应时间序列数据的特点。 Autoformer:Autoformer是一种自适应Tran…...

Git基础学习_p1
文章目录 一、前言二、Git手册学习2.1 Git介绍&前置知识2.2 Git教程2.2.1 导入新项目2.2.2 做更改2.2.3 Git追踪内容而非文件2.2.4 查看项目历史2.2.5 管理分支🔺2.2.6 用Git来协同工作2.2.7 查看历史 三、结尾 一、前言 Git相信大部分从事软件工作的人都听说过…...
4.Redis事务
4.Redis事务 文章目录 4.Redis事务是什么?能干嘛?Redis 事务 VS 数据库事务命令总结 是什么? 可以一次执行多个命令,本质是一组命令的集合。一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入&…...

golang 图片加水印
需求: 1,员工签到图片加水印 2,水印文字需要有半透明的底色,避免水印看不清 3,图片宽设置在600,小于600或者大于600都需要等比例修改图片的高度,保持水印在图片中的大小和位置 4,处理…...

sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案
sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set问题解决方案 当我们使用sudo su切换权限时提示错误: sudo: /usr/bin/sudo must be owned by uid 0 and have the setuid bit set该错误出现原因:是因为/usr/bin/sudo的权限被…...

提升效率:使用注解实现精简而高效的Spring开发
IOC/DI注解开发 1.0 环境准备1.1 注解开发定义bean步骤1:删除原XML配置步骤2:Dao上添加注解步骤3:配置Spring的注解包扫描步骤4:运行程序步骤5:Service上添加注解步骤6:运行程序知识点1:Component等 1.2 纯注解开发模式1.2.1 思路分析1.2.2 实现步骤步骤1:创建配置类…...
全面好用的setting.xml配置
<?xml version"1.0" encoding"UTF-8"?> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information…...
八股文打卡day14——计算机网络(14)
面试题:TCP的Keepalive和HTTP的Keep-Alive是一个东西吗? 我的回答: TCP的Keepalive 1.位于TCP/IP模型的传输层。 2.是用来判活的。客户端会向服务器发送一个Keepalive包来判断,这个TCP连接是否还存活着。 HTTP中的Keep-Alive 1.…...

NCNN环境部署及yolov5pt转ncnn模型转换推理
该内容还未完整,笔记内容,持续补充。 〇开发环境版本 vs2022 cmake3.21.1 ncnn20231027发行版 yolov5s v6.2 vunlkan1.2.198.1 Protobuf3.20.0 Opencv3.4.1 一、模型转换 yolov5s v6.2训练的pt模型,直接导出tourchscript,…...

selenium模块有哪些用途?
Selenium模块是一个用于Web应用程序测试的模块,具有多种示例用法。以下是一些示例: 1.打开网页并执行一些基本操作,如点击按钮、输入文本等。 定位网页元素并执行操作,例如使用 find_element 方法查找单个元素,使用 f…...

精品Nodejs实现的校园疫情防控管理系统的设计与实现健康打卡
《[含文档PPT源码等]精品Nodejs实现的校园疫情防控管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功! 软件开发环境及开发工具: 操作系统:Windows 10、Windows 7、Win…...

爬虫工作量由小到大的思维转变---<第三十五章 Scrapy 的scrapyd+Gerapy 部署爬虫项目>
前言: 项目框架没有问题大家布好了的话,接着我们就开始部署scrapy项目(没搭好架子的话,看我上文爬虫工作量由小到大的思维转变---<第三十四章 Scrapy 的部署scrapydGerapy>-CSDN博客) 正文: 1.创建主机: 首先gerapy的架子,就相当于部署服务器上的;所以…...

python测试工具: 实现数据源自动核对
测试业务需要: 现有A系统作为下游数据系统,上游系统有A1,A2,A3... 需要将A1,A2,A3...的数据达到某条件后(比如:A1系统销售单提交出库成功)自动触发MQ然后再经过数据清洗落到A系统,并将清洗后数据通过特定…...

要学习openfoam,c++需要掌握到什么程度?
要学习openfoam,c需要掌握到什么程度? 在开始前我有一些资料,是我根据自己从业十年经验,熬夜搞了几个通宵,精心整理了一份「c的资料从专业入门到高级教程工具包」,点个关注,全部无偿共享给大家&…...

【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...

【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...