Javascript HTML оплавления

Question

Я интересно, если это стоит того, чтобы оптимизировать простой код, как это:

var x1 = $div1.offset().left; 
var y1 = $div1.offset().top; 
var h1 = $div1.outerHeight(true); 
var w1 = $div1.outerWidth(true); 

Сколько перекомпоновки мы делаем? Будут ли браузеры упаковывать их все вместе в 1 reflow или это вызовет 4 переплавления?

Answer 1

Этот код может вызвать до 4 переплавов. Каждый раз, когда вы выполняете измерение, которое должно быть рассчитано, оно может вызывать пересчеты, такие как доступ к offsetWidth, clientHeight или любому вычисленному значению CSS, в то время как изменения DOM помещаются в очередь, чтобы быть сделанным .. При этом некоторые браузеры могут работать за кулисами во избежание многократного переполнения в некоторых случаях.

Все, что осталось в стороне от одной вещи, которую я узнал, если вы не просмотрели этот код, вызывающий серьезные проблемы с производительностью во время тестирования, не должен быть преждевременным в оптимизации производительности.

Чтобы ответить на другую часть вашего вопроса, не видя больше кода, трудно сказать, стоит ли его оптимизировать этот бит, но, скорее всего, его не с тем, что я видел. Хотя я, я бы написал это с самого начала:

var offset = $div1.offset(); 
var x1 = offset.left; 
var y1 = offset.top; 
var h1 = $div1.outerHeight(true); 
var w1 = $div1.outerWidth(true);