前端性能优化的 21 种高级调优技巧

前言： 在现如今快节奏的互联网时代，用户要求的网站性能越来越高，响应速度越来越快。因此，对于前端工程师来说，性能优化变得更加重要。在此篇文章中，我们将分享 21 种高级调优技巧，详细且有深度，希望对您在前端性能优化方面有所帮助。

1. 减少 HTTP 请求数

HTTP 请求是前端性能中最关键的部分之一。每次发出 HTTP 请求都会产生一些开销，所以减少 HTTP 请求数将极大地提高页面的加载速度。这里有几种方法可以减少 HTTP 请求数：

  • 使用 CSS 雪碧图来合并小图标。
  • 将多个 JavaScript 文件合并为一个文件。
  • 使用字体图标代替图像，这样只需要一个字体文件即可。
-- --- -----
---------- -
  -------------------- ----- ------
  ------ -----
  ------- -----
-
------------- -
  -------------------- ----- ------
  ------ -----
  ------- -----
-

2. 压缩文件大小

压缩文件大小可以减少 HTTP 的传输时间。虽然像 gzip 这样的开源技术已经普及，但是在 JavaScript 和 CSS 文件中都有很多不必要的字符和空格。可以使用它们的压缩版本来替代原始版本。

-- -- -- - --- ----
-------- --------- -- -- -- -------------
------- --------- - -------------

3. 延迟加载

延迟加载可以将一些不必要的资源异步加载，从而减少了首次加载时间。这里有几种方法可以延迟加载资源：

  • 图片延迟加载：图片没有在首屏展示时，可以使用 lazyLoad 轮廓图或占位图的方式载入，当进入视口时再加载真实图片。
  • JavaScript 延迟加载：可以将一些不必要的 JavaScript 代码通过异步加载的方式延迟加载。
  • 无需文件：可以通过代码分割的方式，将较少使用的部分剥离出来，作为一个小模块在需要时动态加载。
-- --------
---- ------------- ----------------------
------------------ ------
-------- ------------------ -
  --- ------ - ------------------------------------------------
  ---------------------- -- -
    ------------------------- --------------------------------
    ------------ - -- -- -
      ----------------------------------
      ------------------- - ----
    -
  ---
-

4. 实现缓存

缓存可以避免多次请求同样的数据，从而节省网络时间。我们可以实现以下几种缓存：

  • 浏览器缓存：浏览器缓存可以直接在浏览器存储中缓存一些静态文件，如 CSS，JavaScript，图片等。
  • 服务端缓存：可以使用服务器缓存技术，如 Memcache 和 Redis 等来缓存一些静态数据。
  • CDN 缓存：使用 CDN (Content Delivery Network) 技术分配静态文件到多个服务器上，从而加快页面的加载速度。
-- ---------- ----------------------
-------------- --------------- ------
-------- ---- -- --- ---- -------- ---

5. 减少重绘重排

重绘和重排操作通常是由于 CSS 渲染操作引起的，即修改了元素的样式或布局。然而，当页面执行大量这种操作时，性能可能会受到极大的影响。以下是几个减少重绘和重排的技巧：

  • 使用 CSS3 的 transform 和 opacity 属性来实现动画效果，因为它们不会引起重绘和重排。
  • 尽量避免使用 table 布局，因为它会强制浏览器在水平和垂直方向上进行重排。
  • 一次性操作 DOM，避免频繁修改元素的样式和布局。
-- -- ------- -------
---- -
  -------- --
  ----------- ------- ---- ------------
-
--------- -
  -------- --
-

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 增加了数据流压缩，减少了协议开销。
-- -- ---- - ----- ----- ---
------ -
  ------ --- --- ------
  ---
-

11. 静态资源使用 CDN

使用 CDN 加速一些静态资源的请求，可以减轻服务器压力，并加快页面的加载速度。

-- -- --- --
----- ------------------------------------------------ -----------------
------- -----------------------------------------------------

12. DNS 预解析

DNS 预解析可以让客户端在接收到 html 响应之前预先解析与该页面相关的所有资源的 DNS 记录。这项技术可以减小页面加载时 DNS 查询的时间。使用方法如下：

-- --- -----
----- ----------------------------------- -------------
----- ------------------ -------------------------

13. 尽量使用 CSS3 动画

CSS3 动画由于无需 JavaScript 插入、平滑运行等优点而逐渐替代 JavaScript 效果的使用。

-- -- ---- ----
---------- ------- -
  ---- -
    ---------- ---------
    -------- --
  -
  -- -
    ---------- ------------
    -------- --
  -
-
-------- -
  ---------- ------- -- -------- -- ---------
-

14. 服务器压缩传输的数据

可以使用服务器端的 GZip 、Deflate 等方式将数据压缩后传输到客户端，减小传输的数据量。

-- -----------------
----- ---- - -----------------------------

15. 使用字符串的模板替代字符串连接

使用字符串的模板 literal 可以更加优雅的生成字符串，并且性能优于字符串的拼接操作。

-- ----------------
--- ---- - ------
------------------- -----------

16. 使用 Webpack 打包优化

使用 Webpack 可以将 CSS 和 JavaScript 打包为单一的文件，并压缩文件大小、优化加载性能。

-- ------- ----
-------------- - -
  ------ -
    ---- ----------------
  --
  ------- -
    --------- -------------------
    ----- ----------------------- -------
  --
  ------------- -
    --------- -----
    ---------- -
      --- --------------
        -------------- -
          --------- --
        --
        ---------------- ------
      ---
    --
  -
-

17. 使用局部 HTML 模板

使用局部 HTML 模板可以减少不必要的重绘和重排操作，优化渲染性能。

---- -- ---- -- ---
---- ------------
  ---- --------------------
    ---- --- - --------- ---
    ---------------
    ------------ -------
    ------------ -------
    ----------- -----------
    ------------ ---------
  ------

  ---- --------------------
    ---------- --------
  ------
------

---- ----- ---- -- ---
--------- ------------------
  ---- ------------
    ---- --------------------
      ---- --- - --------- ---
      ---------------
      ------------ -------
      ------------ -------
      ----------- -----------
      ------------ ---------
    ------

    ---- --------------------
      ---------- --------
    ------
  ------
-----------

--------
  -- -- --------------------- ----
  --- -------- - ----------------------------------------
  --- ----- - ------------------------------------- ------
  ---------------------------------
---------

18. 避免使用 setInterval

setInterval 定时器有反复执行开销的缺陷，可能会重复地调用函数。使用 requestAnimationFrame 和 setTimeout 是更好的选择。

-- -- --------------------- --
--- ----------
-------- --------- -
  -- ------------ - --------- - ---- -
  --- -------- - --- - ----------
  -- --------- - ----- -
    --- ------ - ----------------------------------
    ----------------- - --------- - --- - -----
    ----------------------------
  -
-
----------------------------

19. 避免阻塞主线程

在处理一些耗时任务时，应该将它们放入其他线程或使用 Web Workers，避免造成卡顿或阻塞主线程。

-- ---------
---------------------------------------------------------- -- -- -
  -------------------- -- -
    ---------------
  ---
---
-------- ---------- -
  ------ --- --------------- -- -
    ------------- -- -
      --- ---- - ------------
      --------------
    -- ------
  ---
-

20. 使用 SVG 代替图片

使用 SVG 绘制矢量图形可以减少文件大小，同时矢量图形可以无限缩放。

---- -- --- ------ ---
---- ---------- - --- -----
  ----- ------ ------ ---------- ----------- ---------- --
------

21. 减小资源加载大小

减小资源加载大小可以通过以下几种方式实现：

  • 压缩资源（HTML、CSS、JS）文件。
  • 删除不必要的注释和空格等。
  • 在资源上使用 Gzip 压缩方法。
-- -- ---- ----
--------------------------- -
  ------------------- -----
  ---------- -----
  --------- ----
---

结论

以上就是前端领域基础性能优化的高级技巧。性能环节优化是改善用户体验的重要环节之一，要考虑到各种场景，从开发过程中各个环节都能做得好。在项目中，开发者可根据自己的场景选择技巧并做好实现。最后，性能优化并非一蹴而就，需要持续优化与改进。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66f11c086fbf96019736ae28

阅读全文

