在前端性能优化中，网络请求的优化是关键一环。多数网页加载过程都涉及大量网络请求，其效率直接影响页面加载速度和用户体验。优化网络请求可从减少请求数量、优化请求资源大小以及合理安排加载顺序等方面入手。
4.1 减少请求数量
4.1.1 合并文件
将多个小文件合并成一个大文件，能显著减少网络请求次数。在前端开发里，常把多个CSS文件合并为一个，多个JavaScript文件也合并为一个。例如，一个电商网站有用于基础样式的 base.css 、控制商品列表布局的 product - list.css 和设置按钮样式的 button.css 三个CSS文件。在构建过程中，利用Webpack等构建工具，通过相应配置将它们合并成 styles.css 。同理，把负责数据请求的 api.js 、处理用户交互逻辑的 interaction.js 和页面初始化的 init.js 合并成 main - bundle.js 。这样，浏览器只需发起一次CSS请求和一次JavaScript请求，而不是六次，极大节省了建立连接、传输数据等开销，加快页面加载速度。
错误示范：如果不进行文件合并，在HTML中分别引入多个小文件：
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="product - list.css">
<link rel="stylesheet" href="button.css">
<script src="api.js"></script>
<script src="interaction.js"></script>
<script src="init.js"></script>
这会导致浏览器发起多次请求，每次请求都需要经历DNS解析、TCP连接建立等过程，增加了额外的时间开销，使得页面加载缓慢，尤其是在网络状况不佳时，这种情况会更加明显。
4.1.2 精灵图（Sprite）技术
对于网页中众多小图标，使用精灵图技术能有效减少请求。精灵图是把多个小图标整合到一张大图片里。比如，一个社交网站的导航栏有首页、消息、好友、设置等图标，将这些图标合并成一张精灵图。在CSS中，通过 background - image 属性引入精灵图，并利用 background - position 属性精准定位显示每个小图标。假设精灵图中每个图标的大小为32px×32px，当要显示首页图标时，CSS代码如下：
.home - icon {
width: 32px;
height: 32px;
background - image: url('sprite.png');
background - position: 0 0;
}
这样，原本需多次请求的小图标，现在只需一次请求，减少网络开销，提升页面加载性能 。
错误示范：如果不使用精灵图，每个图标单独请求：
<a href="#" class="home - icon"><img src="home.png" alt="首页"></a>
<a href="#" class="message - icon"><img src="message.png" alt="消息"></a>
<a href="#" class="friend - icon"><img src="friend.png" alt="好友"></a>
<a href="#" class="settings - icon"><img src="settings.png" alt="设置"></a>
每个图标都需要一次网络请求，大大增加了请求数量，不仅浪费网络资源，还会导致页面加载时间延长，特别是在图标数量较多的情况下，对页面性能影响更为严重。
4.2 优化请求资源大小
4.2.1 代码压缩
对HTML、CSS和JavaScript代码进行压缩，能去除不必要的空格、注释和冗余代码，减小文件体积。例如，使用UglifyJS压缩JavaScript代码，原本可读性强但体积较大的代码：
function add(a, b) {
// 这是一个用于加法运算的函数
return a + b;
}
压缩后变为：
function add(a,b){return a+b}
CSS可使用cssnano工具压缩，去除注释、合并重复规则等。例如，下面的CSS代码：
/* 这是设置段落的样式 */
p {
font - size: 16px;
color: #333;
line - height: 1.5;
}
/* 这是设置标题的样式 */
h1 {
font - size: 24px;
color: #000;
margin - bottom: 10px;
}
经过cssnano压缩后可能变为：
p{font - size:16px;color:#333;line - height:1.5}h1{font - size:24px;color:#000;margin - bottom:10px}
HTML也有相应压缩工具，去除多余空格和注释，让文件变小，传输更快。
错误示范：如果在生产环境中不进行代码压缩，直接使用未压缩的代码，会导致文件体积过大。例如一个包含大量JavaScript代码的页面，未压缩的JavaScript文件可能有几百KB甚至更大，而经过压缩后可能只有几十KB。在网络传输时，大文件需要更长的时间，会显著延长页面的加载时间，降低用户体验。
4.2.2 图片压缩
图片通常占据网页较大的带宽，对其进行合理压缩能显著优化性能。可以使用专业的图片压缩工具，如TinyPNG，它能在保证图片质量基本不变的前提下，大幅减小PNG和JPEG图片的文件大小。对于JPEG图片，适当降低画质（在可接受范围内）也能减小文件体积。例如，一张原本500KB的产品展示JPEG图片，经过压缩后可能降至100KB左右，既不影响用户查看，又能加快加载速度，减少网络流量消耗 。
错误示范：如果直接使用未经压缩的高清图片，比如一张用于普通网页展示的风景图片，原始文件大小为2MB，在网页加载时，这个大文件会占用大量的网络带宽，导致页面加载缓慢，特别是在移动网络环境下，加载时间可能会非常长，甚至可能导致用户因为等待时间过长而离开页面。
4.3 优化资源加载顺序
4.3.1 关键资源优先加载
明确页面的关键资源并优先加载，能确保用户尽早看到关键内容。对于HTML页面，关键CSS应放在 标签内尽早加载，这样页面初始渲染时就能呈现正确样式，避免“FOUC”（无样式内容闪烁）现象。例如，控制页面基本布局和文本样式的 base.css ，需放在 标签中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<link rel="stylesheet" href="base.css">
<title>Document</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
对于JavaScript，若脚本不影响页面初始渲染，可使用 async 或 defer 属性异步加载，如统计脚本 analytics.js ：
<script async src="analytics.js"></script>
async 使脚本异步加载，加载完成立即执行； defer 让脚本在页面解析完成后按顺序执行，都能减少对关键资源加载的阻塞。
错误示范：如果将关键CSS放在 标签底部加载：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<!-- 页面内容 -->
<link rel="stylesheet" href="base.css">
</body>
</html>
这会导致页面在加载时先显示无样式的内容，然后再闪烁切换为有样式的状态，严重影响用户体验。如果将影响页面初始渲染的JavaScript脚本放在 标签中且没有使用 async 或 defer 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>Document</title>
<script src="heavy - script.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
浏览器会在解析HTML时暂停，等待 heavy - script.js 下载和执行完毕，这会阻塞页面的渲染，导致页面加载缓慢，用户看到空白页面的时间变长。
4.3.2 懒加载非关键资源
对于非关键资源，如页面滚动到特定位置才显示的图片、折叠面板展开时才需的脚本等，采用懒加载技术。以图片懒加载为例，在HTML中使用 loading=“lazy” 属性：
<img src="image.jpg" alt="示例图片" loading="lazy">
这样，图片在即将进入视口时才开始加载，避免页面初始加载时过多资源请求，加快关键内容的呈现速度，提升用户体验 。
错误示范：如果不使用懒加载，所有图片都在页面初始加载时请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<title>Document</title>
</head>
<body>
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
<!-- 更多图片 -->
</body>
</html>
在一个包含大量图片的页面中，这种方式会导致页面初始加载时请求过多，资源竞争激烈，关键内容的加载被延迟，用户需要等待较长时间才能看到页面的主要内容，尤其是在网络较差的情况下，页面加载会变得异常缓慢。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
