n个器皿元素完成无尽翻转的完成编码_免费制作小程序_打卡小程序_餐饮小程序_微信小程序制作教程

情景

怎样正确3D渲染多达10000个元素的目录。

无尽往下拉载入技术性应用户在很多成块的內容眼前1直翻转查询。这类方式是在你向下翻转的情况下持续载入新內容。

当你应用翻转做为发现数据信息的关键方式时，它将会使你的客户在网页页面上滞留更长期并提高客户参加度。伴随着社交媒体新闻媒体的时兴，很多的数据信息被客户消費。无线网络翻转出示了1个高效率的方式让客户访问大量信息内容，而无须等候网页页面的预载入。

假如大家换1种逻辑思维方法，假如1个网页页面上面有10000个通栏组件组成，大家怎样应用5个组件动态性去3D渲染全部网页页面呢？

处理思路

在对长目录的提升中大家有许多的计划方案，比如分页查询，懒载入这些。有十分好的互动（菊花图），让客户去等候1下。这样的计划方案也是是非非常的取得成功。

怎样独辟蹊径？

1. 在单页应用中大家是不是能够对分页查询计划方案做1次剖析，每页10个元素，分页查询每次3D渲染10个元素依据

2. 大家能否用1个支架撑起全部目录的长度当显示屏翻转到对应的部位就3D渲染对应的10个元素

闪动难题

当大家按这个思路完成后会出現闪动的难题，因为翻转恶性事件较为经常，大家发如今大家看见的元素在持续的再次绘图，由于大家每次的过场是寻找哪10个元素是必须3D渲染的，随后就立即更换了

这里的思路是我在看的到显示屏部位3D渲染10个再向上和向下各衍生3D渲染10个，一共30个，操纵3D渲染的情况下一直更换最上面或最下面的元素，这样处在正中间大家能够看见的一部分就沒有做再次重绘3D渲染。只是在预3D渲染的数据信息在做重绘。

基本原理

完成1个组件，能够显示信息具备5个元素的固定不动对话框尺寸的n个新项目的目录：即在任什么时候候，无尽翻转n元素上也仅存在5个DOM器皿。

 <ul>
        <li style="transform: translate3d(0px, 0px, 0px);">……</li>
        <li style="transform: translate3d(0px, 60px, 0px);">……</li>
    </ul>

长目录內容1般都有规律性，这个目录的高宽比是能够立即根据<li>的个数立即算出来的,例如1000个元素，每一个元素的高是60px,那末大家很快就可以算出整个目录的高宽比是60000px
有了器皿后将內部的<li>相对<ul>开展肯定精准定位，在用js立即算出每个<li> 对应的'transform: translate3d(0px, 0px, 0px);'特性
根据监视scroll時间持续的去寻找当今部位必须3D渲染的<li>的, 和上1组3D渲染数据信息开展比照，有同样的<li>就绕过，找出和上1组3D渲染数据信息的不一样元素，随后做对应的更换

比如： 100 个元素，主页就显示信息5个，原始化[0,1,2,3,4] 这5个<li>必须3D渲染，当我向下翻转1点的情况下出現 [1,2,3,4,5] 这几个<li>必须3D渲染，这时候候不必立即做总体更换，只应当更换差别项，构造应为[5,1,2,3,4],因为是肯定精准定位，会摆脱规范流，单独的重绘不容易危害别的4个，从而提高特性。

