前言： 在现如今快节奏的互联网时代，用户要求的网站性能越来越高，响应速度越来越快。因此，对于前端工程师来说，性能优化变得更加重要。在此篇文章中，我们将分享 21 种高级调优技巧，详细且有深度，希望对您在前端性能优化方面有所帮助。
1. 减少 HTTP 请求数
HTTP 请求是前端性能中最关键的部分之一。每次发出 HTTP 请求都会产生一些开销，所以减少 HTTP 请求数将极大地提高页面的加载速度。这里有几种方法可以减少 HTTP 请求数：
- 使用 CSS 雪碧图来合并小图标。
- 将多个 JavaScript 文件合并为一个文件。
- 使用字体图标代替图像，这样只需要一个字体文件即可。
-- -------------------- ---- ------- -- --- ----- ---------- - -------------------- ----- ------ ------ ----- ------- ----- - ------------- - -------------------- ----- ------ ------ ----- ------- ----- -
2. 压缩文件大小
压缩文件大小可以减少 HTTP 的传输时间。虽然像 gzip 这样的开源技术已经普及，但是在 JavaScript 和 CSS 文件中都有很多不必要的字符和空格。可以使用它们的压缩版本来替代原始版本。
// 压缩 JS 及 CSS 文件示例 uglifyjs script.js -m -c -o script.min.js cssnano style.css > style.min.css
3. 延迟加载
延迟加载可以将一些不必要的资源异步加载，从而减少了首次加载时间。这里有几种方法可以延迟加载资源：
- 图片延迟加载：图片没有在首屏展示时，可以使用 lazyLoad 轮廓图或占位图的方式载入，当进入视口时再加载真实图片。
- JavaScript 延迟加载：可以将一些不必要的 JavaScript 代码通过异步加载的方式延迟加载。
- 无需文件：可以通过代码分割的方式，将较少使用的部分剥离出来，作为一个小模块在需要时动态加载。
-- -------------------- ---- -------
-- --------
---- ------------- ----------------------
------------------ ------
-------- ------------------ -
--- ------ - ------------------------------------------------
---------------------- -- -
------------------------- --------------------------------
------------ - -- -- -
----------------------------------
------------------- - ----
-
---
-4. 实现缓存
缓存可以避免多次请求同样的数据，从而节省网络时间。我们可以实现以下几种缓存：
- 浏览器缓存：浏览器缓存可以直接在浏览器存储中缓存一些静态文件，如 CSS，JavaScript，图片等。
- 服务端缓存：可以使用服务器缓存技术，如 Memcache 和 Redis 等来缓存一些静态数据。
- CDN 缓存：使用 CDN (Content Delivery Network) 技术分配静态文件到多个服务器上，从而加快页面的加载速度。
// 浏览器缓存示例（设置 Cache-Control，Expires） Cache-Control: max-age=604800, public Expires: Fri, 19 Jun 2020 14:34:45 GMT
5. 减少重绘重排
重绘和重排操作通常是由于 CSS 渲染操作引起的，即修改了元素的样式或布局。然而，当页面执行大量这种操作时，性能可能会受到极大的影响。以下是几个减少重绘和重排的技巧：
- 使用 CSS3 的 transform 和 opacity 属性来实现动画效果，因为它们不会引起重绘和重排。
- 尽量避免使用 table 布局，因为它会强制浏览器在水平和垂直方向上进行重排。
- 一次性操作 DOM，避免频繁修改元素的样式和布局。
// 使用 opacity 来实现动画示例
.box {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.box.hide {
opacity: 0;
}6. 减少 ajax 请求
AJAX 请求可以实现无刷新操作，但是如果页面上大量使用 AJAX，每个请求都占用资源并降低性能。以下是几个减少 AJAX 请求的技巧：
- 使用缓存数据，减少不必要的 AJAX 请求。
- 减少重复请求，通过计算哈希值来判断数据是否有更新。
- 合并多个 AJAX 请求，通过合并请求减少发送请求数量。
-- -------------------- ---- -------
-- -- ---- ----
-------- --------- -
--- ----- - --------------------------------
-- ------- -
------ -----------------------------------
- ---- -
------ ------------------
--------- -- -----------
---------- -- -
------------------------------- ----------------------
------ -----
---
-
-7. 使用 Web Workers
Web Workers 可以在主线程外开启一个子线程，利用多线程并行处理任务。这可以避免长时间运行JavaScript阻塞主线程，并且不会影响页面的性能。
-- -------------------- ---- -------
-- --- ------- ----------
-------- ---------------------- -
--- ------ - --- -----------------------
------------------------
---------------- - --- -- -
-------------------- ------------
-
-------------- - --- -- -
------------------ ----------------------------
-
-
-- ------------
-------- -------------- -
-- ---- --- -- - ------ -- -
-- ---- --- -- - ------ -- -
------ ------------- - -- - ------------- - ---
-
--------- - --- -- -
--- ------ - ------------------
--------------------
-8. 使用 Service Worker
Service Worker 是一项新的技术，它可以缓存和离线使用应用程序的资源，如 HTML，CSS，JavaScript，图片等。使用它可以提供更好的脱机支持和加载速度。
-- -------------------- ---- -------
-- ------- ------ ----
----- --------- - -----------
-------------------------------- ------- -- -
----------------
----------------------------------- -- -
------ --------------
----
--------------
-----------------
------------
---
--
--
---
------------------------------ ------- -- -
------------------
------------------------------------------- -- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---9. 懒加载图片
在一些图片很多，但不是用户一开始就需要展示的页面上使用懒加载可以减少页面加载的时间，这是因为图片需在用户需要时加载。
-- -------------------- ---- -------
-- -- -------------------- --- ---------
--- -- - --- ------------------------------ -- -
----------------------- -- -
-- ---------------------- -
--- --- - -------------
------- - ----------------
---------- - -- -- -
----------------- - ----
-
------------------
-
---
---
--- ------ - ----------------------------------------
---------------------- -- -
------------------
---10. HTTP2
HTTP/2是HTTP协议的最新版本，与HTTP/1相比，要更快，更安全，更高效。
- 用单个连接并行加载多个资源，减少了 TCP 连接的负载。
- 针对每个 HTTP 请求仅仅读取一次，这减少了大量的错误。
- 数据压缩：HTTP/2 增加了数据流压缩，减少了协议开销。
// 开启 HTTP 2 示例（需要 HTTPS 支持）
server {
listen 443 ssl http2;
...
}11. 静态资源使用 CDN
使用 CDN 加速一些静态资源的请求，可以减轻服务器压力，并加快页面的加载速度。
// 使用 CDN 示例 <link href="https://cdn.example.com/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.example.com/jquery.min.js"></script>
12. DNS 预解析
DNS 预解析可以让客户端在接收到 html 响应之前预先解析与该页面相关的所有资源的 DNS 记录。这项技术可以减小页面加载时 DNS 查询的时间。使用方法如下：
// DNS 预解析示例 <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//cdn.example.com">
13. 尽量使用 CSS3 动画
CSS3 动画由于无需 JavaScript 插入、平滑运行等优点而逐渐替代 JavaScript 效果的使用。
-- -------------------- ---- -------
-- -- ---- ----
---------- ------- -
---- -
---------- ---------
-------- --
-
-- -
---------- ------------
-------- --
-
-
-------- -
---------- ------- -- -------- -- ---------
-14. 服务器压缩传输的数据
可以使用服务器端的 GZip 、Deflate 等方式将数据压缩后传输到客户端，减小传输的数据量。
// 服务器端压缩示例（Node.js）
const gzip = require('zlib').createGzip();15. 使用字符串的模板替代字符串连接
使用字符串的模板 literal 可以更加优雅的生成字符串，并且性能优于字符串的拼接操作。
// 使用字符串模板替代字符串拼接示例
let name = 'Foo';
console.log(`Hello, ${name}!`);16. 使用 Webpack 打包优化
使用 Webpack 可以将 CSS 和 JavaScript 打包为单一的文件，并压缩文件大小、优化加载性能。
-- -------------------- ---- -------
-- ------- ----
-------------- - -
------ -
---- ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
------------- -
--------- -----
---------- -
--- --------------
-------------- -
--------- --
--
---------------- ------
---
--
-
-17. 使用局部 HTML 模板
使用局部 HTML 模板可以减少不必要的重绘和重排操作，优化渲染性能。
-- -------------------- ---- -------
---- -- ---- -- ---
---- ------------
---- --------------------
---- --- - --------- ---
---------------
------------ -------
------------ -------
----------- -----------
------------ ---------
------
---- --------------------
---------- --------
------
------
---- ----- ---- -- ---
--------- ------------------
---- ------------
---- --------------------
---- --- - --------- ---
---------------
------------ -------
------------ -------
----------- -----------
------------ ---------
------
---- --------------------
---------- --------
------
------
-----------
--------
-- -- --------------------- ----
--- -------- - ----------------------------------------
--- ----- - ------------------------------------- ------
---------------------------------
---------18. 避免使用 setInterval
setInterval 定时器有反复执行开销的缺陷，可能会重复地调用函数。使用 requestAnimationFrame 和 setTimeout 是更好的选择。
-- -------------------- ---- -------
-- -- --------------------- --
--- ----------
-------- --------- -
-- ------------ - --------- - ---- -
--- -------- - --- - ----------
-- --------- - ----- -
--- ------ - ----------------------------------
----------------- - --------- - --- - -----
----------------------------
-
-
----------------------------19. 避免阻塞主线程
在处理一些耗时任务时，应该将它们放入其他线程或使用 Web Workers，避免造成卡顿或阻塞主线程。
-- -------------------- ---- -------
-- ---------
---------------------------------------------------------- -- -- -
-------------------- -- -
---------------
---
---
-------- ---------- -
------ --- --------------- -- -
------------- -- -
--- ---- - ------------
--------------
-- ------
---
-20. 使用 SVG 代替图片
使用 SVG 绘制矢量图形可以减少文件大小，同时矢量图形可以无限缩放。
<!-- 使用 SVG 代替图片示例 --> <svg viewBox="0 0 100 100"> <rect x="10" y="10" width="80" height="80" fill="red" /> </svg>
21. 减小资源加载大小
减小资源加载大小可以通过以下几种方式实现：
- 压缩资源（HTML、CSS、JS）文件。
- 删除不必要的注释和空格等。
- 在资源上使用 Gzip 压缩方法。
// 压缩 HTML 文件示例
htmlmin("<html>...</html>", {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
});结论
以上就是前端领域基础性能优化的高级技巧。性能环节优化是改善用户体验的重要环节之一，要考虑到各种场景，从开发过程中各个环节都能做得好。在项目中，开发者可根据自己的场景选择技巧并做好实现。最后，性能优化并非一蹴而就，需要持续优化与改进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f11c086fbf96019736ae28