緩慢的JavaScript加載HTML文件

這是我第一次寫網頁，我想在我寫的每個頁面中包含'頭文件'文件，'導航欄'文件和'頁腳'文件。緩慢的JavaScript加載HTML文件

有使用類似的建議：

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

，然後只用<div id="header"></div>到位我〜20行標題文本的，只是放在頭文件中的文本。這樣，這個標題就會被改變一次，所有的頁面都會反映這個改變。

但是，我注意到，但是，當我加載這個文件，而不是硬編碼頁面中的標題，它需要一秒鐘的導航欄/標題/等。加載。有什麼辦法可以加快速度嗎？

來源

2015-07-12 drjrm3

「有人建議使用類似......的東西......」誰推薦這樣做有點屁股。不要這樣做。加載它在服務器端。做它客戶端是不好的SEO，加載時間，可用性等 – ceejayoz

我在這裏找到了建議（http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-包含在多個HTML頁面中）。除此之外，我不確定加載服務器端和加載客戶端之間有什麼區別。語法如何改變？ – drjrm3

那麼，例如，在PHP中它會是'<？php include（'header.html'）？>'。它的速度更快，因爲a）它不涉及HTTP請求，並且b）不必等待頁面完成加載DOM。 – ceejayoz

我同意@ceejayoz的評論。只是因爲有可能，並不意味着它應該以這種方式完成。

爲什麼你看到在加載你的頭延遲的原因/頁腳是因爲你

發送單獨的HTTP請求加載一個模板，
請求是異步基本上意味着，瀏覽器將繼續渲染頁面的其餘部分，直到獲取完整爲止header.html

根據您的網絡速度，此延遲可能會從毫秒到fe w秒。

如果你想在客戶端保留不同意見（在不同的文件）獨立的UI組件（頁眉/頁腳/主要內容），我會建議使用一些SPA框架（angularjs /燼）

在服務器端，你可以使用PHP 和做類似

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

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

正如@ceejayoz說，爲什麼服務器端模板會更快的原因是因爲：

也不涉及一個HTTP請求和
那就不必等待頁面完成加載。它會先渲染所有模板，然後在瀏覽器上發送編譯好的頁面

來源

2015-07-12 19:22:37 nalinc

這總是會很慢，而且不是特別明智 - 首先，您的網頁加載。然後，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>

來源

2015-07-12 19:19:39 Godwhacker

緩慢的JavaScript加載HTML文件

回答

相關問題