优先考虑内容并在另一个之前加载特定元素

时间:2013-11-26 13:35:36

标签: php html css apache web-optimization

我今天尝试使用Google Speed优化我的网页 https://developers.google.com/speed/docs/insights/

它说,here

  

如果您的网站使用带有导航侧边栏和文章的双栏设计,但您的HTML会在文章之前加载侧边栏,请考虑先加载文章。

直到今天,我还没有想到加载特定的div元素是可能的。文档也没有显示任何教程,所以我很困惑这是如何完成的。如果用Javascript / CSS完成

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

有分别加载内容但是为了优化页面速度的方法我认为你所追求的只是页面请求的顺序。除了JavaScript技巧之外,HTML页面按照从上到下列出的顺序加载内容和资源。 HTML往往与视觉流程相匹配,但这不是必需的。如果通过首先加载页面内容来改善用户体验,则可以在HTML页面或模板中将页面内容移动得更高。然后使用CSS将内容直观地放置在预期的页面上。

或者,内容或数据可以使用JavaScript加载并插入页面的元素(如特定div)。可以使用此方法解析HTML,但遗留支持对此不利。 iFrames工作,但他们显示一切。最好的办法是在HTML文档中加载内容,因为它应该加载(CSS在顶部,因此浏览器有关于需要渲染的位置的说明),并使用CSS来定位需要出现的内容。

<style>
#navigation{
position:absolute;
top:0px;
height:200px;
}
#content{
position:absolute;
top:200px;
}
</style>

<div id=content>
Stuff I want to load first...
</div>
<div id=navigation>
Navigation to load later...
</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest