使用 Modernizr 加载 HTML5 Shiv 的性能

Performance using Modernizr to load HTML5 Shiv

本文关键字：性能 Shiv HTML5 Modernizr 加载 使用      更新时间：2023-09-26

我的网站使用Modernizr，需要HTML5Siv和PrintShiv。不使用 Modernizr 加载这些 shiv，而是通过 IE 条件加载它们是否有任何性能优势？显然，使用 Modernizr 更干净，但我专注于性能。

我自己很好奇，所以我设置了一些测试页面来查看。

如果你的网站只需要HTML5Shiv和PrintShiv从modernizr，那么只加载html5shiv-printshiv.js使用IE条件将比总是为所有其他浏览器加载modernizr（lt IE 9）表现更好。因此，在您的情况下，您可能应该停止使用 modernizr，而只是在有条件的情况下使用 siv。

对于需要 shiv 的 IE 浏览器，负载/性能在使用 modernizr 和仅使用 html5shiv 之间是相等的。仅在现代IE浏览器（IE9和IE10）上可以看到使用html5siv的性能提升。

测试页面：

  • 仅限HTML5shiv-printshiv：http://jsbin.com/upozar/1
  • 自定义现代化：http://jsbin.com/erodog/1

使用IE9/电缆的测试报告：

  • HTML5shiv-printshiv only： http://www.webpagetest.org/result/130131_PG_11S8/
  • 自定义现代化：http://www.webpagetest.org/result/130131_JG_11SE/

比较这些测试，完全加载，我们使用html5shiv-printshiv节省了1.677秒.js

现代化更新

：有关更多详细信息，请阅读在现代化 GitHub 项目的发行单中起草的性能注意事项文档。

最新版本的 Modernizr 可以自定义为仅包含您需要的功能。如果您担心性能，这可能是要走的路。

Modernizr核心在性能方面并不是非常昂贵;费用在于它所做的所有测试。如果您将其自定义为仅执行需要执行的测试，则可以节省大部分负载，但您仍将拥有Modernizr核心及其所需的部分。

我更喜欢将HTML5Siv与Modernizr一起使用，并避免使用条件。通过这种方式，我有了代码清理器，避免了不必要或重复的东西。IE的性能是相同的，因为HTML5SHiv将只加载小于9的IE，直接使用Modernizr或HTML5Siv。但是HTML5Siv对于其他浏览器来说不是必需的，所以，也许，对于性能使用条件来说，这是一个好主意。

相关文章：