предисловие
Сегодня днем, читая исходный код Vue3 и Component, я нашел такой комментарий. (Адрес источника:packages/runtime-core/src/componentProxy.ts)
This getter gets called for every property access on the render context during render and is a major hotspot. The most expensive part of this is the multiple hasOwn() calls. It's much faster to do a simple property access on a plain object, so we use an accessCache object (with null prototype) to memoize what access type a key corresponds to.
Это примерно означает следующее:
Во время рендеринга при доступе к контексту рендерингаhasOwn()Операции дорогие. Операция доступа к свойствам обычных объектов будет выполняться намного быстрее. Поэтому используйте объект accessCache в Vue3 для кэширования объекта.
эксперимент
ТакObject.prototype.hasOwnPropertyКак бы дорога ни была операция, ее стоит оптимизировать. Я использовал код ниже и экспериментировал.
const obj = {
name: 'Natalie portman'
}
const accessCache = { ...obj }
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (val, key) => hasOwnProperty.call(val, key)
let start = new Date().getTime()
for (let i = 0; i < 5000000; i++) {
hasOwn(obj, 'name')
}
console.log(`duration: ${new Date().getTime() - start}`)
start = new Date().getTime()
for (let i = 0; i < 5000000; i++) {
accessCache.name
}
console.log(`duration: ${new Date().getTime() - start}`)
// log
// duration: 35
// duration: 4
При выполнении 5 миллионов операций чтения атрибутов разница в производительности между ними составляет примерно 9 раз.
Когда дерево компонентов Vue очень велико, имеется много смонтированных свойств. использоватьaccessCacheObject необходимо кэшировать операцию Object.prototype.hasOwnProperty.
причина
Была запрошена соответствующая информация, и общие причины заключаются в следующем:
Движок Chrome V8 поддерживает глобальный кеш. После того, как кеш заполнен, он всегда будет повторяться после этого. это означаетval[key]Поиск свойств всегда будет выполняться во время компиляции, а не во время выполнения.
И двигатель V8 не подойдет,hasOwnPropertyилиkey in valueВыполняйте любое кэширование, всегда переходите к среде выполнения.
Эпилог
👏 Приветствую всех, кто поправит меня. Исходный код адаптивных данных Vue3, nextTick, watch, относительно независим и выглядит очень просто. Но после просмотра Компонента слишком много участников, и прогресс очень медленный.