導入的最佳性能<head>標籤內容

-1

我試圖確定將每個網頁的head.html文件導入<head>標籤的最佳方法。我想要這樣做，以便所有資源都位於一個文件中，以最大限度地減少其他文件中的膨脹，併爲每頁上的頁眉/頁腳提供一個導入。導入的最佳性能<head>標籤內容

head.html

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Sample</title> 
<link rel="icon" type="image/png" href="images/sample.png"> 

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css"> 
<link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-social.css" rel="stylesheet" type="text/css"> 
      <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

<script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script> 

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

我已經考慮的JavaScript加載，但它是不好的做法，導入JavaScript文件馬上蝙蝠。通過Google's PageSpeed Insights運行該網站，建議您「Remove Render-Blocking JavaScript」。

index.html的頭標記W/JavaScript的

<head> 
    <script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script> <!-- Blocking JavaScript --> 
    <script> 
     $(function() { 
      $("head").load("head.html"); 
     }); 
    </script> 
<head>

我也使用HTML進口嘗試。這似乎可以在桌面上正常工作，除了在渲染時導入完整的HTML文檔，將文件的內容封裝在<html><head><body>標記中。這很煩人，而且在我的Android手機上無法使用。

渲染的index.html頭標記W/HTML進口

<head> 
    <link rel="import" href="head.html"> 
     <html> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
      <title>Sample</title> 
      <link rel="icon" type="image/png" href="images/sample.png"> 

      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
      <link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css"> 
      <link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> 
      <link href="css/bootstrap-social.css" rel="stylesheet" type="text/css"> 
      <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

      <script type="text/javascript" src="scripts/jquery-2.1.4.min.js"></script> 

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

來源

2016-01-22 Danielle

你的html中沒有'header'和'footer'標籤。 – jcubic

我這樣做，我只包含了我的html文檔的''標籤部分，因爲這是相關的部分。 – Danielle

我們在談論''還是'

'標籤？ –

jQuery是加載頭內容一個可怕的方式！

你應該看PHP如果您.html文檔保存爲.php 然後包括到這些使用PHP的頁面包含您index.php文件。

的index.php例如：

<? 
    include('header.php'); 

    <div>body content here</div> 

include('footer.php'); 
?>

來源

2016-01-22 15:37:28 Aaron

我試圖避免PHP，如果可能的話，因爲我的理解是託管服務器需要支持它。 – Danielle

爲什麼要避免PHP包含，使用jQuery會大大降低整體性能。 – 2016-01-22 15:47:53

@Danielle如果PHP不工作，獲取不同的主機，Javascript解決方法不是解決方案。 – 2016-01-22 15:48:26

這取決於你的服務器正在運行的服務器端語言。如果是php，那麼做

<html> 
    <head> 
     <?php include('path_to_file/head.php'); ?> 
    </head> 
    <body> 
    </body> 
</html>

你也可以使用include_once，require或require_once來代替。如果你的服務器正在運行非PHP的東西，那麼你將不得不使用它的語言中的任何等價物。如果您無法訪問服務器並且正在運行一個完全靜態的站點，例如Dropbox，Google Drive或S3，那麼我知道的最佳選擇是，如果您只有少量內容，則不包含文件但只需將一切內容隱藏起來並使用javascript顯示即可運行。

來源

2016-01-22 15:54:00 kloddant

導入的最佳性能<head>標籤內容

回答

相關問題