位置:海鸟网 > IT > JavaScript >

优化javascript的innerHTML操作

  注:一旦结构比较复杂的话,标准DOM需要编写冗长的代码。

  如果使用innerHTML的话,部分代码如下:

  注:innerHTML没有标准DOM中的appendChild,所以使用了『+=』的方式,效率低下。

  我们可以结合使用innerHTML和标准DOM,这样二者的优点就兼得了,部分代码如下:

  注:创建一个元素,然后注入innerHTML,接着在元素上使用标准DOM操作。

  还不算完,Asynchronous innerHTML给出了更强悍的解决方法,部分代码如下:

  注:使用setTimeout防止堵塞浏览器,使用DocumentFragment减少渲染次数。

  另:代码在拼接字符串时还可以更快,详见:Fastest way to build an HTML string。