Önerilen bilgi: Temel HTML, temel JavaScript, CSS çalışma bilgisi
Yeniden düzenleme, dokümanın bir kısmının veya tamamının yeniden oluşturulması amacıyla dokümandaki öğelerin konumlarını ve geometrilerini yeniden hesaplamak için kullanılan web tarayıcısı işleminin adıdır. Yeniden düzenleme, tarayıcıda kullanıcı engelleme işlemi olduğundan, geliştiricilerin yeniden düzenleme süresini nasıl iyileştireceklerini ve çeşitli belge özelliklerinin (DOM derinliği, CSS kuralı verimliliği, farklı stil değişiklikleri) yeniden düzenleme zamanı üzerindeki etkilerini anlamaları için faydalıdır. Bazen belgedeki tek bir öğenin yeniden düzenlenmesi, üst öğelerinin ve onu takip eden öğelerin yeniden düzenlenmesini gerektirebilir.
Yeniden düzenlemeyi tetikleyebilecek çok çeşitli kullanıcı işlemleri ve
olası DHTML değişiklikleri vardır. Tarayıcı penceresini yeniden boyutlandırmak, hesaplanan stilleri içeren JavaScript yöntemlerini kullanmak, DOM'ye öğe eklemek veya DOM'dan öğe kaldırmak ve bir öğenin sınıflarını değiştirmek yeniden düzenlemeyi tetikleyebilecek unsurlardan bazılarıdır. Ayrıca, bazı işlemlerin tahmin ettiğinizden daha fazla yeniden düzenleme süresine neden olabileceği de unutulmamalıdır. Steve Souders'ın "Hatta Daha Hızlı Web Siteleri" için yaptığı konuşmada yer alan aşağıdaki şemayı düşünün:
Yukarıdaki tablodan, JavaScript'teki stilde yapılan tüm değişikliklerin tüm tarayıcılarda yeniden düzenlemeye neden olmadığı ve yeniden düzenleme için gereken sürenin değişiklik gösterdiği açıktır. Ayrıca, modern tarayıcıların yeniden düzenleme
zamanlarında daha iyi hale geldiği de açıkça görülmektedir.
Google'da web sayfalarımızın ve uygulamalarımızın hızını çeşitli şekillerde test ediyoruz ve yeniden düzenleme, kullanıcı arayüzlerimize özellik eklerken göz önünde bulundurduğumuz önemli bir faktördür. Canlı, etkileşimli ve keyifli kullanıcı deneyimleri
sunmak için çalışıyoruz.
Yönergeler
Web sayfalarınızın yeniden düzenlenmesini en aza indirmenize yardımcı olacak bazı basit yönergeler şunlardır:
Gereksiz DOM derinliğini azaltın. DOM ağacında bir düzeyde yapılan değişiklikler, köke ve değiştirilen düğümün alt öğelerine kadar ağacın her düzeyinde değişikliklere neden olabilir. Bu da yeniden düzenleme için daha fazla zaman harcanmasına neden olur.
CSS kurallarını en aza indirin ve kullanılmayan CSS kurallarını kaldırın.
Animasyonlar gibi karmaşık oluşturma değişiklikleri yaparsanız bunu akışın dışında yapın. Bunun için konum mutlak veya konum-sabit değerlerini kullanın.
Seçici eşleştirmesini yapmak için daha fazla CPU gücü gerektiren gereksiz karmaşık CSS seçicilerden (özellikle alt seçicilerden) kaçının.
Bu videoda Lindsey, sayfalarınızdaki yeniden düzenlemeyi en aza indirmenin bazı basit yollarını açıklıyor:
[null,null,["Son güncelleme tarihi: 2025-07-25 UTC."],[[["\u003cp\u003eReflow, the web browser's process of recalculating element positions for re-rendering, can significantly impact web page performance as a user-blocking operation.\u003c/p\u003e\n"],["\u003cp\u003eVarious actions, like resizing the browser window or manipulating the DOM with JavaScript, can trigger reflow, with some operations being more time-consuming than others.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can minimize reflow by reducing DOM depth, optimizing CSS rules, using absolute or fixed positioning for complex rendering changes, and avoiding complex CSS selectors.\u003c/p\u003e\n"],["\u003cp\u003eModern browsers are continuously improving reflow times, but understanding and mitigating its impact remains crucial for creating performant web experiences.\u003c/p\u003e\n"]]],["Reflow, a browser process that recalculates element positions and geometries, can be triggered by actions like resizing the window, DOM manipulation, or style changes. To minimize reflow, developers should reduce DOM depth, minimize CSS rules and selectors, and perform complex rendering changes outside the normal flow using absolute or fixed positioning. Certain JavaScript style modifications cause varying degrees of reflow. Google prioritizes reflow considerations when designing web page features for enhanced user experience.\n"],null,["# Minimizing browser reflow\n\nAuthor: Lindsey Simon, UX Developer\n\nRecommended knowledge: Basic HTML, basic JavaScript, working knowledge of CSS\n\nReflow is the name of the web browser process for re-calculating the\npositions and geometries of elements in the document, for the purpose\nof re-rendering part or all of the document. Because reflow is a\nuser-blocking operation in the browser, it is useful for developers to\nunderstand how to improve reflow time and also to understand the\neffects of various document properties (DOM depth, CSS rule efficiency,\ndifferent types of style changes) on reflow time. Sometimes reflowing a\nsingle element in the document may require reflowing its parent\nelements and also any elements which follow it.\n\nThere are a great variety of user actions and possible DHTML changes\nthat can trigger a reflow. Resizing the browser window, using\nJavaScript methods involving [computed styles](http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value),\nadding or removing elements from the DOM, and changing an element's\nclasses are a few of the things that can trigger reflow. It's also\nworth noting that some operations may cause more reflow time than you\nmight have imagined - consider the following diagram from Steve\nSouders' talk \"[Even Faster Web Sites](/events/io/sessions/EvenFasterWebsites)\":\n\nFrom the table above it's clear that not all changes to the style in\nJavaScript cause a reflow in all browsers, and that the time it takes\nto reflow varies. It is also somewhat clear that modern browsers are\ngetting better at reflow times.\n\nAt Google, we test the speed of our web pages and applications in a\nvariety of ways - and reflow is a key factor we consider when adding\nfeatures to our UIs. We strive to deliver lively, interactive and\ndelightful user experiences.\n\n### Guidelines\n\nHere are some easy guidelines to help you minimize reflow in your web pages:\n\n1. Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the way down into the children of the modified node. This leads to more time being spent performing reflow.\n2. Minimize CSS rules, and remove unused CSS rules.\n3. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.\n4. Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.\n\nIn this video, Lindsey explains some simple ways to minimize reflow on your pages: \n\n\u003cbr /\u003e\n\n### Additional resources\n\n- [Opera's Repaints and reflows](http://dev.opera.com/articles/view/efficient-javascript/?page=3)\n- Satoshi Ueyama's debug-Firefox reflow demos:\n - [google.co.jp reflow](http://www.youtube.com/watch?v=nJtBUHyNBxs)\n - [mozilla.org reflow](http://www.youtube.com/watch?v=ZTnIxIA5KGw)\n - [ja.wikipedia.org reflow](http://www.youtube.com/watch?v=dndeRnzkJDU)\n- [Nicole Sullivan on Reflows and Repaints](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)\n\nFeedback\n--------\n\nWas this page helpful? \nYes Great! Thank you for the feedback. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).\nNo Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss)."]]
