JS文档碎片

最新推荐文章于 2024-07-31 16:33:32 发布

Stirve unremitting

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量196

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106677375

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul></ul>
  <script>
    var ul = document.querySelector('ul')
    // 往ul里加入10个li
    // 1、这种写法创建10个li，append 10次，进行了10次DOM操作
    // for (var i = 0; i < 10; i++) {
    //   var li = document.createElement('li')
    //   li.innerHTML = i+1
    //   ul.appendChild(li)
    // }

    // 2、可以用一个文档碎片先把10个li放入碎片里
    // 然后只需要一次把碎片插入ul就行了，这样就只有一次DOM操作了
    // 这种写法虽然看起来更麻烦，但是减少了DOM操作的次数，性能更优
    var cache = document.createDocumentFragment()
    for (var i = 0; i < 10; i++) {
      var li = document.createElement('li')
      li.innerHTML = i+1
      // li放到文档碎片（cache）里
      // 这里的append是在计算机里操作的，不是在页面上操作的
      cache.appendChild(li)
    }
    // 当for结束以后把cache插入到ul里
    ul.appendChild(cache)


  </script>
</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS文档碎片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul></ul>
复制链接

扫一扫