All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id="main"> | |
| <ul> | |
| <li><b>Anteater</b></li> | |
| <li><a href="b.html">Baobao</a></li> | |
| <li><a href="c.html">Cuttlefish</a></li> | |
| </ul> | |
| Anteaters, also known as antbear, are the four mammal species of the suborder Vermilingua (meaning "worm tongue") commonly known for eating ants and termites. Together with the sloths, they compose the order Pilosa. The name "anteater" is also colloquially applied to the unrelated aardvark, numbat, echidna, and pangolin. |
| <div class="loadcenter"> | |
| <div class="loadcenter_wrap"> | |
| <svg class="l1" width="320px" height="320px"> | |
| <path d="M160,0.5C212.9,53.4,319.5,160,319.5,160 L160,319.5L0.5,160L160,0.5z"></path> | |
| </svg> | |
| <svg class="l2" width="320px" height="320px"> | |
| <path d="M160,40.5C184,64.5,279.5,160,279.5,160 L160,279.5L40.5,160L160,40.5z"></path> | |
| </svg> | |
| <svg class="l3" width="320px" height="320px"> | |
| <path d="M160,80.5c21.7,21.7,79.5,79.5,79.5,79.5 L160,239.5L80.5,160L160,80.5z"></path> |