0

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

4

1 回答 1

6

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

首先查看慢速位在哪里。在 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

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

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

于 2012-10-14T00:14:37.453 回答