牛刀小试：Resets 和 Normalize.css 的性能分析

面试官：小伙子，你的数组去重方式惊艳到我了

牛刀小试：Resets 和 Normalize.css 的性能分析

前端开发中，Resets 和 Normalize.css 是非常常见的样式初始化方式。Resets 旨在对大量样式进行重置，而 Normalize.css 则是对浏览器默认样式进行标准化。本文将会对这两种常见的初始化方式进行性能分析，并探讨它们的优缺点。

关于 Resets

Resets 是一种通用的样式重置库，它的目标是在不同的浏览器之间创造出一致的样式。Resets 最早由 Eric Meyer 所创建，它的工作方式是重置 HTML 元素和 CSS 属性，使它们在所有浏览器中都保持一致。Resets 被大量使用于早期的网站开发中，但随着 CSS 样式的增多，Resets 逐渐被其他样式库所替代。

Resets 的分析

Resets 的优点：

  1. 全面的样式重置 Resets 对所有的 HTML 元素和 CSS 属性进行了重置，可以确保在所有浏览器中的表现一致性。

  2. 可以更好的理解 CSS 方式 通过对 Resets 的使用可以更好的理解 CSS 的工作原理，因为开发者不需要去猜想不同浏览器默认样式，从而更准确预测自己的代码行为。

Resets 的缺点：

  1. 增加了代码量 Resets 是一个将样式消除到初始状态的库，这意味着每个重置的属性都需要在开发者的样式表中被加以重写。这增加了代码量并消耗了一定的开发时间。

  2. 可能会影响页面性能 由于 Resets 是添加在每一个 HTML 页面中的初始样式表，它可能会影响页面性能。

关于 Normalize.css

Normalize.css 是一种流行的样式初始化库，它对浏览器默认样式进行了标准化。它不是完全的样式重置，而是尝试在不通浏览器之间对某些常量进行标准化。Normalize.css 是由 Nicolas Gallagher 和 Jonathan Neal 创建的，常常被用在现代的网站开发中。

Normalize.css 的分析

Normalize.css 的优点：

  1. 减少了开发时间 与样式重置不同，Normalize.css 对浏览器默认样式进行了调整，因此不需要像 Resest 那样去重新定义所有的样式。这大大减少了开发时间。

  2. 更好的跨浏览器兼容性 Normalize.css 可以保证在大多数现代浏览器之间的展示和行为一致性。因此，开发者可以专注于代码本身而不是浏览器差异。

Normalize.css 的缺点：

  1. 可能会增加代码大小 Normalize.css 需要通过一个附加的样式表来加载，这可能增加代码大小并减慢初始页面加载速度。

  2. 可能会执行不必要的样式 Normalize.css 对大多数样式进行了标准化，但并不是所有的开发者都需要这些样式。这可能导致不必要的执行样式，这么做可能影响性能。

结论

使用 Resets 或者 Normalize.css 的关键在于项目的需要。如果需要做一个全新的项目并且想要确保所有浏览器显示的外观一致，则推荐使用 Resets 进行全面的样式重置。但是如果需要对现有的项目进行升级，则推荐使用 Normalize.css。如果你的项目需要具备最佳速度报告，你应该对其进行一些测试来决定使用哪种方法。

代码示例

Resets 的代码示例：

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

Normalize.css 的代码示例：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

阅读全文

猜你喜欢

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

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

    25 天前
  • React 项目中使用 AntD Pro 的技巧

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

    25 天前
  • Angular 和 RxJS：从初级到高级

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

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

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

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

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

    25 天前
  • 如何在 Laravel 项目中引入 Tailwind 框架

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

    25 天前
  • 在 React Native 中使用 Redux-Thunk 实现异步 Action

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

    25 天前
  • Custom Elements 如何使用加密技术保证数据安全？

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

    25 天前
  • 在 Deno 中使用 Elasticsearch

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

    25 天前
  • React 项目中的代码分割

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

    25 天前
  • ES11 中的类型化函数和 BigInt

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

    25 天前
  • 如何在 Angular 应用中使用 Server-Sent Events

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

    25 天前
  • GraphQL 和 Apollo 的性能测试和优化

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

    25 天前
  • NgRx 和 RxJS：使用 Observable 管理状态

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

    25 天前
  • Headless CMS 在富媒体内容管理中的应用

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

    25 天前
  • 使用 Web Components 实现自定义滚动条组件

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

    25 天前
  • Cypress 进行 UI 自动化测试的最佳实践

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

    25 天前
  • 使用 Node.js 和 Express.js 进行 RESTful API 测试

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

    25 天前
  • 使用 CSS Grid 进行复杂布局的技巧解析

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

    25 天前
  • Promise 兼容性问题解析及解决方案

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

    25 天前

相关推荐

    暂无文章