常用的性能优化方法和技巧

常用的性能优化方法和技巧

前端性能优化

  • 减少HTTP请求：就好比你去超市买东西，每次请求就像你跑一趟超市。去的次数越多，花在路上的时间就越多。所以把多个小的资源，像图片、脚本这些，合并成一个大的，就能减少跑超市的次数，让网页加载得更快。比如把几个小图标合并成一个雪碧图（Sprite）。
  • 压缩资源文件：这就像把行李打包压缩，占用的空间就小了，传输起来就快。对代码文件、图片等进行压缩，像用工具把JavaScript和CSS文件压缩一下，去掉没用的空格、注释，图片也可以用专门的工具压缩，在不影响清晰度的情况下让文件变小。
  • 优化图片：除了上面说的压缩图片，还要注意图片格式。比如有些图片用JPEG格式就行，色彩丰富又能压缩得比较小；如果是简单的图标，用SVG格式可能更好，它是矢量图，放大缩小都不会模糊，而且文件还小。
  • 缓存利用：可以想象成你家有个小仓库，第一次从超市买了东西回来放仓库里，下次要用的时候直接从仓库拿，就不用再去超市买了。浏览器缓存就是这个道理，设置好缓存策略，让用户第二次访问网页时，一些不变的资源直接从缓存里取，不用再从服务器下载，速度就快多了。
  • 代码优化：写代码的时候要写得“规矩”点。比如CSS样式尽量写得简洁，不要写很多重复的、没用的代码。JavaScript代码也要优化，像事件委托，不要给每个按钮都单独绑定一个事件，而是把事件绑定在它们的父元素上，这样能减少事件处理函数的数量，提高性能。

后端性能优化

  • 数据库优化
    • 索引优化：索引就像书的目录，有了它找东西就快。给经常用来查询的字段建立索引，这样数据库在查找数据的时候就能很快定位到，不用把所有数据都翻一遍。但也不是索引越多越好，太多索引会占用额外的空间，还会影响数据插入和更新的速度，所以要根据实际情况合理建立索引。
    • 查询优化：写查询语句的时候要写得好。比如尽量避免使用 SELECT *，只查询你需要的字段，这样能减少数据传输量。还有要注意查询条件，尽量让查询条件能用上索引，像不要在索引字段上使用函数，不然索引可能就用不上了。
    • 缓存数据：和前端缓存类似，后端也可以把一些经常访问的数据缓存起来。比如一些不经常变化的配置信息、热门数据等，放在缓存里，下次要访问的时候直接从缓存取，不用再去数据库查，能大大提高查询速度。常见的缓存工具像Redis。
  • 服务器配置优化
    • 合理分配资源：服务器就像一个工厂，有CPU、内存、硬盘等资源。要根据项目的实际需求，合理分配这些资源。如果项目计算量比较大，就多给CPU一些资源；如果数据量大，需要频繁读写硬盘，就优化硬盘配置，或者用固态硬盘（SSD），它的读写速度比普通机械硬盘快很多。
    • 负载均衡：当有很多用户访问你的网站或应用时，一台服务器可能扛不住，这时候就需要多台服务器一起工作。负载均衡就是把用户的请求均匀地分配到不同的服务器上，让它们一起分担压力，就像很多人一起干活，效率就高了，也不容易出问题。

移动端性能优化

  • 减少电量消耗
    • 优化网络请求：手机网络有时候不太稳定，而且很耗电。所以要尽量减少不必要的网络请求，能合并的请求就合并。比如一个页面要加载多个数据，不要一个一个地请求，尽量把它们合并成一个请求，这样既能减少网络连接次数，又能省电。
    • 合理使用定位服务：定位功能很耗电，如果不是必须实时获取位置信息，就不要频繁地获取用户位置。比如一个地图应用，不需要一直更新位置的时候，就可以把定位频率调低一些。
  • 优化布局和渲染
    • 使用合适的布局方式：移动端屏幕大小不一，要使用响应式布局或者适配不同屏幕尺寸的布局方式，让页面在各种手机上都能显示得好看、流畅。比如用Flex布局，它能很方便地让元素自适应屏幕大小和排列方式。
    • 图片处理：和前端优化图片类似，要根据手机屏幕的分辨率和密度，提供合适尺寸的图片。比如在高清屏手机上用高清图片，在普通屏手机上用小一点的图片，这样既能保证图片质量，又能减少下载量，加快页面渲染速度。

下面是一些常见的前端性能优化方法和技巧：

代码层面优化

1. 压缩代码

