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，那么使用外部文件会更好，因为：

＆＃34;当您使用外部CSS文件时，浏览器会缓存（记住）整个文件，因此当用户访问您网站上的其他页面时，它不必反复采取相同的步骤。当您内联CSS时，不会发生这种情况，当访问者访问您网站的另一个页面时，会再次读取CSS并采取相应措施。如果您的CSS小而简单，这无关紧要。如果您的CSS很大且很复杂，就像它们通常一样，那么您可能需要考虑将CSS缓存作为更好的选择。＆＃34;

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

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

2 个答案: