Question

这是我第一次写网页，我想在我写的每个页面中加入'header'文件，'navbar'文件和'footer'文件。

有人建议使用类似的东西：

<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请求以加载模板，
请求是 async ，这实质上意味着，浏览器将继续呈现页面的其余部分，直到获得完整的header.html

根据您的网络速度，此延迟可能会从毫秒到几秒不等。

如果您想在客户端上为不同的UI组件（页眉/页脚/主内容）保留不同的视图（在不同的文件中），我建议使用一些SPA框架（angularjs /余烬）

在服务器端，您可以使用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 个答案: