这是我第一次写网页，我想在我写的每个页面中包含“页眉”文件、“导航栏”文件和“页脚”文件。
有人建议使用类似的东西:
<script>
$(function(){
$("#header").load("header.html");
$("#navbar").load("navbar.html");
$("#footer").load("footer.html");
});
</script>
然后只需使用 <div id="header"></div>代替我的 ~20 行标题文本，只需将该文本放在头文件中。这样，此 header 会更改一次，所有页面都会反射(reflect)更改。
但是，我注意到，当我加载此文件时，并没有对页面中的 header 进行硬编码，而是对导航栏/ header /等进行了瞬间处理。加载。有什么办法可以加快速度吗？
最佳答案
我同意@ceejayoz 的评论。仅仅因为某些事情是可能的，并不意味着它应该那样做。
你看到加载页眉/页脚延迟的原因是因为你是
- 发送单独的 http 请求以加载模板，以及
- 请求是异步，这实际上意味着，浏览器将继续呈现页面的其余部分，直到它获得完整的
header.html
根据您的网络速度，此延迟可能从几毫秒到几秒不等。
如果您想在客户端上为单独的 UI 组件(页眉/页脚/主要内容)保留不同的 View (在不同的文件中)，我建议使用一些 SPA 框架(angularjs/ Ember )
在服务器端，您可以使用 php 并做类似的事情
<?php include('header.html') ?>
<?php include('body.html') ?>
<?php include('footer.html') ?>
或各种模板引擎来实现相同的目的。
正如@ceejayoz 所说，服务器端模板会更快的原因是:
- 它不会涉及 HTTP 请求并且
- 它不必等待页面完成加载。它会首先呈现所有模板并将编译后的页面发送到浏览器
关于javascript - 缓慢的javascript加载html文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31371510/