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

news/2025/2/21 7:50:55

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

前端性能优化

  • 减少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.niftyadmin.cn/n/5860488.html

相关文章

#渗透测试#批量漏洞挖掘#畅捷通T+远程命令执行漏洞

#渗透测试#批量漏洞挖掘#畅捷通T+远程命令执行漏洞

免责声明 本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。 目录 一、漏洞概况 二、攻击特征 三、应急处置…
阅读更多...
selenium爬取苏宁易购平台某产品的评论

selenium爬取苏宁易购平台某产品的评论

目录 selenium的介绍 1、 selenium是什么&#xff1f; 2、selenium的工作原理 3、如何使用selenium&#xff1f; webdriver浏览器驱动设置 关键步骤 代码 运行结果 注意事项 selenium的介绍 1、 selenium是什么&#xff1f; 用于Web应用程序测试的工具。可以驱动浏览…
阅读更多...
详解同为科技桌面PDU系列产品特点

详解同为科技桌面PDU系列产品特点

同为科技的桌面PDU系列产品是依据自身在电气联接领域25年专业积累并精心设计&#xff0c;产品采用模块化结构&#xff0c;实现各种功能、输出插口、输入方式可根据用户需求以模块组合的方式构建定制化产品。 桌面PDU产品特点 工业级材质和结构设计 桌面PDU系列产品采用一体成…
阅读更多...
计算机专业知识【局域网（LAN）标准与国际标准化组织（ISO）]

计算机专业知识【局域网（LAN）标准与国际标准化组织（ISO）]

在计算机网络领域&#xff0c;局域网&#xff08;LAN&#xff09;是一种常见且重要的网络类型。很多人会疑惑 LAN 的国际标准是否由国际标准化组织&#xff08;ISO&#xff09;制定&#xff0c;下面我们就来详细探讨这个问题&#xff0c;并介绍 ISO 制定过的一些重要标准。 一…
阅读更多...
多进程（1）

多进程（1）

1.多任务&#xff1a;让系统同时具备处理多个任务的能力。 2.方法&#xff1a;多进程&#xff1b;多线程&#xff1b; 3.进程&#xff1a;正在执行的程序&#xff0c;需要消耗cpu和内存&#xff0c;一个动态执行的过程。 4.进程和程序的区别&#xff1a; &#xff08;1&…
阅读更多...
UNIAPP开发之利用阿里RTC服务实现音视频通话后端THINKPHP5

UNIAPP开发之利用阿里RTC服务实现音视频通话后端THINKPHP5

下面是一个使用ThinkPHP 5实现后端逻辑的示例。我们将创建一个简单的ThinkPHP 5项目来处理生成推流和播流地址的请求。 后端部分&#xff08;ThinkPHP 5&#xff09; 1. 初始化ThinkPHP 5项目 首先&#xff0c;确保你已经安装了Composer。然后使用Composer创建一个新的Think…
阅读更多...
leetcode:3110. 字符串的分数（python3解法）

leetcode:3110. 字符串的分数（python3解法）

难度&#xff1a;简单 给你一个字符串 s 。一个字符串的 分数 定义为相邻字符 ASCII 码差值绝对值的和。 请你返回 s 的 分数 。 示例 1&#xff1a; 输入&#xff1a;s "hello" 输出&#xff1a;13 解释&#xff1a; s 中字符的 ASCII 码分别为&#xff1a;h 104 …
阅读更多...
修改阿里云服务器内网ip

修改阿里云服务器内网ip

运维同事问能不能改我自己的服务内网ip&#xff0c; 买了一台服99元服务器&#xff0c;以为不能结果&#xff0c;结果还真改成功了&#xff0c; 分享一下经验。 首先最后关闭服务器-关机&#xff0c;必须要关闭服务 访问vpc控制台&#xff0c;就是要新建立一个网络 https://…
阅读更多...
最新文章

Copyright @ 2022~2023