html中ul标签的优化-html教程-PHP中文网

首页

web前端

html教程

html中ul标签的优化

高洛峰

Feb 15, 2017 pm 02:12 PM

对于前端的优化接触的太少了，平时在pc端上感觉正常，但是到了移动端，时间一长就不行了。今天说说html中ul的优化问题,我给出了一种传统的写法(耗时的),一种优化的写法.
模拟一种业务流程吧，类似留言墙，大家留言后，要将留言显示在留言墙上面。
开始我们的代码编写吧
如果在平时我会这样写，但是假如我接收了一百万条数据，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有进行性能优化的案例</title>
</head>
<body>
    <p id="pElement" style="height:200px;overflow-y:scroll;"></p>
    <script>
        var List = function(container,items,itemHeight){
            this.container = container;
            this.items = items;
            this.itemHeight = itemHeight;
            this.init();
            this.update();
        }

        List.prototype.init = function(){
            //创建一个ul
            this.ul = document.createElement("ul");
            this.ul.style.position = "relative";
            //将元素添加到p中
            this.container.appendChild(this.ul);
        }


        List.prototype.update = function(){
            for(var i = 0; i < this.items.length; i++){
                var liTag = document.createElement("li");
                liTag.textContent = this.items[i]
                this.ul.appendChild(liTag);
            }
        }
        //模拟数据
        var array = [];
        for(var i = 0; i < 1000000; i++){
            array.push(i)
        }

        new List(document.getElementById("pElement"),array,16);


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

登录后复制

html中ul标签的优化

整整使用了大约一分钟，我的天啊，我想大家早已散去，可以看到时间都花在了Rendering中，并且要等所有的li都渲染好了之后，才会显示，用户体验感极差.
优化方案就是减少Rendering.设定数量合适的li标签，根据位置调整li的内容与样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>性能优化</title>
</head>
<body>
  <p>List的性能优化</p><br>
  <br>
  <br>
  <p id="pElement" style="height:200px;overflow-y: scroll;"></p>
  <script>
    var List = function(container,items,itemHeight){
      this.container = container;
      this.items = items;
      this.itemHeight = itemHeight;
      this.init();
      this.update();
    }

    List.prototype.init = function(){
      //创建一个ul标签
      this.ul = document.createElement("ul");
      this.ul.style.position = "relative";
      //获取的显示的高度内可以最多显示多少条数据
      var len = this._maxLength();

      var html = "";
      for(var i = 0; i < len; i++){
        html += "<li>" + this.items[i] + "</li>";
      }
      this.ul.innerHTML = html
      this.container.appendChild(this.ul);
      var self = this;
      this.container.addEventListener("scroll",function(){
        self.update()
      })


    }

    List.prototype._maxLength = function(){
      var h = this.container.offsetHeight;
      return Math.min(Math.ceil(h / this.itemHeight),this.itemHeight);
    }

    List.prototype.update = function(){
      //计算出ul的高度
      this.ul.style.height = this.items.length * this.itemHeight + "px";
      this.ul.style.margin = 0;
      //计算出滑动条目前位置前有多少个li标签
      var start = Math.floor(this.container.scrollTop / this.itemHeight);
      console.log("start:",start)
      //获得所有的子节点
      var items = this.ul.children;
      //获得长度
      var len = this._maxLength();
      for(var i = 0; i < len; i++){
        var item = items[i];
        if(!item){
          item = items[i] || document.createElement("li");
          this.ul.appendChild(item);
        }
        var index = start + i;
        item.innerHTML = this.items[index];
        item.style.top = this.itemHeight * (index) + "px";
        item.style.position = "absolute";
      }

    }
    //模拟数据
    var array = [];
    for(var i = 0; i < 1000000; i ++){
      array.push(i)
    }

    var list = new List(document.getElementById("pElement"),array,16);

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

登录后复制

再来看一眼性能图
html中ul标签的优化

同样的写法这样速度直接提高了20倍.

更多html中ul标签的优化相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7876

Java教程

1649

CakePHP 教程

1409

Laravel 教程

1301

PHP教程

1245

显示更多

Related knowledge

HTML容易为初学者学习吗？ Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？ Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...

HTML中起始标签的示例是什么？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。