Страница lag from css

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

источник

2012-01-16 user1152332

Здравствуйте, вы должны исправить свои ошибки с помощью валидатора (игнорировать неизвестные свойства): http://jigsaw.w3.org/css-validator/validator. Каковы размеры ваших изображений? – vaugham

HTML5? Ты уверен? –

im получение 81 ошибок http://jigsaw.w3.org/css-validator/validator?uri=pokemontoxic.net&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en – user1152332

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

источник

2012-01-16 17:18:05 Rob

как бы я это исправить ?? – user1152332

Вы также используете текстовую тень –

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

источник

2012-01-16 17:23:39

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

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

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

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

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

Good Luck

источник

2012-01-16 17:24:20 MCSI

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

position:absolute;

To:

position:relative;

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

источник

2012-01-16 17:36:44

Страница lag from css

ответ

Смежные вопросы