Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Tác giả: Lindsey Simon, Nhà phát triển trải nghiệm người dùng
Kiến thức đề xuất: HTML cơ bản, JavaScript cơ bản, kiến thức thực hành về CSS
Chỉnh lại luồng là tên của quy trình trình duyệt web để tính toán lại
vị trí và hình dạng của các phần tử trong tài liệu, cho mục đích
hiển thị lại một phần hoặc toàn bộ tài liệu. Vì hoạt động chỉnh lại luồng là một hoạt động chặn người dùng trong trình duyệt, nên sẽ giúp các nhà phát triển hiểu được cách cải thiện thời gian chỉnh lại luồng cũng như hiểu được tác động của các thuộc tính tài liệu khác nhau (độ sâu DOM, hiệu quả của quy tắc CSS, các loại thay đổi về kiểu) đối với thời gian chỉnh lại luồng. Đôi khi chỉnh lại luồng một phần tử đơn lẻ trong tài liệu có thể yêu cầu chỉnh lại luồng các phần tử gốc cũng như bất kỳ phần tử nào theo sau phần tử đó.
Có nhiều hành động của người dùng và các thay đổi DHTML có thể kích hoạt quy trình chỉnh lại luồng. Đổi kích thước cửa sổ trình duyệt, sử dụng các phương thức JavaScript liên quan đến kiểu tính toán, thêm hoặc xoá phần tử khỏi DOM và thay đổi lớp của phần tử là một vài trong số những tác vụ có thể kích hoạt tính năng chỉnh lại luồng. Một điều cũng đáng lưu ý là một số thao tác có thể khiến thời gian chỉnh lại luồng nhiều hơn bạn nghĩ. Hãy xem xét sơ đồ sau trong bài nói chuyện "thậm chí các trang web nhanh hơn" của Steve Souders:
Bảng trên cho thấy rõ ràng rằng không phải mọi thay đổi về kiểu trong JavaScript đều gây ra hiện tượng chỉnh lại luồng trên mọi trình duyệt và thời gian cần để chỉnh lại luồng là khác nhau. Cũng có phần rõ ràng rằng các trình duyệt hiện đại
đang hoạt động hiệu quả hơn tại thời điểm chỉnh lại luồng.
Tại Google, chúng tôi kiểm tra tốc độ của các trang web và ứng dụng theo nhiều cách. Hoạt động chỉnh lại luồng là yếu tố quan trọng mà chúng tôi cân nhắc khi thêm các tính năng vào giao diện người dùng. Chúng tôi cố gắng mang đến trải nghiệm người dùng sống động, tương tác và thú vị.
Nguyên tắc
Sau đây là một số nguyên tắc đơn giản giúp bạn giảm thiểu việc chỉnh lại luồng trong trang web:
Giảm độ sâu DOM không cần thiết. Các thay đổi ở một cấp trong cây DOM có thể gây ra các thay đổi ở mọi cấp của cây – từ sâu đến gốc và xuống các phần tử con của nút đã sửa đổi. Điều này khiến bạn mất nhiều thời gian hơn để chỉnh lại luồng.
Giảm thiểu các quy tắc CSS và xoá các quy tắc CSS không dùng đến.
Nếu bạn thực hiện các thay đổi kết xuất phức tạp như ảnh động, hãy thực hiện các thay đổi đó bên ngoài quy trình. Hãy sử dụng giá trị vị trí tuyệt đối hoặc vị trí cố định để đạt được mục tiêu này.
Tránh dùng các bộ chọn CSS phức tạp không cần thiết, cụ thể là các bộ chọn thành phần con, vốn đòi hỏi nhiều năng lượng của CPU hơn để so khớp bộ chọn.
Trong video này, Lindsey giải thích một số cách đơn giản để giảm thiểu chỉnh lại luồng trên các trang của bạn:
[null,null,["Cập nhật lần gần đây nhất: 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)."]]