代码就像是房子里的家具，如果家具摆放得乱七八糟，不仅占地方，还会让房子显得拥挤。代码也是一样，多余的空格、注释就像那些没用的杂物，会让文件变大。压缩代码就是把这些“杂物”清理掉，让代码变得紧凑。

比如，原本的 JavaScript 代码：

// 这是一个计算两个数之和的函数
function add(a, b) {return a + b;
}

压缩后就变成：

function add(a,b){return a+b}

这样文件体积变小了，浏览器加载起来就更快。现在有很多工具可以帮我们压缩代码，像 UglifyJS 就能压缩 JavaScript 代码，CSSNano 可以压缩 CSS 代码。

2. 代码分割

想象一下，你要把很多东西搬到房子里，如果一次性搬太多，会很累而且可能搬不动。代码分割就像是把这些东西分成小份，一次搬一点。在前端开发中，尤其是单页面应用（SPA），有时候代码量很大，如果一次性加载所有代码，会让页面加载时间变长。

比如使用 Webpack 进行代码分割，我们可以把一些不常用的代码（像某些特定页面的代码）单独打包成一个文件，等用户访问到对应的页面时再加载这些代码。示例代码如下：

// 在路由配置中使用动态导入实现代码分割
const routes = [{path: '/home',name: 'Home',component: () => import('./views/Home.vue')},{path: '/about',name: 'About',component: () => import('./views/About.vue')}
];
3. 避免内联样式和脚本

内联样式和脚本就像是把家具直接钉在地上，虽然方便，但不利于维护和复用。而且如果内联的代码很多，会让 HTML 文件变得很大，影响加载速度。

比如，不要这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div style="color: red;">这是一段红色文字</div><script>console.log('这是内联脚本');</script>
</body>
</html>

而是把样式放到 CSS 文件里，脚本放到 JavaScript 文件里：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="red-text">这是一段红色文字</div><script src="script.js"></script>
</body>
</html>

styles.css 文件：

.red-text {color: red;
}

script.js 文件：

console.log('这是外部脚本');

资源层面优化

1. 图片优化

图片就像是房子里的装饰品，如果图片太大，会让房子的“负担”加重。我们可以对图片进行压缩，减少图片的体积。比如使用 TinyPNG 这样的工具，它可以在不损失太多图片质量的前提下，大幅减小图片的大小。

另外，选择合适的图片格式也很重要。像 JPEG 格式适合色彩丰富的照片，PNG 格式适合透明背景的图片，WebP 格式则是一种新的图片格式，它在压缩率和质量上都有不错的表现。

2. 字体优化

字体就像是房子里的文字风格，如果加载的字体文件太大，会影响页面加载速度。我们可以只加载页面中实际使用的字体子集，减少字体文件的大小。

比如，在使用 Google Fonts 时，可以通过指定需要的字符集来减少字体文件的下载量：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap&text=HelloWorld" rel="stylesheet">

这里的 text=HelloWorld 表示只加载 HelloWorld 这些字符所需的字体数据。

加载层面优化

1. 懒加载

懒加载就像是你去超市买东西，不是一次性把所有东西都买回家，而是等需要的时候再去买。在前端中，懒加载通常用于图片和组件。

比如图片懒加载，使用 loading="lazy" 属性：

<img src="example.jpg" alt="示例图片" loading="lazy">

这样图片只有在进入浏览器可视区域时才会加载，减少了初始页面的加载时间。

2. 预加载和预渲染

预加载就像是你提前把一些常用的东西准备好，等需要的时候就能马上用。预渲染则是提前把页面渲染好，用户访问时能更快看到内容。

比如预加载 CSS 文件：

<link rel="preload" href="styles.css" as="style">

预渲染页面：

<link rel="prerender" href="https://example.com/about">

缓存层面优化

1. 浏览器缓存

浏览器缓存就像是房子里的储物间，把一些常用的东西放在里面，下次需要的时候可以直接从储物间拿，不用再去外面买。我们可以通过设置 HTTP 头信息来控制浏览器缓存。

比如设置 CSS 文件的缓存：

