Internet Explorer 7 中网页的渐进式呈现
我正在尝试改善用户对某些网页的页面加载时间的感知。这些网页大约需要 5 秒才能完成加载和渲染。总体时间还好;但当点击链接加载页面时,大约 4.5 秒内没有任何反应,然后整个页面一次性出现。这会破坏用户体验,因为用户在单击链接后会想知道是否发生了任何事情。
据我了解,当可用于渲染页面部分的资源可供浏览器使用时,浏览器应该逐渐渲染网页。我看到推荐的一件事(例如 YSlow 推荐的:)是将 css 放在 head 中,将 javascript 放在结束 body 标记附近 - 或者尽可能靠近页面末尾。我已经这样做了,但我没有看到页面渲染的初始部分,然后暂停以加载 JavaScript。据我了解,理论是一旦加载了所有 CSS,页面就会开始逐步渲染。我还了解到,当执行/下载任何 JavaScript 时,页面将暂停渲染。
还有哪些因素会影响 IE(尤其是 IE7)上的渐进式渲染?
I'm trying to improve the user perception of page load time of some web pages. These web pages take about 5 seconds to complete loading and rendering. The overall time is fine; but on clicking a link to load a page, nothing happens for about 4.5 seconds and then the whole page appears in one shot. This spoils the user experience, since the user is left wondering if anything is happening or not after clicking the link.
As I understand it, browsers are supposed to progressively render web pages as and when the resources available to render portions of the page become available to it. One thing I've seen recommended (by YSlow for eg:) is to put the css in the head and the javascript near the ending body tag - or as near the end of the page as possible. I've done this, but I don't see the initial part of the page rendering and then pausing for the javascript to load. The theory, as I understand it, is that the page will begin rendering progressively once all the CSS is loaded. I also understand that the page will pause rendering when any javascript is being executed/downloaded.
What else can affect progressive rendering on IE, especially on IE7?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
我发现 javascript(特别是一些 jQuery 选择器)会减慢速度并阻止页面呈现。我们首先通过删除一些重复选择相同元素的代码来优化 jQuery 代码。然后将代码移至 $.ready ,以便它在页面加载后执行。
总体而言,这使我们的页面加载时间缩短了 2 秒,并允许逐步加载更多页面。
I found out that javascript (specifically, some jQuery selectors) were slowing things down and preventing the page from rendering. We first optimized the jQuery code by removing some code which was repeatedly selecting the same elements. Then moved the code down to $.ready so that it executes after the page has loaded.
Overall, this has given us a 2 second boost in page load times as well as allowing more pages to load progressively.
第一步可能是了解网络端发生了什么,像 Fiddler 这样的工具会有所帮助你。就您而言, 时间轴显示 应该是一个很好的起点。
A first step may be to understand what's going on on the network side, a tool like Fiddler will help you. In your case, Timeline display should be a good starting point.
为什么不在单击链接时向用户显示页面当前处于加载状态的通知。
你可以这样做:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*或者甚至更好的内容/* };
Why not show notifications to users when a link is clicked that the page is currently in loading state.
You can do this:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*or even a better content/* };
由于页面上有 Flash 视频,我也遇到了同样的加载问题。有人能告诉我为什么天啊为什么ie不能像firefox那样加载页面???
如果ie今天倒闭了,我浪费的所有时间、日日夜夜就都结束了。
我认为 ie 是时候满足 2009 年网络大师的需求并改变他们加载页面的方式了。
如果使用java脚本,没有java的人会看到空格。
I'm having the same load problems because of flash videos on a page. Will somebody tell me why oh my God why can't ie just load pages as nicely as firefox does???
If ie went out of business today, all the hours and days and nights I've wasted would be over.
I think it's about time that ie get with the demands of web maasters in 2009 and change the way they load pages.
If java script is used, people without java will see blank spaces.
检查未封闭的标签。
检查所有图像是否具有宽度和高度属性。
Check for unclosed tags.
Check all images have width and height attributes.