從css頁面延遲

Question

我有一個模板，但當我向下滾動頁面時，它似乎是真的滯後 我有一個8核心的計算機與8GB的內存，所以我知道它介入我的電腦。我有其他用戶告訴我，我的網站運行緩慢。我改變了我的佈局和所有工作正常，所以我知道它不是服務器。我改變我的HTML佈局，把我所有的PHP腳本到一個新的HTML/CSS佈局和工作正常，沒有滯後，但我喜歡這個佈局...

這裏是我的CSS我認爲這是問題

html 
{ 
    background: url(../images/background.png); 
    background-color: transparent; 
    overflow-y: auto; 
} 

body { 
    width: 1000px; 
    margin: auto; 
    padding: 0; 
    text-align: center; 
    color: #000000; 
    font-family: verdana; 
    font-size: 0.7em; 
} 

div.container 
{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    margin:auto; 
} 
div.holder 
{ 
    width:990px; 
    background-color:#d7f7f7; 
    height:100%; 
    margin:auto; 
    margin-top:0px; 
    background-image:url('../images/swampertbackground.png'); 
    background-repeat:no-repeat; 
    background-position:bottom center; 
} 
#container{ 
    height: 100%; 
    width: 1000px; 
    background-color: #d7f7f7; 
    position: fixed; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
    border-top-left-radius:10px; 
    border-top-right-radius:10px; 
    border-left: solid #25a5a6 2px; 
    border-right: solid #25a5a6 2px; 
    overflow-y: auto; 
    overflow-x: auto; 
} 
div.banner 
{ 
    height:125px; 
    width:700px; 
    display:block; 
    position:absolute; 
    margin-top:2px; 
    margin-left:140px; 
    background-color:#FFF; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border: solid #25a5a6 1px; 
    background-image:url('../images/banner.png'); 
    box-shadow: 3px 3px 3px #4b8384; 
} 

ul , li 
{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 

} 
div.left_navigation 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:150px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    width: 152px; 
} 

div.left_navigation2 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:300px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

div.left_navigation3 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:400px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.left_navigation4 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:500px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.left_navigation5 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:600px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

div.left_navigation6 
{ 
    position:absolute; 
    margin-left:5px; 
    margin-top:700px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

li.header 
{ 
    width:150px; 
    height:14px; 
    background-color:#54c0c1; 
    border:1px #188c8d solid; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-left:2px #188c8d solid; 
    color:#FFFFFF; 
    font-weight:900; 

} 
li.links 
{ 
    width:150px; 
    height:16px; 
    background-color:#c1f9fa; 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    color:#074647; 

} 

li.links:hover 
{ 
    background-color:#FFFF00; 
    color:#296584; 
    font-weight:bold; 
    text-shadow: 1px 2px 2px #0096ff; 

} 
li.footer 
{ 
    width:150px; 
    height:9px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
} 
div.centerboxholder 
{ 
    position:absolute; 
    top:150px; 
    margin-left:165px; 
    width:661px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
div.centerbox 
{ 
    position:absolute; 
    width:661px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 
li.chead 
{ 
    width:660px; 
    height:14px; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    border:1px #188c8d solid; 
    color:#FFFFFF; 
    font-weight:900; 
    box-shadow: 0px 0px 3px #4b8384; 
} 

li.ccontent 
{ 
    width:659px; 
    background-color:#c1f9fa; 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    color:#000; 
    font-size:0.9em; 
    border-right:1px #188c8d solid; 
    box-shadow: 3px 3px 3px #4b8384; 
} 
li.cfoot 
{ 
    width:659px; 
    height:9px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
    background-image:url('../images/header.png'); 
    border-bottom:1px #188c8d solid; 
    border-left:2px #188c8d solid; 
    border-right:1px #188c8d solid; 
    box-shadow: 3px 3px 3px #4b8384; 
} 

div.right_navigation 
{ 
    position:absolute; 
    margin-left:834px; 
    top:150px; 
    box-shadow: 3px 3px 3px #4b8384; 
    border-top-left-radius:7px; 
    border-top-right-radius:7px; 
    border-bottom-left-radius:7px; 
    border-bottom-right-radius:7px; 
} 

table 
{ 
    padding:0px; 
    margin:0px; 
    border: 0px; 
    font-size:0.9em; 
    font-weight:bold; 
    color:#000; 
} 

td 
{ 
    border:1px #188c8d solid; 
    width:200px; 
    text-align:center; 
} 

#textfield 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
} 
#gender 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
    width:110px; 
    padding:0px; 
} 
#gendertop 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 

} 
#genderbottom 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size:1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
} 

#button 
{ 
    background-color:Transperent; 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    width:100px; 
    padding-top:0px; 
    margin:0px; 
    height:16px; 
    padding-bottom:5px; 
} 
#Avatar 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border:1px #188c8d solid; 
    border-radius:5px; 
    width:110px; 
} 
#changer 
{ 
    color: #000000; 
    font-family: verdana; 
    font-size: 1em; 
    font-weight: bold; 
    background-color:#e2fffc; 
    border-bottom:1px #188c8d solid; 


} 

li.topper 
{ 
    height:12px; 
    border:1px #188c8d solid; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
    background-image:url('../images/header.png'); 
} 
li.bottomer 
{ 

    border:1px #188c8d solid; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
    background-image:url('../images/header.png'); 
    height:12px; 
} 

#button:hover 
{ 
    cursor:pointer; 
} 
a:link { color:#296584; text-decoration:none;display:block;} 
a:visited { color:#296584; text-decoration:none;} 
a:hover { color:#296584; text-decoration:none;text-shadow: 1px 2px 2px #0096ff;} 
a:active {color:#296584; text-decoration:none; background-color:} 

該CSS中有什麼會讓它滯後嗎？

這裏說的 http://jigsaw.w3.org/css-validator/validator?uri=pokemontoxic.net&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

我有81個錯誤是這些大的錯誤？

Answer 1

border-radius已被證明是過程密集型的，特別是在一個瀏覽器中，我認爲它是Firefox。在位置固定的情況下，我可以將這些看作是您唯一的兩個問題區域，特別是您擁有的半徑屬性數量。不知道這是否足以引起你的問題，你會注意到，我不知道。

Answer 2

使用該工具進行壓力測試你的CSS，筆者曾與大元素的邊界半徑的問題：http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Answer 3

我不這麼認爲。 檢查你的圖像有多「沉重」;使用PNG，如果你想要透明度，如果沒有，將其轉換爲更輕的JPG。

一件事，你可以使用Chrome檢查是未使用的樣式：

按F12，在審覈選項卡，然後點擊運行按鈕。並告知你可以看到你不使用的東西。

您可以最小化的CSS（例如使用this）

而最後你可以添加gzip壓縮

好運

Answer 4

你的背景似乎是一個大PNG，和你使用絕對定位將頁面內容放置在靜止背景上。我之前看到過這個問題，並且出現了滾動滯後。變化：

position:absolute; 

要：

position:relative; 

在div.container和規模前面提到了你的圖片。至少從HTML標籤背景圖像開始，一個JPEG文件。