1. OffsetTop、offsetLeft の最適化
<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>結論: 親要素の上部からの距離を取得したい場合は、後の 3 つの要素を使用する必要があります。
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>結論: 同期コード ブロックで多くの要素クエリが必要な場合は、できるだけ 2 番目のクエリに切り替えてください。
3. svgと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
};
};結論: 同じサイズの png と svg の場合、svg は png 画像よりも読み込みが遅くなります。