Sự khác biệt giữa chỉnh lại và sơn lại là gì?

Question

Tôi không rõ ràng về sự khác biệt giữa reflow + repaint (nếu có bất kỳ sự khác biệt nào)

Dường như reflow có thể thay đổi vị trí của các phần tử DOM khác nhau. Ví dụ. reflow sẽ xảy ra khi loại bỏ một yếu tố và sơn lại sẽ xảy ra khi thay đổi màu sắc của nó.

Điều này có đúng không?

Answer 1

Bản tin này dường như để trang trải các reflow vs hiệu suất repaint hành

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Đối với các định nghĩa, từ bài rằng:

Một repaint xảy ra khi thay đổi được thực đến một các phần tử da thay đổi rõ ràng, nhưng không ảnh hưởng đến bố cục của nó.

Ví dụ về này bao gồm outline, visibility, background, hoặc color. Theo Opera, repaint là tốn kém bởi vì trình duyệt phải xác minh khả năng hiển thị của tất cả các nút khác trong cây DOM.

Một reflow là thậm chí quan trọng hơn đối với hiệu suất vì nó liên quan đến những thay đổi mà ảnh hưởng đến cách bố trí của một phần của trang (hoặc toàn bộ trang).

Ví dụ về các nguyên nhân gây ra bao gồm: thêm hoặc xóa nội dung, thay đổi rõ ràng hoặc hoàn toàn width, height, font-family, font-size và hơn thế nữa.

Tìm hiểu mà css-tính hiệu lực thi hành repaint và xem xét tại http://csstriggers.com

Answer 2

Theo tôi, sơn lại chỉ ảnh hưởng đến DOM chính nó, nhưng reflow ảnh hưởng đến toàn bộ trang.

Sự tái xuất hiện xảy ra khi một số thay đổi chỉ có kiểu da của nó, chẳng hạn như màu sắc và khả năng hiển thị.

Đổi mới xảy ra khi trang DOM thay đổi bố cục của nó.

Gần đây, tôi đã tìm thấy một trang web có thể tìm kiếm thuộc tính nào sẽ kích hoạt repaint hoặc reflow. http://csstriggers.com/

Answer 3

Dưới đây là một bài viết tuyệt vời: http://blog.letitialew.com/post/30425074101/repaints-and-reflows-manipulating-the-dom

Một repaint, hoặc vẽ lại, đi qua tất cả các yếu tố và xác định tầm nhìn của họ, màu sắc, phác thảo và đặc tính phong cách trực quan khác, sau đó nó cập nhật các bộ phận liên quan của màn hình.

Bản chỉnh sửa tính toán bố cục của trang.Một phần tử reflow trên một phần tử tính toán lại kích thước và vị trí của phần tử, và nó cũng kích hoạt sự tái tạo thêm về các phần tử, tổ tiên và các phần tử xuất hiện sau nó trong DOM. Sau đó, nó gọi một repaint cuối cùng. Phản xạ rất tốn kém.

Nó cũng được giới thiệu khi hiện tượng reflow xảy ra và cách giảm thiểu độ reflow.