使用Modernizr加载HTML5 Shiv的性能

Question

我的网站使用Modernizr并需要HTML5Shiv和PrintShiv。如果不使用Modernizr来加载这些shivs，而是通过IE条件加载它们，是否有性能优势？显然，使用Modernizr更清晰，但我关注的是性能。

我的网站使用Modernizr并要求HTML5Shiv和PrintShiv。不使用Modernizr通过IE条件加载这些shivs会提高性能吗？尽管使用Modernizr更为简洁，但我着重关注性能。

- Scott Simpson

Answer 1

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

如果您的网站只需要使用HTML5Shiv和modernizr中的PrintShiv，那么仅在IE条件下加载html5shiv-printshiv.js会比始终为所有其他浏览器（lt IE 9）加载modernizr表现更佳。因此，在您的情况下，您应该停止使用modernizr，只在条件下使用shiv。

对于需要shiv的IE浏览器，使用modernizr和仅使用html5shiv的加载/性能相等。仅使用html5shiv的性能提升在现代IE浏览器（IE9和IE10）上可见。

测试页面：

• 仅html5shiv-printshiv：http://jsbin.com/upozar/1
• 自定义modernizr：http://jsbin.com/erodog/1

使用IE9 / Cable进行测试报告：

• 仅使用html5shiv-printshiv: http://www.webpagetest.org/result/130131_PG_11S8/
• 自定义modernizr: http://www.webpagetest.org/result/130131_JG_11SE/

比较这些测试，完全加载时，使用html5shiv-printshiv.js可以节省1.677秒。

Modernizr更新: 阅读Modernizr GitHub项目上的问题票中正在起草的性能考虑文档以获取更多详细信息。

- Anthony Hatzopoulos

---

@Scott，看起来你已经知道了，但是使用Modernizr的printshiv代码与独立的printshiv完全相同。此外，shiv包含一个检测功能，因此它不会在不需要它的浏览器中运行。 - Paul Irish

但是回到问题：安东尼上面的测试假设了内联 JavaScript，这不是包含 Shiv 的常见方式，通常使用<script src=...>来完成。如果您确实需要 Modernizr 中的其他功能，则无疑应该使用捆绑的 shiv，因为您将仅使用一个 script 标签而不是两个。脚本标记（无论是外部还是内联）都会影响性能，因此您需要将它们最小化。两个变体的运行时性能成本真的微不足道。 - Paul Irish

Answer 2

最近版本的Modernizr可以自定义包含您需要的功能。如果你担心性能问题，这可能是一个好方法。

就性能而言，Modernizr核心并不会很昂贵；代价在于它所进行的所有测试。如果您将其定制为仅执行您需要执行的测试，那么您将节省大部分负载，但仍然拥有Modernizr核心和您需要的部分。

- Spudley

Answer 3

我更喜欢使用HTML5Shiv和Modernizr，避免使用条件语句。这样可以使代码更加简洁，避免不必要或重复的内容。在IE中性能相同，因为只有在IE 9以下才会加载HTML5Shiv，直接使用Modernizr或HTML5Shiv。但是对于其他浏览器来说，HTML5Shiv并不是必需的，所以也许使用条件语句可以提高性能。

- ipraetoriux