牛刀小试：Resets 和 Normalize.css 的性能分析
前端开发中，Resets 和 Normalize.css 是非常常见的样式初始化方式。Resets 旨在对大量样式进行重置，而 Normalize.css 则是对浏览器默认样式进行标准化。本文将会对这两种常见的初始化方式进行性能分析，并探讨它们的优缺点。
关于 Resets
Resets 是一种通用的样式重置库，它的目标是在不同的浏览器之间创造出一致的样式。Resets 最早由 Eric Meyer 所创建，它的工作方式是重置 HTML 元素和 CSS 属性，使它们在所有浏览器中都保持一致。Resets 被大量使用于早期的网站开发中，但随着 CSS 样式的增多，Resets 逐渐被其他样式库所替代。
Resets 的分析
Resets 的优点：
全面的样式重置 Resets 对所有的 HTML 元素和 CSS 属性进行了重置，可以确保在所有浏览器中的表现一致性。
可以更好的理解 CSS 方式 通过对 Resets 的使用可以更好的理解 CSS 的工作原理，因为开发者不需要去猜想不同浏览器默认样式，从而更准确预测自己的代码行为。
Resets 的缺点：
增加了代码量 Resets 是一个将样式消除到初始状态的库，这意味着每个重置的属性都需要在开发者的样式表中被加以重写。这增加了代码量并消耗了一定的开发时间。
可能会影响页面性能 由于 Resets 是添加在每一个 HTML 页面中的初始样式表，它可能会影响页面性能。
关于 Normalize.css
Normalize.css 是一种流行的样式初始化库，它对浏览器默认样式进行了标准化。它不是完全的样式重置，而是尝试在不通浏览器之间对某些常量进行标准化。Normalize.css 是由 Nicolas Gallagher 和 Jonathan Neal 创建的，常常被用在现代的网站开发中。
Normalize.css 的分析
Normalize.css 的优点：
减少了开发时间 与样式重置不同，Normalize.css 对浏览器默认样式进行了调整，因此不需要像 Resest 那样去重新定义所有的样式。这大大减少了开发时间。
更好的跨浏览器兼容性 Normalize.css 可以保证在大多数现代浏览器之间的展示和行为一致性。因此，开发者可以专注于代码本身而不是浏览器差异。
Normalize.css 的缺点：
可能会增加代码大小 Normalize.css 需要通过一个附加的样式表来加载，这可能增加代码大小并减慢初始页面加载速度。
可能会执行不必要的样式 Normalize.css 对大多数样式进行了标准化，但并不是所有的开发者都需要这些样式。这可能导致不必要的执行样式，这么做可能影响性能。
结论
使用 Resets 或者 Normalize.css 的关键在于项目的需要。如果需要做一个全新的项目并且想要确保所有浏览器显示的外观一致，则推荐使用 Resets 进行全面的样式重置。但是如果需要对现有的项目进行升级，则推荐使用 Normalize.css。如果你的项目需要具备最佳速度报告，你应该对其进行一些测试来决定使用哪种方法。
代码示例
Resets 的代码示例：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-Normalize.css 的代码示例：
-- -------------------- ---- ------- --- - -- ------ ------------- ------------ - -------------------------------------------------------------------------------------- - - -- ---------- ---- ---- --------- -- ----- -- -------- ----- ----------- ------ -------- - -------------------------------------------------- - - -- ---------- ---- ---- --------- -- --- --------- ---- - ----- -- ------ ------------ ---- - --------------------------------------------------------------------- - -------------------------------------------------- - ---------------------------------------------------------- -- ---- - ------------ ----------- -- - -- --------------------- ----- -- - -- ------------------------- ----- -- - -- - ---- - ------- -- - -------- ------ -------- ----------- ------- ------- ------- ------- ---- ------- - -------- ------ - ------ ------- --------- ----- - -------- ------------- -- - -- --------------- --------- -- - -- - --------------------- - -------- ----- ------- -- - --------- -------- - -------- ----- - - - ----------------- ------------ - ------- - -------- ---- ------- - --------- ------- - -------- -- - ----------- - -------------- --- ------- - -- ------ - ------------ ----- - --- - ----------- ------- - -- - ---------- ---- ------- ------ -- - ---- - ----------- ----- ------ ----- - ----- - ---------- ---- - ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ---- ------- - --- - ------- -------- - --- - ------- -- - -------------- - --------- ------- - ------ - ------- --- ----- - -- - ----------- ------------ ------- -- --------- -------- - --- - --------- ----- - ----- ---- ---- ---- - ------------ ---------- ---------- ---------- ---- - ------- ------ --------- ------- -------- - ------ -------- -- - -- ----- -------- -- - -- ------- -- -- - -- - ------ - --------- -------- - ------- ------ - --------------- ----- - ------- ---- --------------------- -- - -- -------------------- -------------------- - ------------------- ------- -- - -- ------- -------- -- - -- - ----------------- ---- --------------- - ------- -------- - ------------------------- ----------------------- - ------- -- -------- -- - ----- - ------------ ------- - ----------------------- ------------------- - ----------- ----------- -- - -- -------- -- -- - -- - ------------------------------------------------ ----------------------------------------------- - ------- ----- - -------------------- - ------------------- ---------- -- - -- ----------- ------------ -- - -- - --------------------------------------------------- ----------------------------------------------- - ------------------- ----- - -------- - ------- --- ----- -------- ------- - ---- -------- ------ ------- ------- - ------ - ------- -- -- - -- -------- -- ------------ ------- -- - -- - -------- - --------- ----- - -------- - ------------ ----- - ----- - ---------------- --------- --------------- -- - --- -- - -------- -- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef5e476fbf9601972ee7c8