什么是 CSS Reset？
在开发网页时，我们经常发现不同浏览器对于默认样式的处理方式不同，这就导致了在样式编写时会出现很多的兼容性问题。CSS Reset就是为了解决这个问题而出现的一个工具，它能够重置不同浏览器的默认样式，让所有浏览器的样式表现基本一致。
使用 CSS Reset 需要注意什么？
在使用 CSS Reset 的时候，需要注意以下几点：
尽量使用已经被广泛使用的 CSS Reset，比如 normalize.css，而不是自己编写 CSS Reset。这样可以保证 CSS Reset 的质量以及兼容性。
在使用 CSS Reset 的时候，需要谨慎。由于 CSS Reset 会重置浏览器的默认样式，有时会对页面原有样式产生影响。因此，在使用 CSS Reset 之前，需要仔细考虑是否真的需要使用。
在使用 CSS Reset 的时候，需要慎重考虑其对性能的影响。由于浏览器需要在加载 CSS Reset 的时候进行一些额外的计算，因此，CSS Reset 可能会对浏览器性能产生影响。
CSS Reset 对浏览器性能的影响
CSS Reset 的使用可能会对浏览器性能产生影响，主要有以下几方面的原因：
- CSS Reset 会增加浏览器的样式计算量。
当浏览器加载 CSS Reset 时，它需要计算这些额外的样式，这个计算量对于一些低端设备来说可能是比较大的，这会影响浏览器的性能。
- CSS Reset 可能会增加页面的加载时间。
当浏览器加载 CSS Reset 时，需要从服务器上下载这些额外的文件，这会增加页面的加载时间。
下面我们来看一些例子：
例子1：
我们先看一下没有使用 CSS Reset 的情况：
--------- -----
------
------
-------------- --- -------------
-------
-----
------- --
-------- --
-
--------
-------
------
-------- ----------
-------
-------上面的代码中，我们通过设置 body 的 margin 和 padding 来避免浏览器的默认样式带来的样式问题。
接下来我们使用 CSS Reset，看看对性能的影响：
--------- -----
------
------
----------- --- -------------
----- ---------------- -----------------
-------
-----
------- --
-------- --
-
--------
-------
------
-------- ----------
-------
-------为了模拟真实的情况，我们引入了一份 CSS Reset（reset.css），然后在 body 标签中设置了 margin 和 padding。我们来分析一下这段代码对性能的影响：
- CSS Reset 的加载时间增加了。
在加载页面的时候，浏览器需要额外的时间去加载CSS Reset文件，这会增加页面的加载时间。这个时间相对于文件的大小有所变化，所以我们不得不在衡量性能时将这个因素纳入计算。
- CSS Reset 的计算量增加了。
当浏览器加载 CSS Reset 时，它不仅需要计算 body 元素的样式，还需要计算 CSS Reset 中所有元素的样式，这会增加计算量。当 CSS Reset 文件比较大时，这个计算量会更大。
例子2：
我们来看一个更复杂的例子：
--------- -----
------
------
----------- --- -------------
----- ---------------- -----------------
-------
-----
------- --
-------- --
-
-----------
------ ----
------- - -----
----------------- --------
-------- -----
------- --- ----- -----
-------------- ----
-
---------- --
------------ ----
---------- -----
------ -----
-------------
-
--------
-------
------
---- ------------------
----------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ------- ----- ----- ------------ ----- --------- --- ------ ---- -- ------ ------- -- -------- ----- ---------- --- ---- ---- ----- ---------- ---- ----- -- ----- ------ ---------- -------- ----- ----- ------ ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- -- --- ----- -------- -------- ---- ---- -------- ----------
------
-------
-------上面的代码中，我们使用了一个 .container 的样式，通过设置 width，margin，background-color，padding，border-radius 来设置容器的样式。我们也设置了 .container p 的样式，通过设置 line-height，font-size，color，margin-top 来调整文字的样式。
下面我们使用 CSS Reset，看看对性能的影响：
--------- -----
------
------
----------- --- -------------
----- ---------------- -----------------
-------
-----
------- --
-------- --
-
-----------
------- - -----
-
---------- --
----------- -----------
-
---------- ---
---------- ------
------- --
-
---------- --
------- - - -----
-
--------
-------
------
---- ------------------
----------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ------- ----- ----- ------------ ----- --------- --- ------ ---- -- ------ ------- -- -------- ----- ---------- --- ---- ---- ----- ---------- ---- ----- -- ----- ------ ---------- -------- ----- ----- ------ ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- -- --- ----- -------- -------- ---- ---- -------- ----------
------
-------
-------为了模拟真实的情况，我们引入了一份 CSS Reset（reset.css），然后在 body 标签中设置了 margin 和 padding。与之前的例子不同的是，我们这里定义 .container *，并设置 box-sizing 的值为 border-box，这是一个常见的 CSS Reset 方式。
我们来分析一下这段代码对性能的影响：
- CSS Reset 的加载时间比例减少了。
与之前的例子不同的是，在这个例子中，我们只增加了一些样式，而不是完全重置，因此我们只需要引入一小部分的代码，这会减少 CSS Reset 的加载时间。
- CSS Reset 的计算量比例减少了。
在这里，我们只增加了一些样式而没有完全重置，这意味着浏览器的计算量也比较小。
总结
使用 CSS Reset 时需要谨慎，它对于页面样式的帮助是显著的，但同时也可能会对性能带来影响。正确使用 CSS Reset 可以减少它对性能的影响，我们应该避免自己编写 CSS Reset，而尽可能选择已经被广泛使用的 CSS Reset 框架。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647576b3968c7c53b02863a5