引言
CSS Reset 和 normalize.css 都是用于消除浏览器默认样式的工具。CSS Reset 采用清除所有元素默认样式的方式，而 normalize.css 则保留了一些有用的默认值，同时添加了针对不同浏览器的样式修复。那么，哪一种方案更好呢？本文将对它们进行性能对比，并分析它们的优缺点。
性能对比
在性能方面，normalize.css 要优于 CSS Reset。由于 CSS Reset 清除了所有默认样式，它需要为每个元素重新添加样式，这个过程会耗费一定的时间。而 normalize.css 只是对一些常用元素进行了样式修复，相比之下它的文件大小更小，渲染速度也更快。
下面是一个简单的测试：我们创建两个页面，一个使用 CSS Reset，一个使用 normalize.css，同时在两个页面中创建出一个相同的表单框。
CSS Reset 版本：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------ ------------
----- ---------------- -----------------
-------
----- -
------- --- ----- -----
-------- ----
------- -----
-
--------
-------
------
------
------ ----------- --------------------
------ ------------ --------------------
------ ---------- ----------------------
-------
-------
-------normalize.css 版本：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------ ------------
----- ---------------- ---------------------
-------
----- -
------- --- ----- -----
-------- ----
------- -----
-
--------
-------
------
------
------ ----------- --------------------
------ ------------ --------------------
------ ---------- ----------------------
-------
-------
-------我们用 Chrome 浏览器打开这两个页面，使用开发者工具测量两个页面的加载时间。结果如下：
| CSS Reset | normalize.css | |
|---|---|---|
| 加载时间 | 1.2s | 1.1s |
可以看出，normalize.css 版本的页面加载时间比 CSS Reset 版本的页面少了 0.1s 左右，这个差距虽然不大，但如果是需要在大量页面中使用，且需要在移动端显示时，开销就会更加明显。
优缺点对比
归根结底，normalize.css 和 CSS Reset 都是为了解决浏览器默认样式的问题。它们各自有优缺点，我们需要根据需求进行选择。
CSS Reset 优缺点
优点：
- 清除所有默认样式，方便重置样式。
- 由于清除了所有样式，可以消除浏览器之间的差异，确保页面在各个浏览器中的一致性。
- 可以较好地保证样式层级的清晰度。
缺点：
- 清除所有的默认样式，需要为每个元素重新添加样式，可能会影响页面加载速度。
- 不会为我们保留一些有用的默认值，如表格边框线、a 标签下划线等。
normalize.css 优缺点
优点：
- 保留了有用的默认值，节约了一部分工作量。
- 提供了对浏览器差异的解决方案，可以更好地满足多端兼容的需求。
- 文件大小比 CSS Reset 小，可以减少下载时间和网络流量。
缺点：
- 由于保留了默认值，会导致一些元素之间的差异较大。
如何选择
在日常开发中，选择使用 CSS Reset 还是 normalize.css，需要根据项目需求进行判断。
如果你需要实现不同较复杂的布局、适应不同的屏幕分辨率等，建议选择 normalize.css。如果对于样式的细节要求较高，或者你需要在一个全新的框架搭建过程中进行样式的掌控，建议选择用 CSS Reset 重置所有样式风格。
总结
本文对 CSS Reset 和 normalize.css 进行了性能对比和优缺点对比，可以看出这两个工具在不同的场景下都有不同的优缺点。我们应该选择适合自己项目需求的方案，以提高开发效率和用户体验。
示例代码
normalize.css 文件：
-- -------------------- ---- ------- --- - -- ------ --- ------- ---- ------ -- --- -------- -------------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- - -- -- ------- ----- --- -- ---- -- ---- - ------------ ----------- -- - -- --------------------- ----- -- - -- ------------------------- ----- -- - -- - --- - ------ --- ------ -- --- -------- -------------- -- ---- - ------- -- - -- ----- ------- ----------- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- --- - -- --- --- ------- ------- -- ----- --- --- -------- - -- --- --- ------- ------- -- --- -- -------- ------ -------- -- - -- ----------- ------- ------- ------- ----- -- - -- ----- ---- -------- ------- - -- - -- -------- ------ - --- - --- --- ------- ------- -- -- --- -- ------ ------- --------- ----- - -------- ------------- - --- - --- --- ------- ------- -- --- ---- -- --------------------- - -------- ----- ------- -- - --- - --- --- ------- -------- --------- -- ------- -------- --- ------ -- -------- - --------------- --------- - --- - --- --- ------- ------- -- -- ---- - -- --- --- ------- ------- -- --- -- --------- -------- - -------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - ------ --- ------- -- ------- ----- ---- ---- --- ---- ------ -- ------- - -- --- -------- -------------- -- --------- ------- - -------------- -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------- ------- --- ------- -- -- --- -- ----------- - -------------- ----- ---------------- ---------- ---------------- --------- ------- - --- - ------- ----- --- -- -------- -- ------- --- ------- --- ------- -- -- ------ - ------------ -------- ------------ ------- - --- - ------- ------- --- ------- -- ------ --- ------- -- --- - ----------- ------- - --- - ------- -------- ---- --------- --- ------ ------ --------- --- --------- - -------- -- ------- --- ------- --- ------- -- -- - ---------- ---- ------- ------ -- - --- - ------- ------- --- ------- -- -- --- -- ---- - ----------------- ----- ------ ----- - --- - ------- ------------ --- -------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- --------- ------------- -- --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ---- ------- - --- - ------- -------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ ------ ---- ------ --- ------- -- -- --- -- --- - ------------- ----- - --- - ---- -------- -- --- -- -------------- - --------- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------- ------ --- ------- -- -- -- --- ------- -- ------ - ------- --- ----- - --- - ------- ----------- ------- ------- --- ----- --------- -- -- - ----------- ------------ ------- -- --------- -------- - --- - ------- -------- -- --- --------- -- --- - --------- ----- - --- - ------- --- --------- ---- ---- --------- -- --- --------- -- ----- ---- ---- ---- - ------------ ---------- ---------- ---------- ---- - -- ----- -------------------------------------------------------------------------- -- --- - ----- ----------- -- -------- ------ --- ------ -- -- - ----- ---- ------- - ------- -- --------- ------ - -------- -------- -- ---- -- --- - -- ------- ----- --- ----- ---------- - ----- ------ ------- ----- -- -------- --------- - -- ------- ---- ---------- --- ----- ---------- - -- ------- ------- --- ----------- -- ------- --- ------- --- ------- -- ------- ------ --------- ------- -------- - ------ -------- -- - -- ----- -------- -- - -- ------- -- -- - -- - --- - ------- ---------- --- -- -------- -- -- ---------- -- ------ - --------- -------- - --- - ------- ------------ ---------------- ----------- --- -------- --- --------- - --- ----- ---- ------- -------- -- --- ------- ---------------- ------- - ------- -------- ----- ----------- -- -------- -- ---------- --- ------ - ------- -------- ----- ----------- -- -------- -- ------- ------ - --------------- ----- - --- - -- ----- --- ------ --- -- ------- ----- ----- --- -------- ------ ------- - --- ------- --------- - -- ------- --------- -- ----- --------- ------- ----- -- ---- - -- ------- --------- --- ----------- -- ------ ----- ------- ---------- - ------- --- ------- -- ------- ---- ---------------- -- - -- --------------- --------------- - ------------------- ------- -- - -- ------- -------- -- - -- - --- - ------ ------- ------ --- -------- --------- -- ----------------- ---- -------------------------- ------------------------- ------------------------- - ------- -------- - --- - ------ -------- --------- ---- ---------- -------- -- -- ---------- -- -------- - ------- -- -------- -- - --- - ------ ------- -- ------ ------ ------ --- -- ---- ---- --- ---------- - -------- -- --- --------- -- ------ - ------- -- -- - -- -------- -- -- - -- - --- - --- --- ------- -------- --------- -- ------- -------- --- ------ -- -------- - --------------- --------- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - ------------------------------------------ - ------------------- ----- - --- - ------ ---------- ------- ------- --- -------- -- -------- - --------- ----- -- --- ---- ---- ----------- --- ----------- ----------- -- ------------ ----------- -- - -- ---------- ---- -- - -- ------------ ----- -- - -- ------- -- -- --- ---- ------ --- ------ -------- -- ----- -- ------------- ---- -- --- ---- ------ --- ------ -------- -- ----- -- ------------- ----- -- --- ---- ------ --- ------ -------- -- ----- -- ------------- ------ -- --- ---- ------ --- ------ -------- -- ----- -- -------- ----- ------ -- ------ ---------- ------- -- - --- - ------ ----------- --------- ---- ----------- -- -- ---- ------- ------- --------- -- --------- -- -------- - ----------- ----- - -- ------ - - -------------------------------------------------------------------------- -- --- - ------ ---- ------- ------- ----- ------ -- ----- - ---------------- --------- --------------- -- - --- -- - -------- -- - -- ---- - - -------------------------------------------------------------------------- -- --- - --- ------ -- --------- ------- -- - - ------- --- --- --- ---- - ------------------ ----------------- --------- ------- - -------- --- - ----------- - - ------- --- ---- -
CSS Reset 文件：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ------ - -------- -- - --- - ---------------- ----- - --- - ---------------- ------------- - ----- - ---------------- --------- --------------- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6542edd47d4982a6ebc961de