单页面应用（SPA）是一种现代化的 web 应用程序设计方式，它通过异步请求数据和部分页面更新来实现快速响应用户的操作。然而，由于 SPA 应用所依赖的资源量较大，网络请求时间就成了 SPA 应用性能优化的重要方面。本文将分享一些优化网络请求时间的技巧和方法。
一、使用 CDN
CDN（内容分发网络）是指将 web 页面所需要的各种资源文件（包括 HTML、CSS、JavaScript、图片、音视频等）分布到多个节点的服务器上，当用户访问某个网站时，会自动调用距离用户最近的服务器进行资源请求。使用 CDN 可以使用户获得更快的响应速度和下载速度，从而提高用户的使用体验。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
二、使用 HTTP/2
HTTP/2 是 HTTP 协议的新版本，在数据传输、请求资源管理、多路复用等方面大大优化了原有的 HTTP/1.x 版本。使用 HTTP/2 可以减少许多请求的次数，从而减少传输数据的时间和网络延迟。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------------
-------
------
---------- ---------
------- -----------------------------
------- --------------------------------
-------
-------三、使用资源压缩
资源压缩是指将资源文件（包括 JavaScript、CSS、HTML 等）进行压缩和减小文件体积，从而减少传输时间和网络延迟。常用的资源压缩工具包括 Gzip 和 Brotli 等。
-- -------------------- ---- ------- -- ---- -- ----- ---- - ---------------- ----- -- - -------------- ----- ---- - ------------------ ----- ------ - --------------------------------- ----- --- - ------------------------------------- ---------------------------- -- ------ -- ----- ------ - ------------------ ----- ----- - ------------------ --------- ----- ---------- - ----------------------- ------------------------
四、使用缓存
缓存是指将资源文件存储在本地或远程服务器上，当资源被请求时，只需要从缓存中获取资源，从而减少资源请求的时间和带宽消耗。常用的缓存技术包括 localStorage、sessionStorage 和浏览器缓存等。
// localStorage 缓存
localStorage.setItem('key', 'value');
localStorage.getItem('key');
// sessionStorage 缓存
sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');
// 浏览器缓存
app.use(express.static(path.join(__dirname, 'public'), {maxAge: 86400000}));五、使用懒加载
懒加载是指将页面上的资源延迟加载，直到用户需要访问它时才进行加载，从而减少资源请求的时间和带宽消耗。懒加载技术通常应用于图片、视频和直播等资源上。
-- -------------------- ---- -------
-- -----
---- -------------------- -----------------
------- -----------------------------
------- -------------------------------
--------
------------ -
--------------------------
---
---------六、使用 HTTP 缓存
HTTP 缓存是指将服务器响应的资源文件缓存到浏览器或 CDN 网络上，当用户再次访问时，只需使用缓存数据，从而减少网络请求时间和带宽消耗。常用的 HTTP 缓存方式包括：Last-Modified、If-Modified-Since、ETag 和 If-None-Match 等。
-- -------------------- ---- -------
-- ------------- - -----------------
--------------------- ------------- ---- -
----- ----- - -------------------------
----- ------------ - --------------------------
-- --------------------------------- --- ------------- -
------------------ ---- -----------
----------
- ---- -
------------------------------ --------------
------------------ ------
-------------------------------------------
-
---
-- ---- - -------------
--------------------- ------------- ---- -
----- ----- - -------------------------
----- ---- - ------------------
-- ----------------------------- --- ----- -
------------------ ---- -----------
----------
- ---- -
--------------------- ------
------------------ ------
-------------------------------------------
-
---结论
网络请求时间在 SPA 应用性能优化中起着至关重要的作用。本文介绍了几种常用的优化网络请求时间的技巧和方法，包括使用 CDN、HTTP/2、资源压缩、缓存、懒加载和 HTTP 缓存等。如果你正在开发 SPA 应用程序，希望这些技巧和方法能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673851f2317fbffedf0f95fc