Question

我有一个样式表（css），它会降低浏览器的速度（渲染）。我尝试使用css压缩器，但结果是相同的，原始文件重1120字节，压缩后为810字节，但是压缩文件仍然会降低浏览器的速度。

我该如何解决？这是我的CSS代码：

 .logo {
position: fixed;
top: 20px;
left: 36%;
z-index: 4000;
}

@font-face {
    font-family: DaZPlayer;
    src: url(DaZPlayer.ttf);
}

.logo b{
font-family: 'DaZPlayer';
font-size: 4.3rem;
color: #fff;
text-shadow: 0 -40px 300px, 0 0 2px, 0 0 1em #f4f4f4, 0 0 0.5em #f4f4f4, 0 0 0.1em #f4f4f4, 0 10px 3px #000;
}

@media all and (max-width: 1067px){
  .logo b{
    font-size: 3.5rem;
  }
}

@media all and (max-width: 920px){
  .logo b{
    font-size: 3rem;
  }
}

@media all and (max-width: 664px){
  .logo b{
    font-size: 1.9rem;
  }
}

@media all and (max-width: 400px){
  .logo b{
    font-size: 1.5rem;
  }
}


.logo b span{
animation: blink linear infinite 2s;
}
@keyframes blink {
78% {
  color: inherit;
  text-shadow: inherit;
}
79%{
   color: #333;
}
80% {
  text-shadow: none;
}
81% {
  color: inherit;
  text-shadow: inherit;
}
82% {
  color: #333;
  text-shadow: none;
}
83% {
  color: inherit;
  text-shadow: inherit;
}
92% {
  color: #333;
  text-shadow: none;
}
92.5% {
  color: inherit;
  text-shadow: inherit;
}
}

如果有人可以帮助我，我会很感激，关于DiX。

Answer 1

您是否尝试缩小尺寸？这是您的代码。

.logo{position:fixed;top:20px;left:36%;z-index:4000}@font-face{font-family:DaZPlayer;src:url(DaZPlayer.ttf)}.logo b{font-family:DaZPlayer;font-size:4.3rem;color:#fff;text-shadow:0 -40px 300px,0 0 2px,0 0 1em #f4f4f4,0 0 .5em #f4f4f4,0 0 .1em #f4f4f4,0 10px 3px #000}@media all and (max-width:1067px){.logo b{font-size:3.5rem}}@media all and (max-width:920px){.logo b{font-size:3rem}}@media all and (max-width:664px){.logo b{font-size:1.9rem}}@media all and (max-width:400px){.logo b{font-size:1.5rem}}.logo b span{animation:blink linear infinite 2s}@keyframes blink{78%,81%,83%,92.5%{color:inherit;text-shadow:inherit}79%{color:#333}80%{text-shadow:none}82%,92%{color:#333;text-shadow:none}}

Answer 2

您是否尝试过使用预处理器？您可以使用CSS minifier。还有一个指针，使用Google Page Insights，它会准确告诉您您需要做什么。

CSS样式会使浏览器变慢

2 个答案: