Jaki jest najskuteczniejszy sposób modyfikacji elementów DOM i ograniczenia przepływu?

Question

Podczas pracy z bardzo dynamicznym interfejsem użytkownika (należy się spodziewać aplikacji Single Page) z potencjalnie dużymi bibliotekami JS, szablonami widoku, sprawdzaniem poprawności, ajaxem, animacjami itp. Jakie są strategie, które pomogą zminimalizować lub skrócić czas spędzany przez przeglądarkę? reflow?

Na przykład wiemy, że istnieje wiele sposobów na zmianę wielkości DIV, ale czy istnieją techniki, których należy unikać (z punktu widzenia przepływu) i jak wyniki różnią się między przeglądarkami?

Oto konkretny przykład:

Biorąc prosty przykład 3 różne sposoby, aby kontrolować wielkość DIV, gdy okno jest zmieniany, które z nich powinny być wykorzystywane, aby zminimalizować zmiany układu?

http://jsfiddle.net/xDaevax/v7ex7m6v/

//Method 1: Pure Javascript 
function resize(width, height) { 
    var target = document.getElementById("method1"); 
    target.setAttribute("style","width:" + width + "px"); 
    target.setAttribute("style", "height:" + height + "px"); 
    console.log("here"); 
} // end function 
window.onresize = function() { 
    var height = (window.innerHeight/4); 
    var width = (window.innerWidth/4); 
    console.log(height); 
    resize(height, width); 
} 
//Method #3 Jquery animate 
$(function() { 
    $(window).on("resize", function(e, data) { 
     $("#method3").animate({height: window.innerHeight/4, width: window.innerWidth/4}, 600) 
    }); 
}); 

Answer 1

Najlepiej spróbować uniknąć zmieniania elementów DOM w miarę możliwości. Czasami można w ogóle zapobiec ponownemu rozpływowi, trzymając się właściwości CSS lub, jeśli jest to wymagane, używając CSS 'transform s, tak aby sam element nie został w ogóle zmieniony, ale zamiast tego zmienia się stan wizualny. Paul Lewis i Paul Irish szczegółowo opisują, dlaczego tak jest w przypadku this article.

To podejście nie działa we wszystkich przypadkach, ponieważ czasami wymagana jest zmiana rzeczywistego elementu DOM, ale w przypadku wielu animacji i takich, transform s przynosi najlepszą wydajność.

---

Jeśli operacje wymagają reflow, można zminimalizować efekt przyjmuje brzmienie:

• Utrzymanie głębokości DOM mały
• Utrzymanie selektora CSS proste (i zapisywanie skomplikowanych do zmiennej w JavaScript)
• Unikanie wbudowanych stylów
• Unikanie tabel dla układu
• Unikanie JavaScri pt w miarę możliwości:

Nicole Sullivan opublikowała numer pretty good article na ten temat, który zawiera więcej informacji o ponownym przepływie przeglądarek i ich powtórkach.

Jeśli faktycznie zmieniasz właściwości DOM, a nie DOM, najlepiej zrobić to w większych fragmentach niż w mniejszych, sugerowanych like this Stack Overflow post.

---

W podanym przykładzie druga metoda jest najlepsza, ponieważ używa właściwości CSS bez potrzeby stosowania JavaScript. Przeglądarki są bardzo dobre w renderowaniu elementów, których wymiary i pozycja są określane wyłącznie przez CSS. Jednak nie zawsze można uzyskać element, w którym potrzebujemy czystego CSS.

Najgorsza metoda jest zdecydowanie trzecią, ponieważ animacja jQuery jest strasznie powolna, aby rozpocząć, ale wywoływanie jej podczas zmiany rozmiaru powoduje, że animacje układają się jeden na drugim, więc pozostaje on daleko w tyle jeśli zmienisz go w ogóle .Możesz temu zapobiec, ustawiając limit czasu za pomocą wartości logicznej, aby sprawdzić, czy został już uruchomiony, lub, bardziej korzystnie, nie używaj animacji jQuery, aby to zrobić w ogóle, ale zamiast tego użyj jQuery's .css(), ponieważ funkcja zmiany rozmiaru uruchamia się tak często, że będzie wyglądaj mimo wszystko na animowane.