导入<头>标签内容的最佳性能

Best Performance for Importing <head> Tag Contents

本文关键字：最佳 性能 导入 标签      更新时间：2023-09-26

我正在尝试确定将head.html文件导入每个网页的<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的PageSpeed Insights运行该网站，建议您"删除渲染阻塞JavaScript"。

索引.html 头标签带 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手机上不起作用。

呈现索引.html带 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>

JQuery 是加载标题内容的糟糕方式！！

如果您将.html文档另存为.php，您应该查看PHP然后使用index.php文件中的 PHP 包含将它们包含在页面中。

索引.php示例：

<?
  include('header.php');
   <div>body content here</div>
 include('footer.php');
?>

这取决于服务器运行的服务器端语言。 如果是 php，那么做 

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

您也可以改用include_once、要求或require_once。 如果您的服务器运行的不是 php，那么您将不得不使用其语言中的任何等效物。 如果您无法访问服务器并且正在运行一个完全静态的网站，例如Dropbox，Google Drive或S3，那么如果您只有少量内容，那么我所知道的最佳选择是不包含文件，而只是运行一个基本页面的所有内容，其中包含隐藏的内容并使用javascript显示。

相关文章：