ajaxでhtmlを埋め込む時にhtmlファイルとPHPのechoでの違い

前提・実現したいこと

現在ホームページの共通パーツをパターン１の様にhtmlファイルで作成してajaxで読み込むようにしています。
最近PHPを扱う様になりパターン２の様にPHPのechoでhtmlを出力出来る事を知りました。

それぞれメリットデメリットがあるかもしれないと考えたのですが、検索ワードが思いつかず今回の質問に至りました。
ajaxで下記のような形で共通パーツを呼び出した際のパターン１とパターン２のメリットデメリットをご教授頂ければと思います。

例：パターン１の方が読み込みが早い...etc

また、これ以外に共通パーツを読み込めるお勧めの方法や、質問方法などその他アドバイスがありましたら合わせてご教授頂けるとうれしいです。

該当のソースコード

js
1//パターン１
2function callHtml2(){
3  $.ajax({
4    url: "htmlcode.html",
5    cache: false,
6    async: false,
7    success: function(url){document.write(url);}
8  });
9  $.getJSON("data.json", function(data){//記事の自動生成
10    for(var i in data){
11      $("#list").append(
12        "<li>" +
13        "<h4>" + data["a"]."</h4>" +
14        "<img src='" + data["b"] + "'>" + 
15        "</li>"
16      );
17    }
18  });
19}
20
21//パターン２
22function callHtml1(){
23  $("#callHtml1").load("htmlcode.php");
24}

html
1<!--htmlcode.html-->
2<h3>項目</h3>
3<p>文章</p>
4<ul>
5  <li><div><img src="hoge.png"></div>
6    <a href="#">.</a>
7  </li>
8...//固定のリスト複数個
9</ul>
10<ul id="list"></ul>
11

php
1<?php
2//htmlcode.php
3echo <<< EOM
4<h3>項目</h3>
5<p>文章</p>
6<ul>
7  <li><div><img src="hoge.png"></div>
8    <a href="#">.</a>
9  </li>
10//...固定のリスト複数個
11</ul>
12
13EOM;
14
15//動的リストの作成
16<h3>項目</h3>
17<p>文章</p>
18$url = "data.json";
19$json = file_get_contents($url);
20$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
21$data = json_decode($json,true);
22if($data === NULL){
23  return;
24}else{
25  echo("<ul>");
26  foreach ($data as $key => $val){
27    echo("<li>");
28    echo("<h4>".$data[$key]["a"]."</h4>");
29    echo("<img src='".$data[$key]["b"]."'");
30    echo("</li>");
31  }
32  echo("</ul>");
33}
34
35