by Patryk Ziemkowski / Apptension
"What are the intermediate steps that browser takes to render the webpage I've coded? "
– You
Parse HTML
Parse Stylesheet
span.first::after {
content: '';
}
Recalculate Style
<html> <body>
<div>
<p>
<span>
<span:after>
<span>
Layout
Paint
1. save
2. translate
3. drawRectangle
4. drawRectangle
5. drawRectangle
6. drawText
7. drawText
8. save
9. clipPath
10. drawRoundedRectangle
11. restore
12. drawPath
13. save
14. clipRoundedRectangle
15. drawBitmap
16. restore
17. translate
18. restore
Composite Layers
const paragraphs = document.querySelectorAll('p');
const greenBlock = document.querySelectorAll('.block');
for (let p = 0; p < paragraphs.length; p++) {
const blockWidth = greenBlock.offsetWidth;
paragraphs[p].style.width = blockWidth + 'px';
}
const paragraphs = document.querySelectorAll('p');
const greenBlock = document.querySelectorAll('block');
const blockWidth = greenBlock.offsetWidth;
for (let p = 0; p < paragraphs.length; p++) {
paragraphs[p].style.width = blockWidth + 'px';
}