移动端H5首屏优化的一个解决方案

作者: MJ 分类: javascript 发布时间: 2019-12-15 15:19

我们在做h5或者页面的时候,经常会遇到首屏优化,首屏优化的方式很多,比如懒加载等,最近从师姐那里学来一个,做一个记录。

我们的需求是这样,因为数据比较少,没有做分页,需要首屏一次性加在完成,但是用户再打开页面的时候仅仅能看到的只是第一屏的数据,比如用户只看到了3-5条数据,而我们一次性把所有数据渲染出来还是会影响加载速度的,所以我们就产生了一个方案:我们进入页面的时候,只做用户看到的行为,其他的行为延迟加载,具体就是,我们可以先加载用户第一眼看到的3-5条数据,然后延迟把剩下的加载一下。

代码如下:

<style>
    * {
      margin: 0;
      padding: 0;
    }

    p {
      line-height: 100px;
      border-bottom: solid 1px #ccc;
    }
</style>

<div id="app"></div>

<script>
    const data = [
      {
        name: "kshdhd"
      },
      {
        name: "rdfdgdg"
      },
      {
        name: "4565646456"
      },
      {
        name: "45646563ggg"
      },
      {
        name: "dgg435435"
      },
      {
        name: "666666666666666666gdgfg465"
      },
      {
        name: "4546464dgfdg"
      },
      {
        name: "4645665gdgdgdfdgdgdg"
      },
      {
        name: "etet564646445646"
      },
      {
        name: "kshdhd"
      },
      {
        name: "rdfdgdg"
      },
      {
        name: "4565646456"
      },
      {
        name: "45646563ggg"
      },
      {
        name: "dgg435435"
      },
      {
        name: "gdgfg465"
      },
      {
        name: "4546464dgfdg"
      },
      {
        name: "4645665gdgdgdfdgdgdg"
      },
      {
        name: "etet564646445646"
      }
    ]
    let res = data.slice(0, 6);
    document.getElementById('app').innerHTML = res.map(val => {
      return `<p>${val.name}</p>`;
    }).join('');
    setTimeout(() => {
      document.getElementById('app').innerHTML = [...res, ...data.slice(6, data.length)].map(val => {
        return `<p>${val.name}</p>`;
      }).join('');
    }, 1000);
</script>

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注