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

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

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

代码如下：

* {

margin: 0;

padding: 0;

}

p {

line-height: 100px;

border-bottom: solid 1px #ccc;

}

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 `

${val.name}

`;

}).join('');

setTimeout(() => {

document.getElementById('app').innerHTML = [...res, ...data.slice(6, data.length)].map(val => {

return `

${val.name}

`;

}).join('');

}, 1000);

欢迎关注小程序，感谢您的支持！