使用transform时代码变慢：rotate（）;

Question

今天我在codepen上创建了一个css项目，我希望在其中创建一个可悬停区域，在悬停时更改其属性。因为我使用许多“p”标签并进行一些控制。但是当我在p标签上使用 transform：rotate（）; 属性时，悬停 越来越慢了。 当我没有在标签上使用变换时，它可以顺利运行。那么在使用transform属性时有什么方法可以提高速度。 也有任何方法，所以不需要复制粘贴许多

标签。

注意： 转换属性有效但速度很慢。我检查了很多浏览器，但它在所有

上都很慢

这是代码链接

$(document).ready(function() {
  $("p").addClass('def_bg def_hov_bg def_time def_anim');

  $("#bg_col_1").click(function() {
    $(".def_bg").toggleClass("bg_1");
    $(".def_bg").removeClass("bg_2 bg_3 bg_9 bg_4 bg_5 bg_6 bg_7 bg_8");
  });
  $("#bg_col_2").click(function() {
    $(".def_bg").toggleClass("bg_2");
    $(".def_bg").removeClass("bg_1 bg_3 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8");
  });
  $("#bg_col_3").click(function() {
    $(".def_bg").toggleClass("bg_3");
    $(".def_bg").removeClass("bg_1 bg_2 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8");
  });
  $("#bg_col_4").click(function() {
    $(".def_bg").toggleClass("bg_4");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_9 bg_5 bg_6 bg_7 bg_8");
  });
  $("#bg_col_5").click(function() {
    $(".def_bg").toggleClass("bg_5");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_4 bg_9 bg_6 bg_7 bg_8");
  });
  $("#bg_col_6").click(function() {
    $(".def_bg").toggleClass("bg_6");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_9 bg_7 bg_8");
  });
  $("#bg_col_7").click(function() {
    $(".def_bg").toggleClass("bg_7");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_9 bg_8");
  });
  $("#bg_col_8").click(function() {
    $(".def_bg").toggleClass("bg_8");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_9");
  });
  $("#bg_col_9").click(function() {
    $(".def_bg").toggleClass("bg_9");
    $(".def_bg").removeClass("bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_8");
  });



  $("#hov_col_1").click(function() {
    $(".def_hov_bg").toggleClass("hov_1");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9");
  });
  $("#hov_col_2").click(function() {
    $(".def_hov_bg").toggleClass("hov_2");
    $(".def_hov_bg").removeClass("hov_1 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9");
  });
  $("#hov_col_3").click(function() {
    $(".def_hov_bg").toggleClass("hov_3");
    $(".def_hov_bg").removeClass("hov_2 hov_1 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9");
  });
  $("#hov_col_4").click(function() {
    $(".def_hov_bg").toggleClass("hov_4");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_1 hov_5 hov_6 hov_7 hov_8 hov_9");
  });
  $("#hov_col_5").click(function() {
    $(".def_hov_bg").toggleClass("hov_5");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_1 hov_6 hov_7 hov_8 hov_9");
  });
  $("#hov_col_6").click(function() {
    $(".def_hov_bg").toggleClass("hov_6");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_5 hov_1 hov_7 hov_8 hov_9");
  });
  $("#hov_col_7").click(function() {
    $(".def_hov_bg").toggleClass("hov_7");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_1 hov_8 hov_9");
  });
  $("#hov_col_8").click(function() {
    $(".def_hov_bg").toggleClass("hov_8");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_1 hov_9");
  });
  $("#hov_col_9").click(function() {
    $(".def_hov_bg").toggleClass("hov_9");
    $(".def_hov_bg").removeClass("hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_1");
  });



  $("#t-1").click(function() {
    $(".def_time").toggleClass("td-1");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-2").click(function() {
    $(".def_time").toggleClass("td-2");
    $(".def_time").removeClass("td-1 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-3").click(function() {
    $(".def_time").toggleClass("td-3");
    $(".def_time").removeClass("td-2 td-1 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-4").click(function() {
    $(".def_time").toggleClass("td-4");
    $(".def_time").removeClass("td-2 td-3 td-1 td-5 td-6 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-5").click(function() {
    $(".def_time").toggleClass("td-5");
    $(".def_time").removeClass("td-2 td-3 td-4 td-1 td-6 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-6").click(function() {
    $(".def_time").toggleClass("td-6");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-1 td-7 td-8 td-9 td-10 td-11");
  });
  $("#t-7").click(function() {
    $(".def_time").toggleClass("td-7");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-1 td-8 td-9 td-10 td-11");
  });
  $("#t-8").click(function() {
    $(".def_time").toggleClass("td-8");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-7 td-1 td-9 td-10 td-11");
  });
  $("#t-9").click(function() {
    $(".def_time").toggleClass("td-9");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-1 td-10 td-11");
  });
  $("#t-10").click(function() {
    $(".def_time").toggleClass("td-10");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-1 td-11");
  });
  $("#t-11").click(function() {
    $(".def_time").toggleClass("td-11");
    $(".def_time").removeClass("td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-1");
  });




  $("#e-1").click(function() {
    $(".def_anim").toggleClass("ef-1");
    $(".def_anim").removeClass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8");
  });
  $("#e-2").click(function() {
    $(".def_anim").toggleClass("ef-2");
    $(".def_anim").removeClass("ef-1 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8");
  });
  $("#e-3").click(function() {
    $(".def_anim").toggleClass("ef-3");
    $(".def_anim").removeClass("ef-2 ef-1 ef-4 ef-5 ef-6 ef-7 ef-8");
  });
  $("#e-4").click(function() {
    $(".def_anim").toggleClass("ef-4");
    $(".def_anim").removeClass("ef-2 ef-3 ef-1 ef-5 ef-6 ef-7 ef-8");
  });
  $("#e-5").click(function() {
    $(".def_anim").toggleClass("ef-5");
    $(".def_anim").removeClass("ef-2 ef-3 ef-4 ef-1 ef-6 ef-7 ef-8");
  });
  $("#e-6").click(function() {
    $(".def_anim").toggleClass("ef-6");
    $(".def_anim").removeClass("ef-2 ef-3 ef-4 ef-5 ef-1 ef-7 ef-8");
  });
  $("#e-7").click(function() {
    $(".def_anim").toggleClass("ef-7");
    $(".def_anim").removeClass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-1 ef-8");
  });
  $("#e-8").click(function() {
    $(".def_anim").toggleClass("ef-8");
    $(".def_anim").removeClass("ef-2 ef-3 ef-4 ef-5 ef-6 ef-7 ef-1");
  });




});

p {
  margin: -5px;
  display: inline-block;
  padding: 9px;
}

.def_bg {
  background: #000;
}


/*default background-color*/

.def_hov_bg:hover {
  background: #fff;
}


/*default hover color     */

.def_time {
  transition: all .5s;
}


/*default transition time */

.def_time:hover {
  transition: all 0s;
}

.def_anim {
  transform: none;
}


/*for background change*/

.bg_1 {
  background: #4559EF;
}

.bg_2 {
  background: #EF2626;
}

.bg_3 {
  background: #14A91B;
}

.bg_4 {
  background: #835C3B;
}

.bg_5 {
  background: #DF3D82;
}

.bg_6 {
  background: #FFF056;
}

.bg_7 {
  background: #558C89;
}

.bg_8 {
  background: #7D1935;
}

.bg_9 {
  background: #ffffff;
}


/*for hover change*/

.hov_1:hover {
  background: #4559EF;
}

.hov_2:hover {
  background: #EF2626;
}

.hov_3:hover {
  background: #14A91B;
}

.hov_4:hover {
  background: #835C3B;
}

.hov_5:hover {
  background: #DF3D82;
}

.hov_6:hover {
  background: #FFF056;
}

.hov_7:hover {
  background: #558C89;
}

.hov_8:hover {
  background: #7D1935;
}

.hov_9:hover {
  background: #ffffff;
}


/*for transition duration*/

.td-1 {
  transition: all .5s;
}

.td-2 {
  transition: all 1s;
}

.td-3 {
  transition: all 2s;
}

.td-4 {
  transition: all 3s;
}

.td-5 {
  transition: all 5s;
}

.td-6 {
  transition: all 8s;
}

.td-7 {
  transition: all 10s;
}

.td-8 {
  transition: all 20s;
}

.td-9 {
  transition: all 30s;
}

.td-10 {
  transition: all 60s;
}

.td-11 {
  transition: all 100s;
}

.td-1:hover {
  transition: all 0s;
}

.td-2:hover {
  transition: all 0s;
}

.td-3:hover {
  transition: all 0s;
}

.td-4:hover {
  transition: all 0s;
}

.td-5:hover {
  transition: all 0s;
}

.td-6:hover {
  transition: all 0s;
}

.td-7:hover {
  transition: all 0s;
}

.td-8:hover {
  transition: all 0s;
}

.td-9:hover {
  transition: all 0s;
}

.td-10:hover {
  transition: all 0s;
}

.td-11:hover {
  transition: all 0s;
}

.ef-1 {
  transform: rotateX(180deg);
}

.ef-2 {
  transform: rotateY(180deg);
}

.ef-3 {
  transform: rotateZ(180deg);
}

.ef-4 {
  transform: rotateX(540deg);
}

.ef-5 {
  transform: rotateY(540deg);
}

.ef-6 {
  transform: rotateZ(540deg);
}

.ef-7 {
  transform: rotateY(180deg) rotateZ(180deg) rotateX(180deg);
}

.ef-6 {
  transform: rotateZ(540deg) rotateY(540deg) rotateX(540deg);
}

.ef-8 {
  transform: rotateZ(3600deg) rotateY(3600deg) rotateX(3600deg);
}

.ef-1:hover {
  transform: rotateX(0deg);
}

.ef-2:hover {
  transform: rotateX(0deg);
}

.ef-3:hover {
  transform: rotateX(0deg);
}

.ef-4:hover {
  transform: rotateX(0deg);
}

.ef-5:hover {
  transform: rotateX(0deg);
}

.ef-6:hover {
  transform: rotateX(0deg);
}

.ef-7:hover {
  transform: rotateX(0deg);
}

.ef-6:hover {
  transform: rotateX(0deg);
}

.ef-8:hover {
  transform: rotateX(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="bg_col_1"> Blue</button>
<button id="bg_col_2"> Red</button>
<button id="bg_col_3"> Green</button>
<button id="bg_col_4"> Brown</button>
<button id="bg_col_5"> Pink</button>
<button id="bg_col_6"> Yellow</button>
<button id="bg_col_7"> Ocean</button>
<button id="bg_col_8"> Magenta</button>
<button id="bg_col_9"> White</button>
<br>

<button id="hov_col_1"> Blue</button>
<button id="hov_col_2"> Red</button>
<button id="hov_col_3"> Green</button>
<button id="hov_col_4"> Brown</button>
<button id="hov_col_5"> Pink</button>
<button id="hov_col_6"> Yellow</button>
<button id="hov_col_7"> Ocean</button>
<button id="hov_col_8"> Magenta</button>
<button id="hov_col_9"> White</button>
<br>

<button id="t-1">.5s</button>
<button id="t-2">1s</button>
<button id="t-3">2s</button>
<button id="t-4">3s</button>
<button id="t-5">5s</button>
<button id="t-6">8s</button>
<button id="t-7">10s</button>
<button id="t-8">20s</button>
<button id="t-9">30s</button>
<button id="t-10">60s</button>
<button id="t-11">100s</button>
<br>

<button id="e-0">None</button>
<button id="e-1">Effect-1</button>
<button id="e-2">Effect-2</button>
<button id="e-3">Effect-3</button>
<button id="e-4">Effect-4</button>
<button id="e-5">Effect-5</button>
<button id="e-6">Effect-6</button>
<button id="e-7">Effect-7</button>
<button id="e-8">Effect-8</button>

<br>

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

code link

任何帮助都是适当的，Thanx

Answer 1

就缓慢问题而言，我会用Codepen解决这个问题。我在您提供的代码段中检查了您的代码，效果很好。但是，当我在Codepen上检查它时，它就像你说的那样超级慢。因此，我认为这是Codepen最终的处理问题。

就复制粘贴问题而言，您可以尝试使用Pug或类似的东西来重写HTML。以下是您在Pug中的p标签的长列表：

- for (var x = 0; x < 5; x++)
     p

这编译为：

<!-- Five just like in the loop -->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

以下是Pug文档的链接：https://pugjs.org/language/code.html