Thinking--JavaScript延迟加载属性数据（性能提升）
Thinking--JavaScript延迟加载属性数据（性能提升）
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。
Vue 遍历对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。getter/setter 对用户来说是不可见的，但是在内部 Vue 能够追踪依赖，在 property 被访问和修改时通知变更，依此做到了数据的响应式。
vue 通过 Object.defineProperty 的实现思路，值得我们思考。下面提到的属性延迟加载就是其中一个引发点。
常规写法示例
async function getData() {
let data = await fetch(new Request('./data.json')).then(res => res.json())
return data
}
let res = { data: [] }
res.data = await getData()
// res.data 用于页面渲染
render(res.data)上述写法，在 javascript 编码中可能出现比较少，但在 vue 等开发中，却会经常看到类似的写法：
<script>
data () {
return {
res: {data: []}
}
},
methods: {
async function getData() {
this.res.data = await fetch(new Request('./data.json')).then(res => res.json())
}
},
created () {
this.getData()
}
script>- 如果
res.data在页面渲染时，直接首屏呈现，上述写法没有问题； - 如果
res.data是通过某些操作触发才呈现，那上述写法需要优化。
关于第2种假设，优化点在于**「延迟加载」**。你有可能会说，可以监听触发动作（如click，scroll），然后在相应事件中触发。
document.querySelector('#btn').addEventListener('click', async () => render(await getData()))上述处理没有问题，但这里想要提到的是属性自动触发的方式 – 借助 Object.defineProperty。
延迟加载对象属性
let res = {
get data() {
return fetch(new Request('./data.json')).then(res => res.json())
}
}
// 注意上述是异步
await res.data这样可以做到在调用 res.data 时，才会执行相关获取数据操作。
缓存结果，避免重复执行
延迟加载（将计算推迟到第一次读取属性时），然后缓存结果以供后续使用。避免重复执行相同的工作是提高性能的最佳方式之一，直接利用缓存结果可以加快运行速度。
let res = {
get data() {
let _data = fetch(new Request('./data.json')).then(res => res.json())
Object.defineProperty(this, 'data', {
value: _data,
writable: false,
configurable: false,
enumerable: false
})
return _data
}
}
console.log(object.hasOwnProperty("data")) // true
const data = await object.data
console.log(object.hasOwnProperty("data")) // truevue commputed
「延迟加载、缓存结果」这个和 vue computed 实现的效果一样！计算属性是通过 getter 函数延迟加载，基于它们的响应式依赖进行缓存的。
Vue 中对于 computed 实现也是借助 defineProperty - https://github1s.com/vuejs/vue/blob/2.6/dist/vue.js#L3580-L3581
function defineComputed (
target,
key,
userDef
) {
var shouldCache = !isServerRendering();
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: createGetterInvoker(userDef);
sharedPropertyDefinition.set = noop;
}
if (sharedPropertyDefinition.set === noop) {
sharedPropertyDefinition.set = function () {
warn(
("Computed property \"" + key + "\" was assigned to but it has no setter."),
this
);
};
}
Object.defineProperty(target, key, sharedPropertyDefinition);
}class
class 可以同样实现延迟加载，并对结果做相应的缓存处理。
class MyClass {
constructor() {
Object.defineProperty(this, "data", {
get() {
// 开销大的操作（如数据请求）
const actualData = someExpensiveComputation()
Object.defineProperty(this, "data", {
value: actualData,
writable: false,
configurable: false
})
return actualData
},
// ①
configurable: true,
enumerable: true
})
}
}这里①将 data 设置成可配置尤为重要，因为我们需要对 data 再次调用 Object.defineProperty()
const obj = new MyClass();
console.log(obj.hasOwnProperty("data")) // true
const data = obj.data;
console.log(obj.hasOwnProperty("data")) // true腾讯云开发者
