前端优化之渲染百万条数据不卡顿

方法如下：

Document.createDocumentFragment()： 用来创建虚拟DOM

window.requestAnimationFrame：告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

还有一种方案可以提高性能：

如果对于大量的数据，只应用于展示的话，可以使用Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；（这样可以让Vue不对对象增加getter和setter操作，从而提高性能）

• 不能添加新属性

• 不能删除已有属性

• 不能修改已有属性的值

• 不能修改原型

• 不能修改已有属性的可枚举性、可配置性、可写性

var obj = {
    name: '张三',
    age: 18,
    address: '上海市'
}
obj.__proto__.habit = '运动'
 
// 冻结对象
Object.freeze(obj)
 
// 不能添加新属性
obj.sex = '男'
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能删除原有属性
delete obj.age
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能修改已有属性的值
obj.name = '李四'
console.log(obj)    // {name: "张三", age: 18, address: "上海市"}
 
// 不能修改原型
obj.__proto__ = '随便什么值'
console.log(obj.__proto__)  // {habit: "运动", constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, …}
 
// 不能修改已有属性的可枚举性、可配置性、可写性
Object.defineProperty(obj,'address',{ // TypeError: Cannot redefine property: address
    enumerable: false,
    configurable: false,
    writable: true
})




深冻结



var obj = {
    name: '张三',
    info: {
        a: 1,
        b: 2
    }
}
function deepFreeze(obj) {
    // 获取所有属性
    var propNames = Object.getOwnPropertyNames(obj)
 
    // 遍历
    propNames.forEach(item => {
        var prop = obj[item]
        // 如果某个属性的属性值是对象，则递归调用
        if (prop instanceof Object && prop !== null) {
            deepFreeze(prop)
        }
    })
    // 冻结自身
    return Object.freeze(obj)
}
deepFreeze(obj)
obj.name = '李四'
console.log(obj)    // {name: "张三", info: {…}}
obj.info.a = 100
console.log(obj.info)   // {a: 1, b: 2}