Сайт работает медленно в IE8.JВопрос виноват? - PullRequest
0 голосов
/ 10 февраля 2011

Некоторые страницы моего сайта крайне медлительны в IE8.Страницы с большим количеством контента загружаются медленнее во всех браузерах, но медленнее в IE8.Я предполагаю, что они загружаются медленно, потому что есть много процедурных запросов PHP и баз данных.

Но меня больше всего беспокоит то, насколько громоздко медлительны эти страницы после загрузки в ie8.Есть некоторые jQuery-эффекты слайд-апа, и мне интересно, если ie8 просто отстой при их рендеринге.

Вот страница с очень небольшим содержанием: http://searchfornutrition.com/?pageid=topic&topicid=acai

слайд-ап из кнопок работает нормальнои jQuery быстрый / обычный.

Теперь вот страница с большим количеством контента: http://searchfornutrition.com/?pageid=topic&topicid=vitamin_d

Слайд из кнопок медленно работает.

У меня естьпроверил другой компьютер с IE8 и он такой же.Я сделал все уникальное программирование для этого сайта, и я не эксперт.Работая на этом сайте, я узнал все, что знаю о веб-разработке, так что если это не IE8, то, вероятно, я.

спасибо за любую помощь, которую вы можете оказать.


Редактировать:

Я только что опробовал вкладку "Сеть" в инструментах разработчика Chrome, и это было очень полезно с точки зрения того, почему мои страницы загружались так медленно, в первую очередь.Некоторые из ненужных ссылок .css загружаются за считанные секунды, но в основном это сам документ.Иногда это может занять до 30 секунд, что означает, что мой код неэффективен.Я знал, что мой код неэффективен, так как большую часть сайта я делал до того, как узнал о функциях и ООП, поэтому он процедурный и очень избыточный.Я должен начать обновлять его.

Что касается проблем с IE, я все еще не совсем уверен.Я попробую некоторые из ваших предложений, а затем, возможно, сделаю вирус, который устанавливает FF или chrome вместо IE всякий раз, когда IE запрашивает страницу: P


Edit 2:

Если кто-нибудьИнтересно, как это получилось - мне удалось значительно сократить время загрузки, загрузив только то, что изначально видно, и с помощью ajax (через jQuery) загрузить данные, связанные с каждым слайдом кнопки, в случае события, когда нажата каждая кнопка.Теперь это намного быстрее, и я до сих пор не опустил несколько ненужных CSS-файлов.Он все еще вялый после загрузки в IE8, но я займусь этим в другой раз и учту ваши предложения по этому вопросу.Спасибо за вашу помощь!

Ответы [ 3 ]

1 голос
/ 10 февраля 2011

Используйте Fiddler2, чтобы посмотреть, как загружается ваша страница. У вас есть много JS и CSS, действительно ли это все необходимо?Минимизированы ли ресурсы и сжаты ли они?Каждый HTTPRequest, который вы делаете, требует времени, даже если ответ равен 200 и кэшированный ресурс может быть использован.Посмотрите на загрузку ресурсов по требованию или на объединение их в отдельные файлы.

jQuery довольно хорошо оптимизирован, вообще говоря, IE6 работал медленно, если вы не указали элемент вместе с идентификатором или селектором.В FF4, Chrome и IE9 я чувствовал себя примерно одинаково медленно.

GET http://searchfornutrition.com/?pageid=topic&topicid=acai
200 OK (text/html)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_css/style-07445fcb-00006.css
200 OK (text/css)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_important.css?v=386
200 OK (text/css)

GET http://searchfornutrition.com/css/nav_unreg.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/js/jquery-1.3.2.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/js/jquery-ui-1.7.2.custom.min.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.core.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.draggable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.resizable.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/ui/ui.dialog.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/buttons_jquery.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/alpha_buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/search_options.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/custom-buttons.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/td-height.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/js/dialog_topics.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css
200 OK (text/css)

GET http://searchfornutrition.com/css/button.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/vert_scroll.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.all.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/css/topics.css
200 OK (text/css)

GET http://searchfornutrition.com/js/star_rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.base.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.theme.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.resizable.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.accordion.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.dialog.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.slider.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.progressbar.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.datepicker.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.tabs.css
200 OK (text/css)

GET http://searchfornutrition.com/jquery/development-bundle/themes/custom-theme/ui.core.css
200 OK (text/css)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.pack.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/ripter-jquery.rating-7133e01/jquery.rating.css
200 OK (text/css)

GET http://searchfornutrition.com/nutrition_webrary/js/error_report.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/nutrition_webrary/js/reposition_tables.js
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/yahoo-dom-event/yahoo-dom-event.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/yui/connection/connection-min.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_global.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/forums/clientscript/vbulletin_menu.js?v=386
200 OK (application/x-javascript)

GET http://searchfornutrition.com/clientscript/vbulletin_md5.js?v=386
404 Not Found (text/html)
0 голосов
/ 10 февраля 2011

Я заметил, что у вас есть несколько изображений шириной в один пиксель (и одно изображение шириной в два пикселя), используемых в качестве повторяющихся фоновых изображений для создания градиентов. Недавно я столкнулся с проблемами с производительностью большого сайта, которые были решены путем увеличения размера моих фоновых изображений.

Я лично не исследовал причины, но, насколько я понимаю, когда фоновое изображение повторяется, браузер должен отображать каждое повторение отдельно. Например, если элемент шириной в 1000 пикселей имеет фон шириной в один пиксель, то это изображение должно отображаться 1000 раз, тогда как одно и то же изображение, растянутое до ширины 50 пикселей, должно отображаться только 20 раз. IE, который в лучшие времена работает медленнее, чем другие браузеры, подвержен более серьезному воздействию.

Расширение ваших изображений увеличивает , конечно, размер вашего изображения, но не так сильно, как вы ожидаете. И PNG, и GIF очень хороши в обработке повторяющихся данных (особенно по горизонтали повторяющихся данных), сводя к минимуму влияние на размер файла.

Лично я никогда не делаю повторяющееся изображение размером менее 50 пикселей в том направлении, в котором оно повторяется. Внесение этого изменения значительно улучшило производительность анимации моего сайта.

0 голосов
/ 10 февраля 2011

ie8 определенно медленнее с точки зрения выбора элементов, чем большинство других современных браузеров. Есть много вещей, которые вы можете сделать, чтобы оптимизировать - для одного вы должны выбрать по id, если можете. В прошлом я заметил, что на больших страницах то есть, как правило, медленно.

...