LESS 中的混合和继承的性能分析与优化

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

LESS（Leaner Style Sheets）是一种 CSS 预处理语言，它扩展了 CSS 语法并添加了许多特性，如变量、混合（Mixin）、继承、嵌套等。其中混合和继承是 LESS 中最常用的特性之一。

混合和继承可以让我们重用代码，降低代码冗余度，提高开发效率。但是在实际使用中，我们也需要考虑它们的性能问题。因为混合和继承会导致样式规则的重复和冗余，从而影响网页性能。

本文将分析 LESS 中的混合和继承的性能问题，并提供一些优化方案和建议。

混合

什么是混合

混合是 LESS 中一种将一组 CSS 规则集合在一起的方式，使用 . 开头的 .className { ... } 语法来定义。混合可以包含任意数量的 CSS 属性和值。

我们可以使用 . 开头的 .className 选择器来调用一个混合，从而将混合中定义的所有 CSS 规则应用到当前选择器上。例如：

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

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

在编译后的 CSS 代码中，.nav 选择器中将包含 .myMixin 中定义的所有 CSS 规则：

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

混合的性能问题

混合可以重用代码，降低代码冗余度。但是在调用混合时，其定义的样式规则将被复制到当前选择器中，导致 CSS 代码的冗余和样式规则的重复。

特别是在多次调用同一个混合时，这种重复的情况会更加明显，从而影响网页性能。

例如，下面代码中，我们多次调用了相同的 .myMixin 混合：

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

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

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

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

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

在编译后的 CSS 代码中，.myMixin 中定义的样式规则被复制到了每一个选择器中，导致了 CSS 冗余和样式规则的重复：

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

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

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

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

这里，在编译后的 CSS 文件中，color: #fff、background-color: #f00 和 border-bottom: 1px solid #000 这三个样式规则被重复了多次，从而导致了 CSS 冗余和样式规则的重复。

这种冗余和重复的情况，不仅会增加浏览器渲染时间，还会增加 CSS 文件的文件大小，导致网页加载速度变慢。

混合的优化

为了避免混合导致的重复和冗余，我们需要使用 mixin，也就是带参数的混合。使用 mixin 可以避免混合中定义的样式规则被复制到不需要的选择器中。

我们可以使用 @arguments 变量来传递 mixin 中的参数。使用 ... 来声明一个 mixin，并在调用时传递相应的参数。例如：

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

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

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

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

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

在编译后的 CSS 文件中，.myMixin 中定义的样式规则只会被编译一次，并在调用时传递相应的参数：

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

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

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

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

这里，.myMixin 中定义的样式规则只被编译一次，并在调用时传递相应的参数。

这种优化方案能够有效地避免定义的样式规则在多个选择器中被重复和冗余，以提高网页的性能。

继承

什么是继承

继承是 LESS 中一种将 CSS 规则从一个选择器“继承”到另一个选择器的方式，使用 & 来表示当前选择器的父选择器。

例如：

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

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

在编译后的 CSS 代码中，.error-text 选择器继承了 .error 的样式规则，并添加了 font-weight: bold; 样式规则：

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

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

继承的性能问题

继承可以减少代码冗余度，提高开发效率。但是在实际使用中，当父选择器样式规则过多时，这种继承方式常常会导致样式规则的冗余和重复。

例如，下面的样式规则中，每个子选择器都继承了 .parent 选择器中所有的样式规则：

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

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

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

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

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

在编译后的 CSS 文件中，每一个子选择器都包含了 .parent 的所有样式规则，导致了样式规则的冗余和重复：

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

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

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

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

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

这种冗余和重复的情况，不仅会增加浏览器渲染时间，还会增加 CSS 文件的文件大小，导致网页加载速度变慢。

继承的优化

为了避免继承导致的冗余和重复，我们需要合理地使用继承，只继承必要的样式规则。

例如，下面的样式规则中，我们只继承了必要的 .parent 样式规则：

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

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

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

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

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

在编译后的 CSS 文件中，每个子选择器只继承了必要的样式规则：

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

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

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

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

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

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

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

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

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

这种优化方案能够避免不必要的样式规则被继承，提高网页性能。

结论

在 LESS 中，混合和继承是优秀的样式技术，但是存在性能问题。为了避免这些问题，我们需要优化混合和继承的使用。

对于混合，我们可以使用 mixin 来避免样式规则的冗余和重复。对于继承，我们需要合理地使用继承，只继承必要的样式规则。

通过这些优化，我们可以最大程度地提升网页的性能和用户体验。

示例代码

混合

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

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

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

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

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

继承

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

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

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

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

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

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

阅读全文

猜你喜欢

  • 如何在 Tailwind CSS 中添加动画？

    Tailwind CSS 是一款流行的 CSS 框架，它的主要特点是使用类似于函数的方式集成 CSS 样式，可以快速创建具有各种风格的 UI 元素。但是，尽管 Tailwind CSS 可以让我们轻松...

    24 天前
  • AngularJS 中的服务及其使用详解

    AngularJS 是一个用于构建动态 Web 应用程序的 JavaScript 框架，它提供了很多强大的功能，如双向数据绑定、指令、过滤器、服务等等。其中，服务是 AngularJS 中非常重要的部...

    24 天前
  • 解决 LESS 编译出错：Unrecognised input

    LESS 是一种 CSS 预处理器，它能够在 CSS 中引入变量、混合、嵌套规则等特性。但是在使用 LESS 进行编译时，有时会遇到 "Unrecognised input" 错误。

    24 天前
  • 在 Fastify 中实现 WebSocket 的方法

    概述 WebSocket 是一种支持在客户端和服务器之间进行全双工通信的网络技术，它允许实时双向数据传输，能够在现代 Web 应用程序中发挥重要作用。在日益增长的在线需求和实时互动的背景下，Webso...

    24 天前
  • CSS Grid 布局：如何控制网格项的大小？

    简介 CSS Grid 是一种强大的布局系统，它能够轻松地创造具有复杂性的网格布局，而仅仅使用少量的代码。然而，在实现网格布局时，如何控制网格项的大小是非常重要的。

    24 天前
  • Chai.js 中 expect().to.have.property 的用法详解

    Chai.js 是一款流行的 JavaScript 测试库，它提供了许多有用的断言函数，以增加测试的可读性和可维护性。其中一个常用的函数是 expect().to.have.property，它用于验...

    24 天前
  • React 项目中 Webpack 配置优化实例

    Webpack 是一个常见的前端构建工具，可以将多个静态资源打包到一起，并生成优化后的代码。在 React 项目中，Webpack 也扮演着非常重要的角色。 在实际开发中，对 Webpack 的配置优...

    24 天前
  • ES11 新特性：String.prototype.replaceAll() 方法详解

    在 ES11 中，JavaScript 引入了一种新的字符串方法，即 String.prototype.replaceAll() 方法。这个新特性允许我们在字符串中一次性替换所有匹配项，而不需要使用正...

    24 天前
  • 原生 React 与 Next.js 的区别有哪些？

    在前端领域中，React 无疑是最热门和最流行的框架之一。它被广泛应用于各种Web应用和移动端应用程序的开发中。与此同时，Next.js 是一个基于 React 的应用框架，它类似于其他框架如Gats...

    24 天前
  • Kubernetes 中使用 DaemonSet 管理 Daemon 进程

    在 Kubernetes 中，DaemonSet 是一种特殊的控制器，用于确保指定的 Pod 在集群中每个节点都有一个运行实例。DaemonSet 可以帮助我们在多节点的集群中管理 Daemon 进程...

    24 天前
  • ESLint 还有多少 JS 程序员未曾了解的部分

    简介 ESLint 是一个用于在 JavaScript 代码中寻找问题的工具。其目的是保证代码的一致性和可读性，以及消除潜在的缺陷。ESLint 可以在开发过程中嵌入到开发工具中，提供实时检查，并产生...

    24 天前
  • Apollographql 的底层技术揭秘

    前言 近年来，GraphQL 技术的流行程度越来越高，尤其在前端开发中，更是得到了广泛应用。而 Apollographql 作为一款优秀的 GraphQL 客户端工具，也日益受到了前端开发者的青睐。

    24 天前
  • 设计响应式界面时如何处理多媒体内容

    在设计响应式界面时，多媒体内容是不可或缺的一部分。多媒体内容可以增加页面的吸引力和可读性，但是在不同的设备上显示效果可能会大不同。在本文中，我们将探讨如何在设计响应式界面时处理多媒体内容，以使其在不同...

    24 天前
  • React 错误捕捉（Error Boundaries）完全指南

    在 React 应用中，错误的发生可能会导致整个应用崩溃，为了避免这种情况的发生，React 提供了 Error Boundaries（错误边界）的概念。本文将为您详细介绍 React 错误捕捉的概念...

    24 天前
  • SASS 中如何使用循环语句（@for loop）

    SASS 是一种 CSS 预处理器，它提供了一些方便的功能，例如变量、嵌套样式和 mixin等。SASS 中还有一个有用的功能是 @for 循环语句，它可以用来生成重复的样式代码。

    24 天前
  • 使用 React.js 制作 SPA 应用

    什么是 SPA 应用？ SPA 应用（Single Page Application）指的是以单个页面为主的应用程序，通过异步请求获取数据并动态更新页面，从而实现快速的响应和良好的用户体验。

    24 天前
  • 在 Node.js 中使用模板引擎 EJS 的完整教程

    EJS 是一种简单、高效的模板引擎，它可以帮助我们在 Node.js 应用程序中实现动态的 HTML 页面生成。在本篇文章里，我们将深入讲解 EJS 的使用方法，并提供详细的指导和示例代码，帮助你快速...

    24 天前
  • CSS Reset 的历史与现状

    前言 在我们开发网页时，难免会遇到浏览器的兼容问题。CSS Reset 就是为了解决这类问题而被提出的。CSS Reset 顾名思义，即重新设置 CSS 样式规则，以消除不同浏览器之间的默认样式差异，...

    24 天前
  • Redux 中对 reducer 进行封装的实践

    Redux 是前端状态管理的重要工具，它可以提供可预测的状态管理，方便我们更好地控制应用程序的状态。在 Redux 中，reducer 是一个非常重要的核心概念。它负责处理应用程序的状态变化，根据 a...

    25 天前
  • 简单易行的无障碍网站布局优化小技巧

    无障碍网站设计是指通过使用可访问性标准和技术来确保网站的所有用户都能够访问和使用它。这包括那些视力障碍、听力障碍、语言障碍、认知障碍和运动障碍的人。 在设计和开发无障碍网站时，布局优化是一个关键的步骤...

    25 天前

相关推荐

    暂无文章