Блог

Я реализовал свой собственный прокручиваемый макет и определил в нем некоторые поля для хранения Element.scrollHeight , Element.scrollTop , Element.scrollWidth и Element.scrollLeft , чтобы избежать возможных повторяющихся вычислений (кажется, это технический термин для этого reflow ), поскольку они используются в нескольких пользовательских методах жизненного цикла.

Мне интересно, является ли это избыточным, если учесть, что эти свойства могут быть просто определены как getter, чтобы защитить их от изменения клиентами, а геттеры будут просто возвращать невидимые поля от клиентов, хранящих фактические значения.

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Я не знаю, является ли этот источник надежным, но он говорит, что да, они запускают перепрошивку.

Немного того и другого.

Для этих свойств, среди прочего, необходимо, чтобы поле макета было обновлено, чтобы возвращать правильное значение, так что да, они вызовут перепрошивку … при необходимости.

Однако, если макет обновлен, браузеру не нужно его пересчитывать, и перепрошивка не запускается, они могут просто выбрать внутреннее значение, запрошенное из последних вычислений поля макета.

Поэтому вызов их несколько раз не является проблемой, если между этими вызовами ничего не меняло макет. Однако, если что-то меняет промежуточный макет (например, изменение класса, вставка узла DOM и т. Д.), Каждый вызов может стоить дорого, поэтому вызывайте их осторожно.

Ps: что касается геттера, это вовсе не значит, что пользователь не может их установить, поскольку вы действительно можете их установить:

 console.log( div.offsetWidth );
Object.defineProperty( div, "offsetWidth", { value: 0 } );
console.log( div.offsetWidth );  

 <div id="div">hello</div>