【问题标题】:Site is slow in IE8. jQuery to blame?IE8 网站速度慢。 jQuery 责备?
【发布时间】:2011-02-13 12:43:10
【问题描述】:

我网站的某些页面在 IE8 中非常缓慢。包含大量内容的页面在所有浏览器中加载速度较慢,但​​在 IE8 中较慢。我认为它们一开始加载速度很慢,因为有很多程序 PHP 和数据库查询。

但我主要担心的是这些页面在 ie8 中加载后的速度非常缓慢。有一些 jQuery 向下滑动效果,我想知道 ie8 是否只是在渲染它们时很糟糕。

这是一个内容很少的页面:http://searchfornutrition.com/?pageid=topic&topicid=acai

按钮的向下滑动工作正常,jQuery 快速/正常。

现在这是一个包含大量内容的页面:http://searchfornutrition.com/?pageid=topic&topicid=vitamin_d

按钮的向下滑动很慢。

我用IE8检查了另一台计算机,它是一样的。我为这个网站做了所有独特的编程,我不是专家。做这个网站是我了解我所知道的关于 Web 开发的一切的方式,所以如果不是 IE8,那么它可能是我。

感谢您提供的任何帮助。


编辑:

我刚刚试用了 Chrome 开发工具上的网络选项卡,它对我的​​页面加载如此缓慢的原因非常有帮助。一些不必要的 .css 链接需要几秒钟才能加载,但主要是文档本身。有时它可能需要长达 30 秒,这意味着我的代码效率不高。我知道我的代码效率不高,因为我在学习函数和 OOP 之前完成了大部分网站,所以它是程序性的并且非常多余。我将不得不开始更新它。

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


编辑2:

如果有人想知道结果如何 - 我已经设法通过仅加载最初可见的内容并让 ajax(通过 jQuery)加载与每个按钮相关的数据来显着减少加载时间被按下。现在速度快多了,而且我还没有省略几个不需要的 CSS 文件。在 IE8 中加载后它仍然很慢,但我会再次解决这个问题并考虑你的建议。感谢您的所有帮助!

【问题讨论】:

  • 有一个很棒的 Firefox 插件,叫做 YSlow!。它可以帮助识别瓶颈。虽然它不是专门的 IE,但它可能会给你一些很好的建议。
  • YSlow 主要解决页面加载缓慢,而不是脚本执行缓慢
  • 如果您使用 Chrome 查看开发者工具的网络选项卡 (CTRIL+SHIFT+I),您可以看到资源加载时间,配置文件选项卡也非常适合记录页面处理任务。如果你真的想看看 IE 在做什么,试试 Fiddler2。

标签: jquery internet-explorer-8 slidedown


【解决方案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)

【讨论】:

  • 看起来我至少可以省略一些 jquery ui 包。我会调查其他人。谢谢
【解决方案2】:

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

【讨论】:

    【解决方案3】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 2016-07-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-13
      • 1970-01-01
      • 2011-01-11
      • 1970-01-01
      相关资源
      最近更新 更多