我的网站使用 Modernizr 并且需要带有 PrintShiv 的 HTML5Shiv。不使用 Modernizr 加载这些 shiv,而是通过 IE 条件加载它们是否有任何性能优势?显然使用 Modernizr 更干净,但我更关注性能。
3 回答
我自己很好奇,所以我设置了一些测试页面来查看。
如果您的网站只需要来自modernizr 的带有PrintShiv 的HTML5Shiv,那么使用IE 条件加载html5shiv-printshiv.js 会比总是为所有其他浏览器加载modernizr(lt IE 9)执行得更好。因此,在您的情况下,您可能应该停止使用modernizr,而只在条件中使用shiv。
对于需要 shiv 的 IE 浏览器,负载/性能在使用modernizr 和仅使用 html5shiv 之间是相等的。仅在现代 IE 浏览器(IE9 和 IE10)上可以看到使用 html5shiv 的性能提升
测试页面:
- 仅 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 项目的问题单中正在起草的有关性能注意事项的文档以获取更多详细信息。
可以自定义 Modernizr 的最新版本以仅包含您需要的功能。如果您担心性能,这可能是要走的路。
Modernizr 核心在性能方面并不昂贵。费用在于它所做的所有测试。如果您将其自定义为仅执行您需要执行的测试,您将节省大部分负载,但您仍将拥有 Modernizr 核心和您需要的部分。
我更喜欢将 HTML5Shiv 与 Modernizr 一起使用,并避免使用条件。通过这种方式,我的代码更清晰,避免了不必要或重复的内容。在 IE 中的性能是相同的,因为 HTML5SHiv 只会在 IE 小于 9 的情况下加载,直接使用 Modernizr 或 HTML5Shiv。但是 HTML5Shiv 对其他浏览器来说不是必需的,所以,也许,它是性能使用条件的好主意