Question

我网站的某些页面在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秒，这意味着我的代码效率不高。我知道我的代码效率不高，因为我在学习函数和OOP之前完成了大部分的工作，因此它是程序性的并且非常冗余。我将不得不开始更新它。

至于IE问题，我仍然不太确定。我会尝试你的一些建议，然后每当IE请求一个页面时，可能会制作一个安装FF或chrome代替IE的病毒：P

编辑2：

如果有人想知道这是怎么回事 - 我已经设法通过仅加载最初可见的并且使用ajax（通过jQuery）加载与每个按钮上的每个按钮相关联的数据来显着减少加载时间被压了。它现在快得多，我还没有省略几个不需要的CSS文件。在IE8加载后它仍然缓慢，但我会再次解决这个问题并考虑你的建议。谢谢你的帮助！

Answer 1

使用Fiddler2查看你的页面加载你有很多JS和CSS，它真的有必要吗？资源是否缩小并压缩？即使响应为200并且可以使用缓存资源，您创建的每个HTTPRequest也需要时间。查看按需加载资源或将它们捆绑到单个文件中。

一般来说，jQuery的优化程度相当高，除非你特定一个元素和id或者选择器，否则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)

Answer 2

ie8在元素选择器方面肯定比大多数其他现代浏览器慢。你可以做很多事情来优化 - 如果可以，你应该通过id选择一个。我在过去已经注意到，在大页面上也很慢。

Answer 3

我注意到你有几个像素宽的图像（和一个两像素宽）用作重复背景图像来创建渐变。我最近遇到了大型网站的性能问题，这些问题通过增加背景图片的大小来解决。

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

使图像更宽当然会增加图像尺寸，但不会达到您预期的程度。 PNG和GIF都非常擅长处理重复数据（尤其是水平重复数据），从而最大限度地减少了文件大小的影响。

就个人而言，我从不会在重复的方向上制作小于50像素的重复图像。进行此更改可以极大地改善我网站的动画效果。

IE8中的网站速度很慢。 jQuery要怪？

3 个答案: