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 回答