如何解决 IE 中的渲染性能问题
我们的 Web 应用程序在某些 IE 浏览器中渲染速度很快，在其他浏览器中渲染速度很慢...这似乎是 HTML 渲染问题...页面的前 10% 立即显示，最后 90% 需要 10 秒，这是静态内容。 我用 firefox/yslow 运行，渲染速度非常快。 似乎与 ie 的某些用户/配置隔离。 Quirks 模式似乎没有什么区别。
有没有可以用来帮助我发现渲染瓶颈的工具或应用程序？ 我在代码中做了什么令人震惊的事情吗？ 会不会是javascript的问题？ 任何帮助或建议将不胜感激。 谢谢。
Our web application renders fast in some IE browsers, slow in others... It seems to be an HTML rendering problem... The first 10% of the page displays immediately, the last 90% takes up to 10 seconds, and this is static content. I've run with firefox/yslow, renders very quickly. Seems to be isolated to some users/configurations of ie. Quirks mode does not seem to make a difference.
Is there a tool or application that I can use to help me discover a rendering bottleneck? Am I doing something egregious in my code? Could it be a javascript issue? Any help or suggestions will be much appreciated. thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
使用Fiddler查看加载图片、css、js文件等的次数，也就是说，是不是缓存有问题？ JavaScript 肯定会在不同的浏览器版本中引起问题。 您在某些版本中发现了许多其他版本中没有的优化。 另外，如果可能的话，请确保您的 html 是格式良好的 xhtml。 页面的排列方式也会影响生活。 如果您的文档树很深，则可能需要等待读取所有子节点才能渲染大部分。 另一件需要注意的事情是，某些工具栏和插件确实会提前加载，并且会减慢运行速度。 HTTP 代理至少可以帮助您观察网络上发生的情况。
不确定这些想法是否可以帮助您解决具体问题，但它们可以帮助整体生活。
Use Fiddler to look at the times to load images, css, js files, etc. In other words, is caching a problem? Javascript can definitely cause issues in different browser versions. There's lots of optimizations you find in some versions that aren't in others. Also, make sure your html is well-formed xhtml if possible. How the page is arranged can also affect life. If your document tree is deep, it may need to wait to render large sections until it reads all the child nodes. Another thing to note, certain toolbars and plugins do look ahead loading and can slow down life. An HTTP Proxy can help you watch what's going on network-wise at least.
Not sure if anything of those ideas might help your exact problem, but they can help life overall.
如果它在 FF 或 Chrome 中运行得很快，那么肯定是 JavaScript 问题。 IE7 在处理大量脚本和复杂 HTML 时非常慢。 我们有一个共享点页面，在 IE 中渲染需要 10 秒，在 FF 和 Chrome 中渲染需要不到 1 秒。 我们通过向服务器端处理添加计时器并通过 Response.Write() 将输出发送到客户端来对页面进行基准测试。 通过这样做，我们可以确定处理页面的服务器时间和渲染页面的客户端时间（因为您会在屏幕上看到计时器结果，然后等待 10 秒以渲染其余部分）。 瓶颈是客户端上的 100% IE。 这也解释了为什么速度在不同人的机器上会有所不同，因为根据客户端机器的速度，页面将以 8-15 秒之间的速度呈现。
我们甚至让微软查看了这个问题，他们确认 IE 有一个“丰富的渲染”引擎，速度较慢......IE8 运行速度更快，但这对今天的任何人都没有帮助。
If it runs fast in FF or Chrome then it's a javascript issue for sure. IE7 is VERY slow in processing large amounts of script and complicated HTML. We had a sharepoint page that took 10 seconds to render in IE and sub 1 second in FF and Chrome. We benchmarked the page by adding a timer to the server-side processing and sending the output to the client via a Response.Write(). By doing this we could determine the server time to process the page and the client time to render the page (since you would see the timer results on the screen and then wait 10 seconds for the rest to render). The bottleneck was 100% IE on the client. This also explained why the speed was variable on different peoples machines, because depending on how fast the client machine was the page would render at some speed between 8-15 seconds.
We even had MS look at the issue and they confirmed that IE has a "rich rendering" engine which is slower.... IE8 runs much faster but that is no help to anyone today.
您在 CSS 中使用了任何行为吗？ 我见过如果使用太多行为和/或影响太多元素，就会导致应用程序崩溃。 检查周围是否有任何 .htc 文件。
当然，行为仅与 IE 有关，并且它们使用 JavaScript，因此我确信不同的 IE 版本比其他版本更能胜任地处理它们。
Are you using any behaviors in your CSS? I've seen behaviors bring an app to its knees if too many are used and/or if they affect too many elements. Check for any .htc files lurking around.
Of course behaviors only pertain to IE and they use JavaScript, so I'm sure different IE versions handle them more competently than others.
有一个专门用于此类场景的工具，称为 dynaTrace，可以在本网站免费获得：
http://ajax.dynatrace.com/pages/
这个工具确实可以帮助您，因为它几乎可以跟踪所有内容，并且是专为 IE 构建的。
There is a special tool for such scenarios called dynaTrace which is available for free at this website:
http://ajax.dynatrace.com/pages/
This tool could really help you out because its tracking almost everything and its specially build for IEs.
检查脚本中是否存在内存泄漏。
http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
Check for memory leakage in the script.
http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
Steve Souders 出色地介绍了提高网页性能的 14 个（简单）步骤：
http://developer.yahoo.net/blogs/theater/archives/2007/08/steve_souders_high_performance.html
如果它挂在页面中间，我个人首先要做的就是要做的就是确保或移动我所有的 JavaScript 位于页面底部。
IE 很擅长表现不佳，尤其是在 JavaScript 方面，因此如果将其移至底部，IE 可以呈现页面，然后继续处理 JavaScript。
Steve Souders gives an excellent presentation on 14 (simple) steps to improve the performance of your web pages:
http://developer.yahoo.net/blogs/theater/archives/2007/08/steve_souders_high_performance.html
If it's hanging in the middle of the page, the first thing I would personally look to do is ensure or move all my JavaScript is at the bottom of the page.
IE is great at being a bad performer, particularly with JavaScript, so if you move it to the bottom, IE can render the page, then get on with processing the JavaScript.
我使用 HttpWatch 来解决 IE 中链接资源（图像、脚本、CSS）、网络或 HTTP 相关问题。 有一个免费的& 付费版本。 免费固然很好，但你会失去一些不错的功能。
I use HttpWatch for troubleshooting linked assets (images, script, css), network or HTTP related problems in IE. There's a free & paid version. Free is fine but you lose out on some nice features.