javascript - JSF 页面加载缓慢

Question

就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放， visit the help center以获得指导。

已关闭 10 年前。

我有一个 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秒，那么这意味着您的问题很可能出在服务器端。可能是页面生成时间较长，或者您的网络服务器负载过重，或者您的连接速度非常慢。此时需要在服务器端做一些测试，看看问题出在哪里。

现在让我们回到示例图。

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

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

无论如何，希望这对您有所帮助。