1. OffsetTop, offsetLeft optimization
<body>
<div class="box" style="position: relative; top: 200px"></div>
</body>
<script>
const box = document.querySelector(".box");
console.time();
console.log(box.offsetTop); // default: 0.3291015625 ms
console.timeEnd();
console.log("=================");
console.time();
console.log(box.computedStyleMap().get("top").value); // default: 0.051025390625 ms
console.timeEnd();
console.log("=================");
console.time();
console.log(box.getBoundingClientRect().y); // default: 0.049072265625 ms
console.timeEnd();
console.log("=================");
console.time();
console.log(box.style.top); // default: 0.029052734375 ms
console.timeEnd();
</script>Conclusion: If we want to get the distance from the top of the parent element, we should try to use the latter three
2. document.querySelector
<body>
<div class="box"></div>
</body>
<script>
console.time();
document.querySelector(".box"); // default: 0.078857421875 ms
console.timeEnd();
console.log("=================");
console.time();
document.getElementsByClassName("box"); // 0.01806640625 ms
console.timeEnd();
</script>Conclusion: If a synchronous code block requires many element queries, please switch to the second one as much as possible
3. Comparison between svg and png
const img = document.createElement("img");
img.src = "./png.png";
console.time();
img.onload = function () {
console.timeEnd(); // default: 5.255126953125 ms
console.log("=================");
const img2 = document.createElement("img");
img2.src = "./svg.svg";
console.time();
img2.onload = function () {
console.timeEnd(); // default: 9.476806640625 ms
};
};Conclusion: For png and svg of the same size, svg is slower to load than png images