緩慢的javascript加載html文件

Question

這是我第一次編寫網頁，我想在我編寫的每個頁面中包含“頁眉”文件，“ navbar”文件和“頁腳”文件。

建議使用以下內容：

<script>
$(function(){
    $("#header").load("header.html");
    $("#navbar").load("navbar.html");
    $("#footer").load("footer.html");
});
</script>

然后只需使用<div id="header"></div>代替我的〜20行標題文本，然后將其放在標題文件中即可。 這樣，該標頭將被更改一次，並且所有頁面都將反映更改。

但是，我注意到，當我加載此文件時，無需對頁面中的標頭進行硬編碼，而是需要花費一秒鍾的時間用於navbar / header / etc。 裝載。 有什么辦法可以加快速度嗎？

Answer 1

我同意@ceejayoz的評論。 僅僅因為有可能，並不意味着就應該那樣做。

之所以看到加載頁眉/頁腳的延遲是因為

發送單獨的http請求以加載模板，以及
該請求是異步的 ，這實際上意味着，瀏覽器將繼續呈現頁面的其余部分，直到獲得完整的header.html

根據您的網絡速度，此延遲可能從毫秒到幾秒不等。

如果要在客戶端為單獨的UI組件（頁眉/頁腳/主要內容）保留不同的視圖（在不同的文件中），我建議使用一些SPA框架（angularjs / ember）

在服務器端 ，您可以使用php並執行類似的操作

<?php include('header.html') ?>
<?php include('body.html') ?>
<?php include('footer.html') ?>

或各種模板引擎來實現相同的效果。

正如@ceejayoz所說，服務器端模板更快的原因是：

它不會涉及HTTP請求，
它不必等待頁面完成加載。 它將首先呈現所有模板，然后在瀏覽器中發送已編譯的頁面

Answer 2

這總是很慢，而且不是特別明智-首先，您的頁面加載。 然后，jQuery進行三個單獨的Ajax調用，每個調用與加載整個頁面的速度差不多。

如果您真的想將文件分為頁眉，正文和頁腳，建議使用PHP而不是JavaScript。

一個更簡單的解決方案是簡單地使用HTML注釋和大量的空格來分隔文件的各個部分。

<html>

    <!-- HEADER -->

    <head>



    </head>






<body>


    <!-- Navbar -->

    <div class="navBar">

        <!-- ..... -->

    </div>








    <!-- Main -->

    <div class="container">


        <!-- ..... -->

    </div>









    <!-- Footer -->

    <div class="footer">

        <!-- ..... -->

    </div>


</body>

</html>

緩慢的javascript加載html文件

問題描述

2 個解決方案

解決方案1
2 已采納 2015-07-12 19:22:37

解決方案2
0 2015-07-12 19:19:39

緩慢的javascript加載html文件

問題描述

2 個解決方案

解決方案1 2 已采納 2015-07-12 19:22:37

解決方案2 0 2015-07-12 19:19:39

解決方案1
2 已采納 2015-07-12 19:22:37

解決方案2
0 2015-07-12 19:19:39