前端项目优化持续记录_同等大小的svg

作者：Cpp五条 | 2024-05-17 00:34:43

踩

同等大小的svg

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>

结论：如果我们想获取距离父元素顶端的距离的时候，应该尽量采用后三种

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>

结论：如果在一个同步代码块需要很多元素查询时，请尽可能换成第二种

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 图片加载的慢一些

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/581120