什么阻止HTML页面利用渐进式渲染？

Question

我注意到有些页面几乎立即开始渲染，而有些页面则必须等到许多或所有资源（javascript，image，css）都已下载。最糟糕的情况似乎是一个大页面，在慢速连接或服务器上。我正在查看的一个特定页面大约有2 MB，包含30个不同的.js文件，12个.css文件和80个图像。

我知道http://developer.yahoo.com/performance/rules.html的建议，但是什么阻止浏览器尝试渲染页面，直到最后一个元素被下载？

Answer 1

有几个原因导致这种情况发生。我看到的最常见的是大表。

例如，Internet Explorer不希望在完成加载之前呈现表。

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

Answer 2

一般规则是不使用关于结构的标签来影响布局。使用页面开头的样式，渲染引擎知道如何渲染页面的某个部分，但它总是必须等待部件下载才能知道如何正确渲染它。

考虑到这一点：

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

今天使用的巨大JavaScript库不同之处在于它们只需要加载（和缓存）一次。