缓慢加载JSF页面

Question

我有一个JSF应用程序，它有几个JSF页面。当我点击页面加载一个新页面时，我等待1-2秒来加载一个新页面，我看到白色屏幕。我如何解决这个缓慢加载？例如，我可以在加载新页面时在屏幕中央显示“正在加载...”并刷新屏幕而不显示白色显示？ 什么是最佳实践？

Answer 1

听起来像一个性能调试问题。

先看看慢位是哪里。在Chrome，Safari或Firefox（也可能是IE）中，您可以访问调试器控制台。

在Chrome中，将其拉起并单击网络选项卡。刷新页面。您将看到的是页面上需要网络连接加载的所有资源的瀑布图。它也会为每个人提供时间。

假设你看到这样的内容：

index.html ######## 
script1.js   #### 
script2.js    ########## 
img1.png       ##### 
img2.png       ######### 
img3.png       ###### 

如果通过对script2.js年底看的index.html，你可以看到这些是如何发生的线性此起彼伏。这被称为阻塞。

对于index.html，这是您的初始页面加载。根据文档的大小，这可能非常小或非常大。几乎所有的后缀（script1 & 2和imgs）只在index.html加载后才开始加载。这是因为index.html必须先由浏览器解析，然后才能开始加载其他所有内容。

如果index.html显示大约需要2秒加载，那么这意味着您的问题很可能在服务器端。可能是页面生成需要很长时间，或者您的Web服务器负载很重，或者连接速度非常慢。此时，您需要进行一些服务器端测试以查看问题出在哪里。

现在让我们回到示例图。

关于script1.js和script2.js如何被阻塞，这意味着它们的所有JavaScript都被加载，解析并运行。 Javascript是单线程的，脚本标记中的代码必须完全由JavaScript解释器解析并加载，然后浏览器才能开始处理下一个脚本或加载下一个资源。

有很多优化JavaScript的技术来快速加载。这是一个不同的话题，但是'优化JavaScript加载'是一个开始学习更多东西的好地方。最后，某些类型的资源（如图像）固有地并行加载。图中显示的是img1-3全部同时加载。这表示每个资源负载的开始都在同一点排队。它们可能会或可能不会在同一点结束，如在img2中。 Img2是一个更大的图像，所以加载时间更长。

关于浏览器如何加载资源还有另一个有用的事情，它的浏览器对它们可以进行的同时连接的数量有限制。在过去，IE6每域限制2个同时连接。该图可能如下所示：

img1.png       ##### 
img2.png       ######### 
img3.png       ###### 
img4.png        ###### 

注意其中img4开始加载。 Imgs 1-3正在加载，但img4被推迟到img1完成加载。这是因为只有2个打开的连接，img4必须等到img1完成。同样，img2的大小并不重要，这只是基于可用的连接。

幸运的是，现在所有的浏览器都允许更多的同时连接，所以这不是一个问题。尽管如此，它还是需要注意的。

解决此问题的一种方法是加载来自不同域或子域的资源。例如，如果您的网站图像非常​​大，则可以设置多个可从中加载图像的子域。可能是这样的：

sub1.domain.com/img1.png 
sub1.domain.com/img2.png 
sub3.domain.com/img3.png 
sub4.domain.com/img4.png 
sub1.domain.com/img5.png 
sub2.domain.com/img6.png 
sub2.domain.com/img7.png 

这可以让浏览器“轮询”请求并加载更多的资源，而无需等待很长时间。

无论如何，希望这有助于。