CSS Reset 与 Normalize.css 的性能比较
在 Web 开发过程中，我们经常需要手动调整各个元素的样式，以达到预期效果。不过，在不同浏览器和设备中样式表的渲染会存在差异，因此需要使用 CSS Reset 或 Normalize.css 来避免浏览器默认样式的影响，使得页面的展示更加一致。
CSS Reset
CSS Reset 本质上是一份 CSS 文件，它的作用是重置大部分 HTML 元素的样式到一个基础值，以此清除浏览器的默认样式，避免浏览器对样式的差异带来的影响。CSS Reset 分为两种类型：
- 针对特定浏览器的 Reset，即仅专注于特定的一些浏览器，例如 Eric Meyer 的 Reset，主要目标为 Firefox 和 Safari 等浏览器；
- 通用 Reset，适用于所有的浏览器系统。
通用 Reset 存在一个明显的优点，即适用于所有浏览器，但是 CSS Reset 的缺点也是显而易见的：需要自己重新定义所有元素所应该具备的样式，这意味着需要手动设置大量的样式，而这些样式未必会被用到，会造成代码冗余。
下面是 Eric Meyer 的 Reset 代码示例：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- -------- -- --------- -- ----------- ----- ---------------- --------- ------------ ------------ -
Normalize.css
Normalize.css 的作用是为各个浏览器提供相同的默认样式，并保持一致的展示效果。与 CSS Reset 不同，Normalize.css 不是将所有元素的样式都清除，而是将大部分元素的样式设置为相同的初始值，并修复了一些浏览器的 bug。
Normalize.css 能够修复一些浏览器的 bug 是由于其模拟了一个标准浏览器，并对其它比较古老的浏览器进行兼容性处理。同时，它还修复了一些 HTML5 元素的默认样式，让开发者无需担心样式的缺失或者修改。
下面是 Normalize.css 的代码示例：
-- -------------------- ---- -------
--- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- -- --- --- ------- --- ------ -- --------
- -- ---- --- -------- -- ---- --- ---
--
--
----------
-------- -
----------- ----------- -- - --
-
--- -
------------ --------- -- --------- --
-
-- ---------- ---------
-------------------------------------------------------------------------- --
---
- -- ------ --- ---- ---------- -- ------ ----- -- -- ---
- -- ------ ---- -- ----- --------- -- --- ----
- -- ------- ----------- --- --------- -- ----- --- ----- ---------
--
- -
----------------- ------------ -- - --
----------------------------- -------- -- - --
-
性能对比
CSS Reset 和 Normalize.css 都能够帮助我们处理样式问题，但它们的性能有所不同。CSS Reset 的下载包的体积较小，但是需要自己编写一定量的样式代码。而 Normalize.css 虽然已经在许多浏览器环境下被预先缓存，但它文件的体积要比 CSS Reset 大。
研究表明 Normalize.css 与具体的压缩优化库相比，体积增长幅度较低，这是因为它只是补充或者添加了浏览器没有默认的样式属性，而没有通过强制修改其他元素的样式来达到最终的目的。
CSS Reset 和 Normalize.css 都能够在开发过程中提高开发效率和元素的一致性，并避免因浏览器的不同而造成的样式不一致性问题。选择哪一种取决于自己的使用需求，如果你更重视性能，那么 CSS_RESET 可能更适合你；如果你更注重开发效率和样式的一致性，那么 Normalize.css 则更适合你。
请参考以下代码来了解如何在你的项目中使用 Normalize.css。
-- -------------------- ---- ------- --------- ----- ------ ------- ------- ---------------- ----------------------------------------------------------------- -------- ------- ------ --------- --- -------- -------
结论
CSS Reset 和 Normalize.css 都是非常优秀的 CSS 样式规范，但在实际使用时，我们需要根据具体需求进行选择。CSS Reset 更加适合个性化项目或者对性能有着极高要求的项目，而 Normalize.css 则适合于需要准确呈现样式且用户体验更加一致性的项目。在项目的初期，我们应该尽可能地选用重量较轻的 CSS 类库，等到细节调整阶段再考虑使用更加庞大的类库，避免在最初的阶段就将大量的资源投入到 Code Review、调整和性能优化等工作中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6745432ac1a23897ea8ed425