更快的插入HTML元素

短命女 2022-03-06 18:14 210阅读 0赞

一般我们想要往页面中添加HTML元素，通常是这样做的

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
    let li = document.createElement('li');
    for(let i=0; i<10; i++){
        
    	li.innerText = i;
    	ol.appendChild(li);
    }

上面的代码中，每次循环都会调用一次`appendChild`方法，而众所周知，DOM操作的效率是比较低的，所以我们需要尽量避免DOM操作。

为了避免DOM操作，我们可以使用元素的`innerHTML`属性，为这个属性设置值之后，浏览器就会根据字符串的内容生成相应的DOM树。在`innerHTML`的时候会创建一个HTML解析器，这个解析器是浏览器级别的代码，一般是用C++写的，所以运行效率会比JavaScript代码高。

那么上面的代码可以改写成

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
    let li = document.createElement('li');
    for(let i=0; i<10; i++){
        
    	ol.innerHTML += '<li>' + i + '</li>';
    }

但是这个代码也存在一些问题，第一个问题就是每次循环都需要访问`innerHTML`属性两次（访问一次，赋值一次），第二个问题在于创建和销毁HTML解析器都是需要一些时间的，因此最好是把设置`innerHTML`的次数尽量减少。

那最好的做法就是单独创建一个字符串，最后再把这个字符串赋值给`innerHTML`。那上面的代码可以改成

let ol = document.querySelector('ol');	//假设在页面中有一个ol元素
    let li = document.createElement('li');
    let domString = ''
    for(let i=0; i<10; i++){
        
    	domString += '<li>' + i + '</li>';
    }
    ol.innerHTML = domString;

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 ClickHouse 挺快，esProc SPL 更快

源分析数据库ClickHouse以快著称，真的如此吗？我们通过对比测试来验证一下。 ClickHouse vs Oracle 先用ClickHouse（简...

心已赠人/ 2024年04月17日 10:56/ 0 赞/ 77 阅读

相关 ClickHouse 挺快，esProc SPL 更快

开源分析数据库ClickHouse以快著称，真的如此吗？我们通过对比测试来验证一下。 ClickHouse vs Oracle 先用ClickHouse（简称CH）、O

超、凢脫俗/ 2023年09月29日 17:34/ 0 赞/ 15 阅读

相关 ClickHouse 挺快，esProc SPL 更快

开源分析数据库ClickHouse以快著称，真的如此吗？我们通过对比测试来验证一下。 ClickHouse vs Oracle 先用ClickHouse（简称CH）、O

╰半夏微凉°/ 2023年09月28日 21:37/ 0 赞/ 60 阅读

相关更快更好用的Redis6.0

文心一言对Redis6.0新特性的总结 ![706e982192964102a7b44972c8b08fec.png][] 目录 Redis6.0新特性 1：从单线程处

梦里梦外;/ 2023年09月25日 20:49/ 0 赞/ 60 阅读

相关 java比递归查询更快方法_使网站更小更快的5种方法

java比递归查询更快方法 Confession: I'd say once a week I genuinely wish I was a kid who spent h

忘是亡心i/ 2023年02月22日 03:43/ 0 赞/ 26 阅读

相关快收藏：HTML5中Nav元素的正确打开方式

Nav元素是什么？ Nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接

Love The Way You Lie/ 2023年01月13日 09:08/ 0 赞/ 120 阅读

相关旷视YOLOX：更快更强！

本文转载自机器之心编辑：杜伟、陈萍 > 在本文中，来自旷视的研究者提出高性能检测器 YOLOX，并对 YOLO 系列进行了经验性改进，将 Anchor-free、数据增强等

缺乏、安全感/ 2022年08月31日 09:40/ 0 赞/ 270 阅读

相关 Mockplus-更快更简单的原型设计

> 本文主要介绍Mockplus的基础功能，主要是基于学习过程的总结记录，可能比较简要，详细内容请参考Mockplus的[官方教程][Link 1]，也即本文的主要参考资料。

偏执的太偏执、/ 2022年05月29日 02:12/ 0 赞/ 391 阅读

相关更快的插入HTML元素

一般我们想要往页面中添加HTML元素，通常是这样做的 let ol = document.querySelector('ol'); //假设在页面中有一个ol元素

短命女/ 2022年03月06日 18:14/ 0 赞/ 211 阅读

相关地铁比汽车更快

今天改乘地铁，居然只花了45分钟。比汽车要快15分钟左右。大家都说地铁拥挤，今天体会到2处： 1. 换乘时，人相当的多。据说昨天地铁故障，人民广场站内挤满了人（谁让它

川长思鸟来/ 2022年02月02日 04:19/ 0 赞/ 353 阅读