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                         ######

如果你看一下index.html到script2.js的末尾,你可以看到它们是如何一个接一个地线性发生的.这称为阻塞.

对于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

这使浏览器可以"循环"请求并加载更多资源,而无需等待很长时间.

无论如何,希望这会有所帮助.