|
首先介绍原生的js渲染大量DOM会出现的问题和解决方法
一、渲染大量DOM会出现的问题
会出现较长的白屏事件。
渲染会卡的代码示例
列表
// 插入十万条数据，渲染十万个DOM
const total = 100000;
let ul = document.querySelector("ul");
// 性能优化不会每次插入一个DOM就回流一次，在这里没有效果，因为页面结构简单
const fragment = document.createDocumentFragment();
for(let i = 0; i 按钮
列表
setTimeout(()=>{
// 插入十万条数据，渲染十万个DOM
const total = 100000;
let ul = document.querySelector("ul");
// 性能优化不会每次插入一个DOM就回流一次，在这里没有效果，因为页面结构简单
const fragment = document.createDocumentFragment();
for(let i = 0; i 按钮
列表
// 插入十万条数据，渲染十万个DOM
const total = 100000;
// 设置每次插入显示的DOM数量，根据情况自己设置
const once = 100;
// 当前已经渲染DOM的总数
let countOfRender = 0;
let ul = document.querySelector("ul");
function loop(){
// 游览器单线程，一次性渲染大量的DOM，会阻塞用户操作，阻塞CSS渲染，有较长白屏事件等问题
// 所以我们只需要每次渲染少量的DOM不会阻塞用户操作即可解决这些问题
requestAnimationFrame(()=>{
const fragment = document.createDocumentFragment();
// 每次只渲染once条数据
for(let i = 0; i = total) return;
const li = document.createElement("li");
li.innerText = Math.floor(Math.random() * total);
fragment.appendChild(li);
countOfRender += 1;
}
ul.appendChild(fragment);
loop();
})
}
loop();
四、缺点
说了这么多，好像通过这种方式渲染大量的DOM一点缺点都没有。其实还是有的，那就是如果用户希望直接拉到最下面查看最后一条数据，对不起，只能慢慢等它加载完才能查看到最后一条数据。这种优化方式创建渲染完所有DOM是比直接一次性创建渲染慢很多的。不过如果这种情况是比较少的。
在流行的前端框架上如何使用
上面的版本是介绍原生js创建渲染大量的DOM如何进行性能优化。但是现在哪个前端攻城狮参与的项目不是vue、react、Angular。今天我们讲讲将它运用到框架上，以Vue为例子举例。通过接口拿到的数据列表要展示到页面上，一般都会使用for循环去渲染重复的DOM。但是一般开发的时候数据列表的长度都比较小，最多的可能就是表格的时候，大概是五六十条的数据长度。这时候加载起来还不会卡，偶尔少数的情况，也会返回成千上万条数据（比如聊天记录），这时候如此数量的DOM创建渲染起来肯定是很慢的。以下代码演示了如何在框架上使用这种方法。尽量模拟了平时开发请求接口拿到数据最后渲染的处理方式。这里使用了setTimeout并且延迟时间设置的比较大是为了模拟懒加载，如果想尽快渲染完全部的DOM并提高动画流畅度，建议使用requestAnimationFrame。
框架使用示例
#app {
height: 300px;
width: 200px;
overflow: hidden scroll;
}
按钮
列表
{{item}}
const app = new Vue({
el: '#app',
data: {
// v-for循环的数据数组
list: [],
// 接口请求回来的完整数据
data: [],
// 渲染总数
total: 0,
// 设置每次插入显示的DOM数量，根据情况自己设置
once: 20,
// 当前已经渲染DOM的总数
countOfRender: 0
},
created() {
this.fetchData();
},
methods: {
fetchData() {
// 模拟接口请求
new Promise((resolve, reject) => {
setTimeout(() => {
let res = { total: 100000 };
res.data = [];
for (let i = 0; i {
this.data = res.data;
this.total = res.total;
this.loop();
});
},
loop() {
// 用setTimeout模拟懒加载，用requestAnimationFrame提高渲染效率和动画流畅度
setTimeout(() => {
// 每次只渲染once条数据
const temp = [];
for (let i = 0; i = this.total) return;
temp.push(this.data[this.countOfRender]);
this.countOfRender += 1;
}
this.list = this.list.concat(temp);
this.loop();
}, 700);
}
}
});
未优化版本：可以看出未优化的版本渲染起来很慢，这还是在for循环的DOM结构简单的情况下，并且按钮点击的回调也被推迟到了DOM加载完成之后才会执行，也就是用户交互依然会被阻塞。
框架使用示例
#app {
height: 300px;
width: 200px;
overflow: hidden scroll;
}
按钮
列表
{{item}}
const app = new Vue({
el: '#app',
data: {
data: []
},
created() {
this.fetchData();
},
methods: {
fetchData() {
// 模拟接口请求
new Promise((resolve, reject) => {
setTimeout(() => {
let res = { total: 100000 };
res.data = [];
for (let i = 0; i {
this.data = res.data;
});
}
}
});
|