Confirm
336
edits
Changes
→2. Reflows/Restyles
Reflowing the page is the process of deciding where all the DOM elements will be positioned the page. Any changes to the page that has the potential of effecting the flow of the page will have to reflow the page again. The larger the DOM the longer this can potentially take.
Reflowing is expected as the page/app is being loaded. Once the page is ready, app author authors should carefully consider what interactions should make changes that can affects the flow of the document. If changes to the page are required they should happen in the '''same frame/refresh tick''' as all changes will be validated at the same time. Reflows should not happen on scrolling unless using a virtual list approach.
'''Sync reflow''' is when the position information (like scrollLeft/scrollTop/clientWidth/clientHeight) of a DOM node is queried when there are pending changes made to the flow of the document. This will prevent reflow from being delayed to the next refresh tick, block all current execution and reflow the document.
Sometimes reflows can be avoided by using features like CSS transforms that don't affect the flow of the page.
'''Verification Steps''':
