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

Is it possible to direct which elements of a page are painted first by the browser?

本文关键字：元素 绘制 指示 浏览器 是否      更新时间：2023-09-26

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

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

抱歉，如果我对浏览器绘画的理解非常基本

这并不难。 您所需要的只是 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
 }
 });

另请阅读此内容

在进一步研究之后，我找到了这篇文章

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

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

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

"当你使用外部CSS文件时，整个文件被浏览器缓存（记住），所以当用户转到你网站上的另一个页面时，它不必一遍又一遍地采取相同的步骤。当您内联 CSS 时，不会发生这种情况，并且当访问者转到您网站的另一个页面时，会再次读取 CSS 并对其执行操作。如果您的 CSS 又小又简单，这无关紧要。如果你的CSS是大而复杂的，就像它们经常趋向的那样，那么你可能需要考虑你的CSS缓存是一个更好的选择。

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

相关文章：