html 如何引入公共的头部和底部

这个问题其实应该算是一个一直困扰我等前端开发者的心魔了，当然说得夸张些了。今天很冷得嘛，上午去了一趟省图书馆，把几本书还了，准备不借书了，但又没忍住，有借了两本回来。主要是有这个条件，为嘛不多看点书呢？
主要想吐槽一下，有点冷。

下面进入今天得主题：
方案由于今天已经是2018年了，可选方案实在有些多，外加上有组件的理论存在，这里单纯说一些网站需要用到的，
主要是一些jqure或者js来做的官网之类的，当然网上有很多都总结的很好，也对我有很大的启发，于是抱着综合百家之言的设想，于是就来说到一二：我侧重说一下引入公共底部的问题，至于顶部可以参考一篇文章：
连接放到最后面吧！

方案一（只需要两步）

set1：准备一个footer.js如下：这里使用了模板字符串语法，这个好用

document.writeln(`<ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>
`)

set2：在需要的界面引入就可以了：

    <!--尾部-->
    <script type="text/javascript" src="../../res/js/footer.js"></script>
    <!--尾部 end-->

参考图片： s11.png

方案二：并没有试过，不过原理应该一样

参考地址：https://www.jianshu.com/p/d4425824bd55
顺道把代码搬运过来：
1.先写好公共部分的文件，文件内不要有任何页面声明的标签，只需要内容的html部分

<ul class="g-flex">
      <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
      <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
   </ul>

作者：cooqi
链接：https://www.jianshu.com/p/d4425824bd55
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

2.在需要引入的主页面写入jq，引入公共部分的文件

$(document).ready(function(){
       $(".head").load("head.html");
    });

关于引入公共头部：

参考文章：https://blog.csdn.net/qq_38860424/article/details/80269421

写在最后：手有点冻僵了，里面有个唯一的不足之处，虽然功能可以满足，但是当界面初始加载的时候有DOM结构的会先展示覆盖，底部不是马上就呈现，算是美中不足。