const http = require('http');
const fs = require('fs');http.createServer((req, res) => {if (req.url === '/styles.css') {res.writeHead(200, {'Content-Type': 'text/css','Cache-Control': 'max-age=3600' // 设置缓存时间为 1 小时});fs.createReadStream('styles.css').pipe(res);}
}).listen(3000);
2. CDN 缓存

CDN（内容分发网络）就像是在不同的地方都有一个小仓库，里面放着你的东西，当用户需要的时候，可以从离他们最近的仓库获取。使用 CDN 可以加快资源的加载速度，因为 CDN 节点分布在全球各地，用户可以从距离自己最近的节点下载资源。

比如使用 CDN 加载 jQuery：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

通过这些性能优化方法和技巧，就可以让你的前端项目像装修得精致又高效的房子一样，给用户带来更好的体验。

Nginx服务器常用性能优化方法和技巧

1. 调整工作进程和连接数
  • 工作进程数：Nginx就像一个大工厂，工作进程就像是工厂里的工人。默认情况下，Nginx会启动一个主进程和多个工作进程来处理请求。工作进程数设置得合适，才能让这个工厂高效运转。
    • 一般来说，你可以把工作进程数设置成和服务器的CPU核心数一样。比如你的服务器有4个CPU核心，那工作进程数就设置为4。这样每个CPU核心都能分配到一个工作进程，充分发挥CPU的性能。在Nginx的配置文件 nginx.conf 里，找到 worker_processes 这一项，把它的值改成你服务器的CPU核心数：
worker_processes 4;
  • 每个进程的最大连接数：每个工作进程能同时处理的连接数也很关键。就好比每个工人在同一时间能接待的客户数量是有限的。你可以通过 worker_connections 来设置这个值。
    • 假设你想让每个工作进程能同时处理1024个连接，就在配置文件里添加或修改这一行：
events {worker_connections 1024;
}
2. 开启Gzip压缩
  • Gzip压缩就像是给你要发送的文件“瘦身”。当用户访问你的网站时，服务器会把网页文件发送给用户的浏览器。如果文件很大，传输就会很慢。开启Gzip压缩后，服务器会先把文件压缩变小，再发送给浏览器，这样传输速度就会快很多。
  • 在 nginx.conf 里添加以下配置来开启Gzip压缩：
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;

- `gzip on` 表示开启Gzip压缩功能。
- `gzip_types` 指定哪些类型的文件需要进行压缩，这里列出了文本、CSS、JSON、JavaScript等常见的文件类型。
- `gzip_min_length` 表示文件大小超过1000字节才进行压缩，太小的文件压缩后可能也节省不了多少空间，反而增加了压缩的时间。
3. 配置缓存
  • 缓存就像是一个“小仓库”，把一些经常被访问的数据存放在里面。当有新的请求过来时，先去这个“小仓库”里看看有没有需要的数据，如果有就直接拿出来给用户，不用再重新去“大仓库”（比如数据库）里找，这样能大大提高响应速度。
  • 对于静态文件（像图片、CSS、JavaScript文件），可以设置较长的缓存时间。在Nginx配置文件里添加以下配置：
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {expires 30d;
}

- `location ~* \.(jpg|jpeg|png|gif|ico|css|js)$` 表示匹配以这些扩展名结尾的文件。
- `expires 30d` 表示这些文件的缓存时间是30天，也就是说在这30天内，浏览器再次请求这些文件时，会先从本地缓存里找，而不是重新从服务器下载。
4. 负载均衡
  • 假如你的网站访问量很大，一台服务器可能忙不过来。这时候就可以用多台服务器一起工作，Nginx就可以充当“调度员”，把用户的请求均匀地分配到不同的服务器上，这就是负载均衡。
  • 比如你有两台服务器，IP地址分别是 192.168.1.100 和 192.168.1.101，可以在Nginx配置文件里这样配置：
upstream backend {server 192.168.1.100;server 192.168.1.101;
}server {location / {proxy_pass http://backend;}
}

- `upstream backend` 定义了一个名为 `backend` 的服务器组，里面包含了两台服务器。
- `proxy_pass http://backend` 表示把所有请求都代理到这个服务器组里，Nginx会自动把请求分配到这两台服务器上。
5. 优化日志记录
  • 日志记录虽然很重要，能帮助你了解服务器的运行情况和用户的访问行为，但如果记录得太详细，会占用很多服务器的资源。所以可以根据实际需求，调整日志记录的级别和内容。
  • 如果你只需要记录一些关键信息，可以把日志级别设置得高一些。在 nginx.conf 里修改 access_log 和 error_log 的配置：
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log warn;

- `access_log` 记录用户的访问日志，`main` 是日志格式。
- `error_log` 记录服务器的错误日志，`warn` 表示只记录警告级别及以上的错误信息，这样可以减少不必要的日志记录，节省服务器资源。

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

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

相关文章

网络协议相关知识有哪些？

网络协议相关知识有哪些？

前言 网络协议的基础是OSI和TCP/IP模型，这两个模型是理解协议分层的关键。 正文（仅是个人理解，如有遗漏望海涵） 网络协议是网络中设备间通信的规则和标准，涉及数据传输、路由、错误控制等多个方面。以下是网络协议相关知识的系统梳理： 一、网络协议分层模型 1、OSI七…
阅读更多...
鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API（@ohos.animator (动画) ）

鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API（@ohos.animator (动画) ）

前言 在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式&#xff0c;但是今天介绍的是ApI中的自定义动画。 注意: 动画本身具有生命周期&#xff0c;但是不支持在UIAbility的文件使用&#xff0c;简单而言就是不允许在UIAbility生命周期中…
阅读更多...
搭建Kubernetes (K8s) 集群----Centos系统

搭建Kubernetes (K8s) 集群----Centos系统

前期准备 准备3台Linux虚拟机&#xff08;CentOS系统&#xff09;&#xff0c;参考 https://carry.blog.csdn.net/article/details/144578009https://carry.blog.csdn.net/article/details/144578009搭建Docker环境&#xff0c;参考 https://carry.blog.csdn.net/article/de…
阅读更多...
wps中的js开发

wps中的js开发

严格区分大小写 /*** learn_js Macro*/ function test() {Range(D7).Value2Selection.Value2; // Selection.formula "100" }function Workbook_SheetSelectionChange(Sh, Target) {if(Sh.Name Sheet1) {test();}}function test2() {// 把I4单元格及其周边有数的单…
阅读更多...
第3章 3.2 配置系统 .NET Core配置系统

第3章 3.2 配置系统 .NET Core配置系统

3.2.1 配置系统的基本使用 .NET Core中的配置系统支持非常丰富的配置源&#xff0c;包括文件&#xff08;JSON、XML、INI等&#xff09;、注册表、环境变量、命令行、Azure Key Vault等&#xff0c;配置系统还支持自定义配置源。 用配置系统开发包Microsoft.Extensions.Confi…
阅读更多...
第六届计算机信息和大数据应用国际学术会议（CIBDA 2025）

第六届计算机信息和大数据应用国际学术会议（CIBDA 2025）

重要信息 大会官网&#xff1a;www.ic-cibda.org&#xff08;了解会议&#xff0c;投稿等&#xff09; 大会时间&#xff1a;2025年3月14-16日 大会地点&#xff1a;中国-武汉 简介 第六届计算机信息和大数据应用&#xff08;CIBDA 2025&#xff09;将于2025年3月14-16日在中国…
阅读更多...
Mac M3/M4 本地部署Deepseek并集成vscode

Mac M3/M4 本地部署Deepseek并集成vscode

Mac 部署 使用傻瓜集成平台ollama&#xff0c;ollama平台依赖于docker&#xff0c;Mac的M3/M4 因doesn’t have VT-X/AMD-v enabled 所以VB,VM无法使用&#xff0c;导致docker无法启动&#xff0c;需要使用docker的替代品podman&#xff0c; 它完全兼容docker brew install p…
阅读更多...
最优化方法-牛顿法

最优化方法-牛顿法

牛顿法 泰勒级数 泰勒级数展开 $$ \begin{aligned} f(x)&\lim\limits_{n\rightarrow \infin}\sum\limits_{i1}n\frac{1}{n!}f{(n)}(x_0)(x-x_0)^n\ &f(x_0)f’(x_0)(x-x_0)\frac{f’(x_0)}{2!}(x-x_0)2\cdots\frac{1}{n!}fn(x_0)(x-x_0)^n\ &\quad~ O\left[(x-x_…
阅读更多...
【系统架构】分布式事务模型详解

【系统架构】分布式事务模型详解

1. 分布式基础理论 1.1 CAP理论 CAP 理论可以表述为&#xff0c;一个分布式系统最多只能同时满足一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容错性&#xff08;Partition Tolerance&#xff09;这三项中的两项。 一致性是…
阅读更多...
「正版软件」PDF Reader - 专业 PDF 编辑阅读工具软件

「正版软件」PDF Reader - 专业 PDF 编辑阅读工具软件

PDF Reader 轻松查看、编辑、批注、转换、数字签名和管理 PDF 文件&#xff0c;以提高工作效率并充分利用 PDF 文档。 像专业人士一样编辑 PDF 编辑 PDF 文本 轻松添加、删除或修改 PDF 文档中的原始文本以更正错误。自定义文本属性&#xff0c;如颜色、字体大小、样式和粗细。…
阅读更多...
使用GDI+、文件和目录和打印API，批量将图片按文件名分组打包成PDF

使用GDI+、文件和目录和打印API，批量将图片按文件名分组打包成PDF

代码写了两个小时&#xff0c;速度太慢&#xff08;包括学习文档的时间&#xff09; #include <stdio.h> #include <Windows.h> #include <gdiplus.h> #include <string.h> using namespace Gdiplus; #pragma comment(lib, "Gdiplus.lib") …
阅读更多...
设计模式教程：责任链模式（Chain of Responsibility Pattern）

设计模式教程：责任链模式（Chain of Responsibility Pattern）

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种常用的设计模式&#xff0c;它属于行为型模式&#xff0c;主要解决的是多个对象处理一个请求时&#xff0c;如何解耦请求的发送者和接收者&#xff0c;以及如何将请求的处理职责分配给不同的对象。 1…
阅读更多...
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）

鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）

前言&#xff1a; 这个模块可以截取组件的图片&#xff0c;无论组件是否已加载。截图只能拍到组件本身的大小区域。 如果组件或其子组件画得超出了自己的区域&#xff0c;超出的部分不会出现在截图中。截图不会拍到与当前组件平级的&#xff08;兄弟&#xff09;组件。 模块简…
阅读更多...
解决 LeetCode 串联所有单词的子串问题

解决 LeetCode 串联所有单词的子串问题

问题描述 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff0c; 那么 &q…
阅读更多...
OpenCV机器学习（10）训练数据的一个核心类cv::ml::TrainData

OpenCV机器学习（10）训练数据的一个核心类cv::ml::TrainData

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::ml::TrainData 类是 OpenCV 机器学习模块中用于表示训练数据的一个核心类。它封装了样本数据、响应&#xff08;标签&#xff09;、样本权重…
阅读更多...
在 Mac ARM 架构 (Apple Silicon，例如 M1, M2, M3 芯片) 上使用官方安装包安装 MySQL

在 Mac ARM 架构 (Apple Silicon，例如 M1, M2, M3 芯片) 上使用官方安装包安装 MySQL

在 Mac ARM 架构 (Apple Silicon&#xff0c;例如 M1, M2, M3 芯片) 上使用官方安装包安装 MySQL&#xff0c;步骤与在 Intel Mac 上类似&#xff0c;但需要确保下载的是 ARM 架构兼容的版本。以下是详细的安装步骤&#xff1a; 步骤 1: 下载 MySQL Community Server DMG 安装…
阅读更多...
以ChatGPT为例解析大模型背后的技术

以ChatGPT为例解析大模型背后的技术

目录 1、大模型分类 2、为什么自然语言处理可计算&#xff1f; 2.1、One-hot分类编码&#xff08;传统词表示方法&#xff09; 2.2、词向量 3、Transformer架构 3.1、何为注意力机制&#xff1f; 3.2、注意力机制在 Transformer 模型中有何意义&#xff1f; 3.3、位置编…
阅读更多...
AI训练中的常用指令

AI训练中的常用指令

以下是一些常用于深度学习训练的 Linux 指令&#xff0c;可以帮助你高效管理和执行训练任务&#xff1a; 文件管理 查看当前目录内容&#xff1a;ls进入目录&#xff1a;cd 路径/到/目录创建新目录&#xff1a;mkdir 新目录名称删除文件或目录&#xff1a; 删除文件&#xff…
阅读更多...
【ARM入门指南】一文搞懂什么是ARM

【ARM入门指南】一文搞懂什么是ARM

在单片机与嵌入式系统的浩瀚宇宙中&#xff0c;ARM架构犹如一颗耀眼的星辰&#xff0c;持续引领着技术创新的潮流。对于刚刚踏入这一领域的初学者而言&#xff0c;深入了解ARM是迈入嵌入式开发大门的关键一步。ARM&#xff0c;这个名字背后&#xff0c;不仅代表着一家在半导体设…
阅读更多...
接口测试-API测试中常用的协议（下）

接口测试-API测试中常用的协议（下）

一、RPC RPC&#xff08;Remote Procedure Call&#xff09;即远程过程调用协议&#xff0c;它允许程序调用位于其他计算机上的程序中的过程或函数&#xff0c;就像调用本地程序中的过程一样。下面从其概念、工作原理、特点、应用场景等方面详细介绍&#xff1a; 概念起源与核…
阅读更多...
最新文章

Copyright @ 2022~2023