ホームページのヘッダーの共通化を試みた(失敗編)

毎回仕様が変わるたびにホームページのヘッダーやフッター，メニューバーをいじるのは非効率的，というか面倒くさいので，そこだけ外部のHTMLに書いて読み込むということを試みた．結論から言うとうまくはいくのだが，重すぎてまともに動作しないので断念．ブラウザでの依存性もあるようだが，とりあえずChromeでは現実的には使用不可能でした．

今回，挑戦してみた方法は，JQueryを使って外部のHTMLファイルを読み込む方法．そもそもJQueryがないよという人はここを参考にダウンロードしてください．
【jQuery入門 1】超基本！ jQuery のダウンロードと書き方 | SONICMOOV LAB
直接以下のURLをscriptに書いても使えます．
http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
実装自体はすごくシンプルです．
参考URL:
【jQuery】htmlページをパーツごとに分けて読み込む方法 - CODE-LIFE
y.okano blog: jQuery で外部 HTML を読み込む方法
※そもそも，ローカルでは動作しないようなので，サーバーにアップロードしたうえで動作確認してください．これに気付くまで1時間くらいかった．
HTML - IE11 html jquery load 動かない(33953)｜teratail

で，うまくロードはできたのだが，いかんせん重い.F5キーでリロードしたら，うまく表示できない，あるいは全然読み込みが終わらない．実用的にはだめだこれ．ということでこの方法は泣く泣くあきらめた．

正直なところ，静的なHTMLでHTMLを読み込むのはなかなか骨が折れるようです．諸事情から静的HTMLにこだわっているのがいけないのだろうか．どうやら，PHPではもっと簡単らしい．HTMLはやめてPHPとかで書けということなのだろうか．こっちはまた別の方法をとっているようなので後日リベンジしよう．
静的HTMLでHTMLファイルを読み込む | 株式会社LIG
静的HTMLで、インクルードを実現するためのJavaScript - on the center line.