是否可以指示浏览器首先绘制页面的哪些元素？

Question

我想知道是否有任何方法可以控制浏览器绘制，例如我想先在页面顶部加载元素，以便用户可以直接看到内容。页面底部的元素可以最后加载，因为用户在向下滚动之前不会看到它们。

我正在寻求优化我的网站，该网站目前的加载时间为 6 秒，我希望将其缩短至 1 秒。这主要是由 JS 和图像引起的。我知道减少这两个将意味着我不需要担心指导绘画但出于兴趣我只是想知道这是否可能？

如果我对浏览器绘画的理解很基础，请见谅

Answer 1

没那么难。您只需要 ajax。加载初始标记，然后通过 ajax.

加载页面的其余部分

只需加载您最初想要向用户显示的带有少量标记的页面。然后当用户向下滚动时，您可以进行 ajax 调用并获取 xml 或 json 或 html 文件并将它们呈现在您的页面上，例如：

$(window).on( "scroll" , function() {

 var $document = $(document);
 var $window = $(this);

 if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
    //make ajax call here and load the data
 }

 });

另读this

Answer 2

进一步研究后，我发现了这篇文章

http://www.feedthebot.com/pagespeed/prioritize-visible-content.html

这提供了一种很好的方法来指导首先呈现页面的哪些部分。通过将您的内容分为折叠内容的上方和下方，您可以决定需要首先交付的内容，即您的主要内容而不是侧边栏广告。使用内联样式显示首屏内容将使其显示得非常快，因为它不需要等待外部请求。

但这只适用于简单的 CSS，如果页面需要复杂 CSS 那么最好使用外部文件，因为：

"When you use external CSS files the entire file is cached (remembered) by the browser so it doesn't have to take the same steps over and over when a user goes to another page on your website. When you inline your CSS, this does not occur and the CSS is read and acted upon again when a visitor goes to another page of your website. This does not matter if your CSS is small and simple. If your CSS is large and complex, as they often tend to be, then you may want to consider that the caching of your CSS is a better choice."

http://www.feedthebot.com/pagespeed/inline-small-css.html