什么阻止HTML页面利用渐进式呈现的优势？

Question

我注意到有些页面几乎立即开始呈现，而其他一些页面有时需要等待许多或全部资源（JavaScript、图像、CSS）下载完成才能开始呈现。最糟糕的情况似乎是对于一个大页面，在慢速连接或服务器上。我正在查看的一个具体页面大小接近2 MB，有30个不同的.js文件，十几个.css文件和80个图像。

我知道在http://developer.yahoo.com/performance/rules.html中有建议，但是是什么阻止浏览器在最后一个元素被下载之前尝试呈现页面？

- chris

Answer 1

这种情况发生的原因有很多。我见过最常见的是大表格。

例如，Internet Explorer 不喜欢在表格加载完成之前渲染它。

不过每个浏览器在渲染仍在下载中的内容方面都有所不同。

- Brad

---

我对可能影响它的项目列表感兴趣。在我的情况下，页面中没有任何表格，但有50个左右的嵌入式脚本。 - chris

我已经尝试了IE、FF和Chrome，但它们都不能进行渐进式渲染。网站是tourismnewbrunswick.ca。 - chris

我还应该注意到你的整个网站重达2.2MB，这确实是很大的。在典型的调制解调器连接上，需要7分钟才能加载完毕，而且由于你的CSS和JS文件太大了，几分钟内用户无法看到任何内容。 - Brad

最后，您有两个404：http://tourismnewbrunswick.ca/Portals/_default/Skins/TNB%202k9/images/loading_animation.gif和http://tourismnewbrunswick.ca/css/tourismnewbrunswick_booking_form.css。 - Brad

我一直在使用yslow和chrome开发者工具来分析网站。感谢您的评论。 - chris

Answer 2

一般规则是不要使用关于结构的标签来影响布局。在页面开头的样式中，渲染引擎知道它必须执行什么操作才能呈现页面的某个部分，但它总是需要等待某个部分下载完成才能正确地呈现它。

考虑到这一点：

1. 表格应该很少（从不？）用于布局目的。
2. 应该合理地首先呈现的部分（侧边栏、工具栏和任何框架页面的内容）应该位于HTML文档的顶部。

今天使用的大型JavaScript库与众不同，因为它们只需要被加载（并缓存）一次。

- Apalala

---

表格确实不应用于布局目的。这不是它的设计初衷。表格用于制作表格数据，就像段落用于文字，标题用于标题一样。 - Arve Systad