怎样完成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <title>Document</title>
  <style>
    body,
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      position: relative;
    }

    ul li {
      position: absolute;
      top: 0;
      width: 100%;
      height: 31px;
      line-height: 32px;
      border-bottom: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <ul>
  </ul>
</body>
<script>
  //总器皿
  var list = [];
  // 可视性范畴内元素器皿
  var showList = [];
  // 3D渲染器皿
  var renderList = [];
  // 每一个器皿的高宽比
  var lineHeight = 32

  // 原始化1000 个元素
  for (var i = 0; i < 1000; i++) {
    list.push({ id: i, text: '第' + (i + 1) + '个元素', top: i * lineHeight, bottom: (i + 1) * lineHeight })
  }
  // 原始化器皿高宽比
  $('ul').attr('style', 'height:' + 1000 * lineHeight + 'px')
  // 找寻原始化器皿的
  function render(top, bottom) {
    showList = []
    // 标识哪些数据信息和早已3D渲染后的是反复的，这一部分将不容易反复3D渲染
    var sameIndex = []
    // 找出翻转部位再哪个元素上
    var currentIndex = 0
    for (var i = 0; i < list.length; i++) {
      var item = list[i]
      if (item.top <= window.scrollY && item.bottom > window.scrollY) {
        currentIndex = i;
        break;
      }
    }
    var range = 0
    // 在当今寻找的元素各自向上和向下找必须显示信息的元素，一共的个数做到35个为止
    while (range < 100 && showList.length + sameIndex.length < 35) {
      if (currentIndex - range >= 0) {
        // 比照考虑标准的元素是不是在早已3D渲染目录中，在就做标识，不在就放在showList 那时候候更换沒有被标识的元素
        if (renderList.includes(list[currentIndex - range].id)) {
          // sameIndex.push(currentIndex-range)
          sameIndex.unshift(renderList.indexOf(list[currentIndex - range].id))
        } else {
          showList.unshift(list[currentIndex - range])
        }
      }

      if (currentIndex + range < list.length && range != 0) {
        if (renderList.includes(list[currentIndex + range].id)) {
          sameIndex.push(renderList.indexOf(list[currentIndex + range].id))
        } else {
          showList.push(list[currentIndex + range])
        }
      }
      range++
    }
    // 将比照出来的新的必须3D渲染的元素和沒有被标识的3D渲染目录元素做更换
    if (renderList.length > 0) {
      for (var i = 0; i < renderList.length; i++) {
        if (!sameIndex.includes(i) && showList.length) {
          renderList[i] = showList.shift().id
          $('ul li').eq(i).html(list[renderList[i]].id + list[renderList[i]].text).attr('style', 'transform: translate3d(0px, ' + list[renderList[i]].top + 'px, 0px);')
        }
      }
    } else {
      // 第1次开展原始化目录
      renderList = showList.map(function (val) { return val.id })
      renderList.map(function (key) {
        $('ul').append($('<li style="transform: translate3d(0px, ' + list[key].top + 'px, 0px);"">#' + list[key].id + list[key].text + '</li>'))
      })
    }
    console.log(renderList)
  }
  // 第1次3D渲染
  render()
  $(window).scroll(function (e) {
    render()
  });

</script>

</html>

TODO

比照更换器皿元素的方式一直觉得还能提升，这样就可以提高运作高效率，从而提升迅速翻转出現的白屏
这里也出1个思索题[0,1……，10000], 每次从中取下5个元素，新选出来的和旧的开展比照，保存两个数字能量数组的相交一部分，用新数字能量数组里边的新元素更换老数字能量数组里边的非相交一部分，比如第1次是[0,1,2,3,4],第2次是[2,3,4,5,6] 那末比照后转化成[5,6,2,3,4],第3次假如是[4,5,6,7,8],转化成的就为[5,6,7,8,4]。用至少的编码数获得这个結果数字能量数组。

小结

根据数据信息进行合理布局和原始化
根据感觉精准定位让器皿摆脱规范流
根据数据信息比照，找出差别器皿元素，每次重绘尽可能少的器皿元素。

下期-----组件配搭完成长目录

重要点

组件不一样于有规律性的list, 组件的高宽比有将会不能控，会依据不一样的手机上机器设备而出現无需的高宽比
因为组件高宽比的同，3D渲染地区内有几个组件的数量也是不1样的，这就导致了器皿个数不1样
针对高宽比不太好根据数据信息立即开展测算的，假如必须1次总体3D渲染随后根据dom去测算部位和高宽比是是非非常消耗第1次载入特性的。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

网络访谈

n个器皿元素完成无尽翻转的完成编码