从PHP或Javascript加载HTML？

我正在开发一个非常大/复杂的单页应用程序，我正在尝试不同的技术来提高性能

我的应用程序使用了许多ui小部件（来自jquery ui和jqWidgets库），目前我加载所有html并在页面加载时初始化所有小部件（无论是否使用小部件，即弹出窗口被初始化并在调用之前保持隐藏）

我意识到，只要在需要之前加载用户将要使用的小部件，我就可以节省一些资源，非常标准。所以我这里基本上有两个选择：

1。）我可以将所有HTML移动到一个javascript文件中，该文件注入（附加）相关HTML，然后在调用小部件之前初始化小部件，如下所示：

$("#widgetWrapper").append("<div id='newWidgetID'></div>");
$("#newWidgetID").methodToCreateWidget();

// Code that has to run while the page is loading
/* YOUR CODE */
// Code that has to run when the DOM is ready
$(document).ready(function(){
    /* YOUR CODE */
})
// Code that has to run when the core functionality has been loaded
$(window).on('load',function(){
    /* YOUR CODE */
})

$（“#widgetWrapper”）.append（“”）；
$（“#newWidgetID”）.methodToCreateWidget（）；

2。）除了通过ajax从服务器检索HTML之外，我可以做与上面基本相同的事情

优点/缺点

我对客户机-服务器性能不太了解，但我看到了一些明显的优点和缺点，通过将HTML移动到一个javascript文件中，执行所有DOM操作，我并没有减少我的站点在pageload上需要的数据量，我只是将数据从HTML主体转移到js文件，但我正在大幅减少初始DOM元素的数量

我对方法2唯一担心的是，缓慢的客户机-服务器连接可能会导致ui响应时间出现重大延迟

---

对于如何解决这个问题，有什么建议吗？我非常倾向于方法1，行业标准是什么？或者我应该说“见鬼去吧”，然后开始加载和初始化所有东西（登录时等待时间很长，但ui响应很快），并希望浏览器在JS性能方面继续取得飞跃（当然IE除外）。

混合使用1和2解决方案可能是您的最佳选择。使用ajax调用仅检索“数据”，并在需要时使用JS函数将数据转换为完整的HTML界面。

我认为您需要了解您的受众是什么。我也倾向于#1，原因很简单，当你真正需要的时候加载一些东西更方便用户，特别是对于漫游连接的用户。一个令人讨厌的副作用可能是个性化内容，您需要防止缓存：

---

#在我看来，1是优越的，因为它减少了初始加载时的带宽，减少了初始加载时的DOM加载（这对于使用较旧浏览器和较慢连接或移动设备的用户来说有很大改善）。缺点是，当页面加载时，并不是所有的“框架”或“小部件”都被加载，但我认为，用一个小微调器或类似的东西，这是理所当然的

读完你的问题后，我认为你忽略了最简单的答案。 您目前正在考虑在页面加载时加载所有内容，或者仅在需要之前加载。 对于第一种情况，您最终会增加页面加载时间，而第二种情况可能会导致UI响应明显延迟

您的解决方案是在核心功能准备好使用后立即加载额外的内容，这意味着UI将准备好进行交互，而额外的功能将在后台加载

因此，您的脚本应该看起来像这样：

$("#widgetWrapper").append("<div id='newWidgetID'></div>");
$("#newWidgetID").methodToCreateWidget();

// Code that has to run while the page is loading
/* YOUR CODE */
// Code that has to run when the DOM is ready
$(document).ready(function(){
    /* YOUR CODE */
})
// Code that has to run when the core functionality has been loaded
$(window).on('load',function(){
    /* YOUR CODE */
})

通过在第三部分中添加ajax调用，它们仅在加载核心UI之后进行，从而在不冒UI延迟风险的情况下加快初始加载时间。

---

不过，您应该正确编程应用程序，以确保在加载之前不会尝试调用任何“额外”功能。

好的，因此我假设用户宁愿多等几秒钟，并在登录时提前下载额外的MB，那么，在与应用程序的交互过程中，是否会持续出现一系列1秒的延迟？我应该坚持这一理念吗？试想一下：如果你正在加载静态数据（因为它是一个1页的应用程序），下载20个小部件需要4秒钟，那么每个小部件只需要200毫秒就可以加载了，除此之外，如果缓存的版本是真正静态的，那么它们就会被缓存。这仍然意味着额外的代码会被立即下载。在移动连接的情况下，您不想立即下载整个世界，只有在实际需要时：D@Anyone目前，为移动设备制作一个实际的web应用程序并不值得花那么多钱（大量的兼容性和性能问题让开发者们哭诉，compairison对IE6的调试有多么容易），所以我不得不假设，由于他似乎是独自开发的，它是为计算机使用而设计的。@Entorarox你是对的，这个应用程序不会在移动设备上使用。而且，我已经实现了一个类似于您描述的策略，我只是显示一个模式加载窗口（微调器），直到桌面/仪表板部分加载完毕，然后加载其余部分。我之所以只在需要时加载资源，是因为在某些情况下，我的DOM计数非常高+50000。对于大多数用户来说，这很容易被一分为二，因为许多小部件并不常用…@A.O.DOM是浏览器中最优化的部分，因此除非组成小部件的html经常被代码更改（不包括用户交互），否则没有真正的理由（可能除了下载时间）通过javascript导入它。