面试题-性能优化
前端项目优化:
一般考虑方面: (挑几点记住)
-
我们学的: 懒加载: 路由、图片懒加载
骨架屏的使用
-
压缩文件:可以使用压缩工具(如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的资料从专业入门到高级教程工具包」,点个关注,全部无偿共享给大家&…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent
安全大模型训练计划:基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标:为安全大模型创建高质量、去偏、符合伦理的训练数据集,涵盖安全相关任务(如有害内容检测、隐私保护、道德推理等)。 1.1 数据收集 描…...
掌握 HTTP 请求:理解 cURL GET 语法
cURL 是一个强大的命令行工具,用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中,cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...

WebRTC调研
WebRTC是什么,为什么,如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

OPENCV图形计算面积、弧长API讲解(1)
一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积,这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能,常用的API…...