php - 确定内容的优先级并在其他元素之前加载特定元素

Question

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

它说，here

If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.

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

任何帮助将不胜感激。

Answer 1

有单独加载内容的方法，但要优化页面速度，我认为您所追求的只是页面请求的顺序。除了 JavaScript 技巧之外，HTML 页面还按从上到下列出的顺序加载内容和资源。通常 HTML 倾向于匹配视觉流，但这不是必需的。如果通过先加载页面内容来改善用户体验，则可以将页面内容移到 HTML 页面或模板中更高的位置。然后使用 CSS 将内容可视化地放置在页面上预期的位置。

或者，可以使用 JavaScript 加载内容或数据并将其插入页面元素(如特定的 div)。可以使用此方法解析 HTML，但遗留支持对此不利。 iFrame 可以工作，但它们会显示所有内容。最好的办法是在 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