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

互联网
2025-08-24 16:27:02

常用的性能优化方法和技巧前端性能优化减少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 时，可以通过指定需要的字符集来减少字体文件的下载量：

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

加载层面优化 1. 懒加载

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

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

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

2. 预加载和预渲染

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

比如预加载 CSS 文件：

预渲染页面：

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

比如设置 CSS 文件的缓存：

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

比如使用 CDN 加载 jQuery：

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

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` 表示只记录警告级别及以上的错误信息，这样可以减少不必要的日志记录，节省服务器资源。

标签：

常用的性能优化方法和技巧由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“常用的性能优化方法和技巧”

上一篇
AdpativeCursorSharing引发的Oracle

下一篇
硬件学习笔记--46电能表影响量试验梳理