猜你喜欢

  • Web 无障碍性开发的 CSS 技巧

    许多人都会想到 Web 无障碍（Accessibility）的开发是优化 HTML 标签，如增加语义化标签、带名字和角色的表单元素等等，但是仅仅只做到这些仍有许多人因为使用 Web 的问题而无法得到完...

    2 个月前
  • React 项目中使用 AntD Pro 的技巧

    在现代应用程序开发中，前端框架已经成为了每个项目的必需品。其中，React 是一个很流行的前端框架，它已经在很多大型和小型项目中得到了广泛的应用。而 AntD Pro 是一个基于 Ant Design...

    2 个月前
  • Angular 和 RxJS：从初级到高级

    什么是 Angular 和 RxJS Angular 是一种基于 TypeScript 的开源 Web 应用框架，由 Google 开发和维护。Angular 提供了一些强大的功能，例如组件，指令，模...

    2 个月前
  • 如何解决 Chai 的 expect 和 assert 在测试框架中报错的问题

    在前端开发中，测试是非常重要的一环。而 Chai 是一个非常流行的测试框架，可以用来编写 BDD 或 TDD 风格的测试代码。Chai 有两种语法风格，分别是 expect 和 assert。

    2 个月前
  • Jest 测试框架：使用 Puppeteer 进行端到端测试的实现方法

    在前端开发中，测试是非常重要的环节之一。随着网站和应用程序愈发复杂，单元测试已经不足以满足测试需求。这时，端到端测试变得越来越重要。 Puppeteer 是一个基于 Node.js 的高度可用、基于 ...

    2 个月前
  • 如何在 Laravel 项目中引入 Tailwind 框架

    Tailwind 框架是一种基于原子设计理念的 CSS 框架，它提供了大量可重复利用的 CSS 类，使得前端开发变得更加简单。而Laravel 是一种非常流行的 PHP 框架，在这篇文章中，我们将会介...

    2 个月前
  • 在 React Native 中使用 Redux-Thunk 实现异步 Action

    随着移动应用开发的不断发展，React Native 已经成为了一种流行的开发框架。它提供了一种全新的开发方式，使得编写移动应用变得更加容易，同时也提供了更加强大的功能。

    2 个月前
  • Custom Elements 如何使用加密技术保证数据安全？

    前言 在前端开发的过程中，我们时常需要处理用户数据，而这些数据可能包含一些敏感信息，如个人账户信息、支付信息等。为了保证这些数据的安全性和保密性，我们需要使用加密技术来保护用户数据。

    2 个月前
  • 在 Deno 中使用 Elasticsearch

    Elasticsearch 是一款流行的搜索引擎，可用于存储、搜索和分析数据。在 Deno 中使用 Elasticsearch 可以方便地处理数据和提供搜索功能。本文将介绍如何在 Deno 中使用 E...

    2 个月前
  • React 项目中的代码分割

    React 是一个非常强大的前端框架，通过其组件化的思想，使前端的开发更加容易和快捷。然而，随着项目的规模增加，JavaScript 文件的大小也会随之增加，导致应用程序加载速度变慢。

    2 个月前
  • ES11 中的类型化函数和 BigInt

    ES11 是 JavaScript 新版本中的一个里程碑。其中包含很多重要的新特性，例如类型化函数和 BigInt。这两个特性为我们的开发过程带来了巨大的便利和优化，而且对于那些使用 JavaScri...

    2 个月前
  • 如何在 Angular 应用中使用 Server-Sent Events

    如何在 Angular 应用中使用 Server-Sent Events 在 Web 应用程序中，对于实时数据的处理和交互，Server-Sent Events（SSE）成为一种常用的技术方案。

    2 个月前
  • GraphQL 和 Apollo 的性能测试和优化

    简介 GraphQL 是一种跨平台、开源和查询语言，用于 API 的查询和数据操纵。它被设计为更加高效、强大和灵活的替代 REST API。Apollo 是一种针对 GraphQL 的前端框架，其目标...

    2 个月前
  • NgRx 和 RxJS：使用 Observable 管理状态

    前端开发中，状态管理是一个非常重要的任务。它可以帮助我们跟踪应用程序的变化，并管理复杂的用户交互。NgRx 和 RxJS 是两个流行的 JavaScript 库，它们可以帮助我们以一种优雅、可组合和易...

    2 个月前
  • Headless CMS 在富媒体内容管理中的应用

    概述 富媒体内容已经成为现代互联网中的不可或缺的一部分。无论是网站、APP 还是其他数字平台，几乎所有的媒体内容都包含一些形式的富媒体元素，如图片、视频、音频等。随着富媒体内容数量的增加和多样化，传统...

    2 个月前
  • 使用 Web Components 实现自定义滚动条组件

    前言 在设计 Web 应用时，滚动条是不可或缺的部分，然而原生的滚动条在样式上较为单一，通常难以满足设计师的需求。因此我们需要一种更加灵活、自定义化的滚动条组件来替代原生的滚动条。

    2 个月前
  • Cypress 进行 UI 自动化测试的最佳实践

    随着前端工程化的发展，前端自动化测试变得越来越重要。Cypress 是一个现代化的 JavaScript 端到端测试框架，具有简单易用、可靠性高、快速响应等优点。在本文中，我们将探讨如何使用 Cypr...

    2 个月前
  • 使用 Node.js 和 Express.js 进行 RESTful API 测试

    在现代 web 开发中，RESTful API 已经成为了一个非常流行的 API 设计风格。通过使用 RESTful API，我们可以轻松地对数据进行 CRUD 操作，并以标准化的方式进行数据交互。

    2 个月前
  • 使用 CSS Grid 进行复杂布局的技巧解析

    随着网络技术的不断发展，网页布局的样式越来越复杂，这对前端开发者提出了更高的要求。传统的网格系统布局已经无法满足这种需求，因此 CSS Grid 成为了新的选择。CSS Grid 是一种强大的 CSS...

    2 个月前
  • Promise 兼容性问题解析及解决方案

    引言 Promise 是一种用于处理异步操作的技术，可以使得 JavaScript 代码更加优雅和易于维护。随着 ES6 的普及和推广，Promise 已经成为了前端开发中的一个重要组成部分。

    2 个月前

相关推荐

    暂无文章