Javascript 自定义HTML Shiv的缺点

在我最近使用的一个项目中，我注意到当缩小脚本时，它的大小是2.274KB。这对我来说是一个相当大的概念（我意识到这是高度简化的，因为John's没有包括对支持或所有新HTML5元素的检查）。我深入研究了这个问题。这是248 sloc，对于这样一个简单的任务来说，似乎有很多不必要的代码。我只用14行代码就实现了一个简单得多的shiv：

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article|aside|audio|canvas|details|figure|figcaption|footer|header|hgroup|nav|output|progress|section|summary|video'.split('|'),
        i        = 0,
        length   = elements.length;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elements[i]);
        }
    }
})(document);

似乎Farkas shiv的肉在创建元素和检查try/catch中的函数方面发挥了一些魔力。这肉和填料需要吗？我的解决方案是否足够，还是Farkas shiv解释了我没有考虑的问题

编辑

脚本现在使用正确的声明创建自己的样式标记（仍然只有21行！）：

（功能（文档）{
var div=document.createElement（'div'），
元素='文章、旁白、音频、画布、图形、figcaption、页脚、页眉、hgroup、导航、输出、进度、部分、视频'，
elementArr=elements.split（'，'），
i=0，
长度=elementArr.length，
剧本、风格；
div.innerHTML=''；
if（div.childNodes.length！=1）{
对于（；i

您的代码与html5\u shiv之间的主要区别在于，您的版本只满足IE在页面初始加载期间对html5元素缺乏支持的情况

事实上，还有一些重要的问题需要处理，如果在加载后使用Javascript修改页面内容，将会遇到这些问题

有一次，实际上有一个名为的辅助脚本，它解决了这些问题。但是，主html_shiv脚本的较新版本也包含了这些修复，因此不再需要辅助脚本。但这确实意味着主脚本现在要大得多

这说明了您看到的代码量

如果你的HTML是静态的，那么答案是否定的，你不需要所有额外的代码；你的版本很好。（或者您可以转到html5_shiv Github页面并下载以前的版本；早期版本看起来更像您的代码）

---

但是如果你打算写一个包含任何动态内容的网站，那么你最好使用最新版本的html5_shiv。它解决了不止一个问题。

就个人而言，我认为下载所有额外的代码是对运行IE6/7/8的人的适当惩罚。事实上，也许我们应该多加一些梅格，只是为了确保。@SDC马上就来！我可能已经有了很多IE特有的CSS。这算吗P您的评论提醒我，我忽略了一个事实，即

IE lt 9

用户可能已经在他们的缓存中有了shiv。但我的问题更多的是关于代码膨胀，而不是下载时间。希望我下面的真实答案能够在一定程度上回答这个问题：-）对于内部shiv+1。我应该知道，当shiv在重新定义

createElement

时，他们是未来的证明。然而，我想知道为什么您需要内部shiv（或主shiv的最新版本）。一旦你用js创建了每一个HTML5元素，浏览器就不会在页面的整个生命周期中意识到它们了吗？我链接的内部shiv页面更清楚地解释了这个问题（如果你能读过“不再使用这个”的大消息），但现在就足以说不，仅仅创建元素不足以修复IE在处理未知元素方面的所有缺陷，因此这只能修复

innerHTML

。如果你像应该的那样用

createElement

创建所有元素（包括HTML5元素），那么就没有必要这样做，对吧？我相信它也有用于打印的修复程序。可能更多，但我认为这涵盖了大部分内容。总结一下：只要不使用

innerHTML

添加HTML5元素并且不打印，Farkas shiv就可以简化为我的版本。同意？

article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video{display:block;}

(function(document) {
    var div      = document.createElement('div'),
        elements = 'article,aside,audio,canvas,figure,figcaption,footer,header,hgroup,nav,output,progress,section,video',
        elementArr = elements.split(','),
        i        = 0,
        length   = elementArr.length,
        script, style;

    div.innerHTML = '<header></header>';

    if(div.childNodes.length != 1) {
        for(; i < length; i++) {
            document.createElement(elementArr[i]);
        }

        script = document.getElementsByTagName('script')[0];
        style = document.createElement('style');
        style.innerHTML = elements+'{display: none}';
        script.parentNode.insertBefore(style, script)
    }
})(document);