Отставание от CSS

Question

У меня есть шаблон, но когда я прокручиваю страницу вниз, она кажется очень запаздывающей У меня есть 8-ядерный компьютер с 8 ГБ оперативной памяти, поэтому я знаю, что мой компьютер. Другие пользователи говорили мне, что мой сайт работает медленно. Я меняю свой макет, и все работает нормально, поэтому я знаю, что это не сервер. Я изменяю свой 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

Используйте этот инструмент для стресс-тестирования вашего CSS, у автора были проблемы с радиусом границы для больших элементов: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Answer 2

Ваш фон кажется большим png, и вы используете абсолютное позиционирование, чтобы поместить содержимое страницы поверх неподвижного фона. Я видел эту причину проблемы с прокруткой задержки. Изменения:

position:absolute;

Кому:

position:relative;

В div.container и, как уже упоминалось, уменьшите ваши изображения. По крайней мере, начните с создания фонового изображения тега HTML в формате JPEG.

Answer 3

Я так не думаю. проверьте, насколько «тяжелыми» являются ваши изображения; Используйте png, если вам нужна прозрачность, если нет, конвертируйте ее в jpg, который будет светлее.

Одна вещь, которую вы можете проверить с помощью Chrome, это неиспользуемые стили:

нажмите F12 на вкладке Аудит, а затем нажмите кнопку «Выполнить». И в сообщении вы можете видеть вещи, которые вы не используете.

Вы можете свернуть CSS (например, с помощью this )

И последнее, что вы можете добавить сжатие GZIP

Удачи

Answer 4

border-radius показал интенсивную обработку, особенно в одном браузере, я думаю, это был Firefox.С позиции: исправлено, я могу видеть их как две ваши проблемные области, особенно с количеством свойств радиуса, которые у вас есть.Достаточно ли этого, чтобы вызвать у вас проблемы, которые вы заметите, я не знаю.