0

Some of the pages of my site are extremely sluggish in IE8. The pages with lots of content load slowish in all browsers but slower in IE8. I assume they load slow to begin with because there is a lot of procedural PHP and database queries.

But my main concern is how lumberingly slow these pages are after they load in ie8. There are some jQuery slidedown effects and I'm wondering if ie8 just sucks at rendering them.

Here is a page with very little content: http://searchfornutrition.com/?pageid=topic&topicid=acai

The slidedown from the buttons work fine and the jQuery is fast/normal.

Now here is a page with lots of content: http://searchfornutrition.com/?pageid=topic&topicid=vitamin_d

The slidedown from the buttons is sluggish.

I've checked another computer with IE8 and it's the same. I did all the unique programming for this site and I'm no expert. Doing this site was how I learned everything I know about web development so if it's not IE8 then it's probably me.

thanks for any help you can give.


Edit:

I just tried out the network tab on Chrome dev tools and it was very helpful as far as why my pages load so slowly in the first place. Some of the unnecessary .css links take seconds to load but mostly it's the document itself. Sometimes it can take up to 30 seconds alone, which means my code isn't efficient. I knew my code wasn't efficient since I did most of the site before learning about functions and OOP, so it's procedural and very redundant. I will have to start updating it.

As for the IE issues, I'm still not exactly sure. I'll try some of your suggestions and then maybe make a virus that installs FF or chrome in place of IE whenever IE requests a page :P


Edit 2:

If anyone is wondering how this turned out - I've managed to decrease the loading time significantly by loading only what is initially visible and having ajax (via jQuery) load the data associated with each button slidedown on the event that each button is pressed. It's much faster now, and I still haven't omitted the several unneeded CSS files. It's still sluggish after load in IE8 but I'll tackle that another time and take your suggestions on that into consideration. Thanks for all your help!

4

3 回答 3

1

使用 Fiddler2 来查看您的页面加载情况 您有大量的 JS 和 CSS 真的有必要吗?资源是否被缩小和压缩?即使响应为 200 并且可以使用缓存的资源,您发出的每个 HTTPRequest 都需要时间。查看按需加载资源或将它们捆绑到单个文件中。

一般来说,jQuery 优化得相当好,IE6 很慢,除非您指定一个元素以及 id 或选择器。

在 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)
于 2011-02-10T01:13:40.807 回答
0

ie8 在元素选择器方面肯定比大多数其他现代浏览器慢。您可以做很多事情来优化 - 如果可以的话,您应该通过 id 进行选择。我过去注意到 ie 在大页面上也往往很慢。

于 2011-02-10T01:04:45.270 回答
0

我注意到您有几个 1 像素宽的图像(和一个 2 像素宽的图像)用作重复背景图像以创建渐变。我最近遇到了一个大型网站的性能问题,通过增加背景图像的大小得到了解决。

我没有亲自调查原因,但我的理解是当背景图像重复时,浏览器必须单独渲染每个重复。例如,如果一个 1,000 像素宽的元素有一个 1 像素宽的背景,则该图像必须渲染 1,000 次,而拉伸到 50 像素宽的同一图像只需要渲染 20 次。IE,在最好的情况下往往比其他浏览器慢,受到更严重的影响。

当然,让你的图像更宽确实会增加你的图像大小,但不会像你预期的那么大。PNG 和 GIF 都非常擅长处理重复数据(尤其是水平重复数据),最大限度地减少文件大小的影响。

就个人而言,我从不会在重复方向上制作小于 50 像素的重复图像。进行此更改极大地提高了我网站的动画性能。

于 2011-02-10T01:40:28.687 回答