## Example of layerization trade-offs with fixed element + scrolling In this example I'd like to compute the "cost" of a scroll on a page with scrolled content and a fixed element. We estimate the cost of a frame as rasterization cost + compositing cost. We express these costs as "number of pixels drawn to", as percentages of the content area. Let's say the scrolled content has an overdraw factor of 1.3 and the fixed element is transparent and covers 20% of the content area and also has an internal overdraw of 1.3. ### Case 1: One slice, scrolled If we draw the fixed content into the opaque scrolled slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer = 130% + 26% + 100% = 256% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content that doesn't overlap the fixed element + 1.3 * 20% + 1.3 * 20% rasterization of the content that overlaps with the fixed element + 100% for OS compositing of the opaque layer = 2 * 1.3 * 20% + 100% = 52% + 100% = 152% ``` ### Case 2: Two slices, one scrolled and one fixed If we put the fixed content into a transparent fixed slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer + 20% for OS compositing of the transparent layer = 130% + 26% + 100% + 20% = 276% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content + 0% rasterization for the fixed content + 120% compositing = 120% ``` ### Evaluation So we pay 20% on the initial paint and save 32% per scroll. That would be worth doing! Where do these 32% savings come from? They come from the fact that the additional compositor overdraw is less than the drawing overdraw. The "drawing overdraw" for the affected area is 2.6, and the additional "compositor overdraw" for the affected area is 1. (2.6 - 1) = 1.6, 1.6 * 20% = 32%. So in this case, creating the slice is worth doing because 2.6 is more than 1, i.e. because the "drawing overdraw" for the area in the affected slices is larger than one. ## The cost of transparent gaps Now, what happens if we have gaps in the transparent slice? This reduces the "drawing overdraw" in the slice to something that's less than one! Let's say only 10% of the transparent slice's bounding box are covered with content, and 90% are empty. The "drawing overdraw" in those 10% is still 1.3 in our example. But the overall "drawing overdraw" in the slice is now 0.13. If we plug this number into the calculation above, we get: (0.13 - 1) * 20% = -0.87 * 20% = 17.4% In other words, having the separate slice **increases** the cost of a scroll, by a pixel count of 17.4% of the size of the content area. As soon as the compositor needs to composite transparency, the chances that performance benefits from a separate slice go down rapidly. We should make layerization decisions in such a way that the compositor never has to touch pixels that regular drawing wouldn't touch.
Bug 1606685 Comment 4 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
## Example of layerization trade-offs with fixed element + scrolling In this example I'd like to compute the "cost" of a scroll on a page with scrolled content and a fixed element. We estimate the cost of a frame as rasterization cost + compositing cost. We express these costs as "number of pixels drawn to", as percentages of the content area. Let's say the scrolled content has an overdraw factor of 1.3 and the fixed element is transparent and covers 20% of the content area and also has an internal overdraw of 1.3. ### Case 1: One slice, scrolled If we draw the fixed content into the opaque scrolled slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer = 130% + 26% + 100% = 256% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content that doesn't overlap the fixed element + 1.3 * 20% + 1.3 * 20% rasterization of the content that overlaps with the fixed element + 100% for OS compositing of the opaque layer = 2 * 1.3 * 20% + 100% = 52% + 100% = 152% ``` ### Case 2: Two slices, one scrolled and one fixed If we put the fixed content into a transparent fixed slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer + 20% for OS compositing of the transparent layer = 130% + 26% + 100% + 20% = 276% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content + 0% rasterization for the fixed content + 120% compositing = 120% ``` ### Evaluation So we pay 20% on the initial paint and save 32% per scroll. That would be worth doing! Where do these 32% savings come from? They come from the fact that the additional compositor overdraw is less than the drawing overdraw. The "drawing overdraw" for the affected area is 2.6, and the additional "compositor overdraw" for the affected area is 1. (2.6 - 1) = 1.6, 1.6 * 20% = 32%. So in this case, creating the slice is worth doing because 2.6 is more than 1, i.e. because the "drawing overdraw" for the area in the affected slices is larger than one. ## The cost of transparent gaps Now, what happens if we have gaps in the transparent slice? This reduces the "drawing overdraw" in the slice to something that's less than one! Let's say only 10% of the transparent slice's bounding box are covered with content, and 90% are empty. The "drawing overdraw" in those 10% is still 1.3 in our example. But the overall "drawing overdraw" in the slice is now 0.13. If we plug this number into the calculation above, we get: (0.13 - 1) * 20% = -0.87 * 20% = -17.4% In other words, having the separate slice **increases** the cost of a scroll, by a pixel count of 17.4% of the size of the content area. As soon as the compositor needs to composite transparency, the chances that performance benefits from a separate slice go down rapidly. We should make layerization decisions in such a way that the compositor never has to touch pixels that regular drawing wouldn't touch.
## Example of layerization trade-offs with fixed element + scrolling In this example I'd like to compute the "cost" of a scroll on a page with scrolled content and a fixed element. We estimate the cost of a frame as rasterization cost + compositing cost. We express these costs as "number of pixels drawn to", as percentages of the content area. Let's say the scrolled content has an overdraw factor of 1.3 and the fixed element is transparent and covers 20% of the content area and also has an internal overdraw of 1.3. ### Case 1: One slice, scrolled If we draw the fixed content into the opaque scrolled slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer = 130% + 26% + 100% = 256% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content that doesn't overlap the fixed element + 1.3 * 20% + 1.3 * 20% rasterization of the content that overlaps with the fixed element + 100% for OS compositing of the opaque layer = 2 * 1.3 * 20% + 100% = 52% + 100% = 152% ``` ### Case 2: Two slices, one scrolled and one fixed If we put the fixed content into a transparent fixed slice, we get the following costs: Initial paint: ``` rasterization cost + compositing cost = 1.3 * 100% + 1.3 * 20% for rasterization + 100% for OS compositing of the opaque layer + 20% for OS compositing of the transparent layer = 130% + 26% + 100% + 20% = 276% ``` Scroll that doesn't need new tiles: ``` rasterization cost + compositing cost = 0% rasterization for the scrolled content + 0% rasterization for the fixed content + 120% compositing = 120% ``` ### Evaluation | | One slice | Two slices | | ------------- | ------------- | ----- | | Initial frame | 256% | 276% | | Frame with scroll | 152% | 120% | So we pay 20% on the initial paint and save 32% per scroll. That would be worth doing! Where do these 32% savings come from? They come from the fact that the additional compositor overdraw is less than the drawing overdraw. The "drawing overdraw" for the affected area is 2.6, and the additional "compositor overdraw" for the affected area is 1. (2.6 - 1) = 1.6, 1.6 * 20% = 32%. So in this case, creating the slice is worth doing because 2.6 is more than 1, i.e. because the "drawing overdraw" for the area in the affected slices is larger than one. ## The cost of transparent gaps Now, what happens if we have gaps in the transparent slice? This reduces the "drawing overdraw" in the slice to something that's less than one! Let's say only 10% of the transparent slice's bounding box are covered with content, and 90% are empty. The "drawing overdraw" in those 10% is still 1.3 in our example. But the overall "drawing overdraw" in the slice is now 0.13. If we plug this number into the calculation above, we get: (0.13 - 1) * 20% = -0.87 * 20% = -17.4% In other words, having the separate slice **increases** the cost of a scroll, by a pixel count of 17.4% of the size of the content area. As soon as the compositor needs to composite transparency, the chances that performance benefits from a separate slice go down rapidly. We should make layerization decisions in such a way that the compositor never has to touch pixels that regular drawing wouldn't touch.