什么是 CSS Reset
CSS Reset是一种CSS的预设样式，通常被用来覆盖不同浏览器之间的样式差异。它的主要目的是确保每个浏览器都展示出一致的样式。CSS Reset通常会重置所有元素的样式，包括边框、内边距、外边距、字体样式等。
CSS Reset经常被用来作为一种代码组织策略，以确保网页的视觉一致性和可靠性。然而，一些开发者认为CSS Reset可能会对网页性能产生不利影响。
CSS Reset 对网页性能的影响
CSS Reset对网页性能的影响可能是微小的，但如果不加调整地应用，仍然会成为网页性能的瓶颈。
Reset 文件大小
由于CSS Reset会重置所有元素的样式，因此Resets文件的大小通常比较大。如果你使用的是一个大型的Reset文件来覆盖所有的样式差异，那么请求和下载Reset文件的速度会明显延长。
浏览器重绘
CSS Reset会影响到浏览器页面的布局与显示，因此会导致浏览器重绘（reflow）。重绘会降低浏览器内容的渲染速度，从而影响网页性能。
增加代码复杂度
CSS Reset并不是万能的解决方案，有时候过多使用Reset会使得代码变得混乱、难以维护。 对于复杂的UI和交互设计，还需要考虑其他的解决方案。
解决方式
虽然CSS Reset可能会对网页性能产生不利影响，但是我们可以通过以下方式来减少其影响：
精简 Reset 文件
由于 Reset 文件比较大，我们可以精简它来减少文件的大小。在制作自己的 Reset 文件时，只需要重置那些被绝大多数浏览器支持的 CSS 属性即可。
使用原生样式
与其使用 Reset 文件来覆盖所有不同浏览器之间的样式差异，不如使用原生样式。不同浏览器之间会有一些微小的差异，但使用浏览器本身的默认样式可以减少浏览器的运算量，从而提高网页性能。
做好代码组织
对于复杂的UI和交互设计，需要有一定的代码组织能力。我们需要将Reset代码结构化并分类，对于一些可能会被多次使用的样式，可以将其定义为共用class。
使用工具库
使用现成的工具库，如Bootstrap或Foundation等，可以快速搭建一个网页，并且其中绝大部分的样式和组件都已经针对不同浏览器的兼容性进行了修改和优化。
示例代码
下面是一个 CSS Reset 示例代码，它使用了部分原生样式，同时通过合理的代码组织不仅减少了Reset文件的大小，同时减少了浏览器重绘的次数。
----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ----
---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-结论
虽然CSS Reset可能会对网页性能产生不利影响，但是可以通过减小 Reset 文件的大小、使用原生样式、做好代码组织和使用工具库等方式来减少其影响。在实现网页视觉一致性和可靠性的前提下，更应该考虑网页性能的优化，以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710e60fad1e889fe2fca18b