Javascript性能:构建和注入html的最快方式

Javascript performance: Fastest way of building and injecting html

本文关键字：方式 html 注入 性能 构建 Javascript      更新时间：2023-09-26

这适用于单页移动web应用程序。。。。

为了可读性，我一直在连接我的html，然后注入。我很确定还有一种更有效的方法，我想听听js专家的意见！

这是我的一个串联html字符串的例子。。。

var html_str = '';
$.each(events_array, function(k, ev_type){
    if( localStorage.getItem('show_type'+ev_type.type_num) !== 'false' ){        
        $.each(ev_type, function(k2, e){
            if(typeof e != 'string'){
                if(fav_mode && last_date_num != e.date){
                    html_str += '<li class="date">'+e.date_text+'</li>';
                    last_date_num = e.date;
                }
                html_str += '<li';
                if(fav_mode | (FAVOURITES && $.inArray(parseInt(e.event_id), FAVOURITES) >= 0) ){
                    html_str += ' class="fav"';
                }
                html_str += '>';
                html_str +=     '<div class="l_'+e.gig_club+'"></div>';
                html_str +=     '<p rel="'+e.event_id+'"><span>'+e.venue+' : </span>'+e.nameofnight+'</p>';
                html_str += '</li>';                 
            }                         
        });
    }
});
return html_str

没有"最快"。浏览器只有"最快"。

有3种常见的技术。HTML字符串操作、模板化和DOM操作。

因为模板可以在内部同时使用HTML字符串操作和DOM，所以为了可读性/可维护性，我建议使用它。

以下是的一些基准

模板

更多模板

移动平台的数据模板

加载模板

Dust-js基准

如果你谈论的是大量的HTML，那么性能是至关重要的

绝对不要：

  • 在循环中迭代地注入dom节点。即使在不太大的HTML场景中，这也会影响性能。

  • 通过调整属性和在各种元素之间交换内容，尝试使用现有的HTML来节省工作。与前一点一样，即使在不涉及数千个元素的情况下，这也会变得丑陋。当你触发大量回流时，没有将表布局设置为固定的大表可能会变得特别糟糕。

  • 使用jQuery的直接字符串到dom构建——IMO实际上对大多数用途来说都很好，因为如果从某一天可能不那么安全的源注入数据，它可以很好地验证讨厌的转义序列。如果使用字符串，请使用html方法从字符串构建和从字符串注入。虽然真的是为了最大性能，但如果我100%信任我的数据，我可能会放弃JQ。

Do：

  • 把它全部构建在一个文档片段中，并附加它。或者构建一个HTML字符串并一次将其全部放入。我更喜欢下面"也许"下描述的混合方法，但已经2-3年没有测试过了。这样，浏览器只需要重新绘制页面一次。谷歌"CSS回流"了解更多信息。

  • 若您必须对大量HTML进行大量调整，只需更改数据并重新构建整个集合，原因与上述相同。

  • 如果从字符串构建，请尽量减少使用"+"运算符的串联，转而使用数组联接。在紧要关头，使用数组建立模板非常有效。

  • 如果IE<8是一个令人担忧的问题。如果没有JIT编译器，重复的函数调用可能会变得昂贵。如果它们是内联的（在另一个函数内部定义，没有任何外部返回的引用），那么它们实际上可以在JIT中帮助您。

  • 测试你所尝试的一切。除了多个对一个巨大的附加规则之外，其他一切都有灰色地带。多个总是比较慢。

可能：

在传统浏览器中，一个很好的技巧是将HTML大字符串插入到文档片段中，并通过DOM方法附加这些片段。这并不是所有浏览器中速度最快的，但在IE7很重要的时候，这是最好的方法，在现代JIT浏览器中，一块innerHTML、只进入文档片段的DOM方法和混合方法之间的差异几乎可以忽略不计。

我也完全建议使用模板。

但我认为您已经利用了注入HTML的最佳实践：构建HTML，然后一次注入要好得多，而不是多次注入HTML的小片段，因为浏览器可能会在每次注入时重新绘制/回流文档。

显式for循环肯定会比$.each()快得多，主要是因为它会为每个元素执行函数调用，但也有其他原因，例如使用新的执行帧，html_str的查找时间会更长。

有一些经验证据表明（我认为这在旧的浏览器中是有效的，我不确定现在或在移动设备上什么更快，值得一看），将元素添加到数组中（使用循环变量html_str[i]，而不是html_str.push()），然后调用.join比串接更快。

如前所述，添加一个大的DOM字符串比小的追加要快，也比使用DOM方法（appendChild、insertBefore等）快得多

一个好的模板引擎会为你做这些事情（只需要一点额外的成本），尽管我不确定它们中是否有很多能做到。如果只是少量的"模板"，那么当一个简单的循环就可以做到这一点时，使用库可能会有些过头了。

您不妨考虑使用documentFragment，尽管它可能不如html字符串那样可读，但它非常有效（性能方面），并且可能以面向对象的方式可读。

您可以访问此页面了解详细信息：http://ejohn.org/blog/dom-documentfragments/

相关文章：