ODINの立案された配送計画の表示の部分（solveVRPResult）でマップの読み込み速度が遅いという問題がありました。
具体的には、ルートと配送先が多数設定されているとそれぞれをマップ上に表示する外部ファイルの読み込みなどに時間がかかっていました。
そこで、asyncまたdeferを活用して非同期で読み込むことで、表示速度を上げるということを試みました。
async・・・読み込み開始は非同期、読み込みが完了したらすぐに実行（script要素の実行順が保証されないので依存関係のあるscript要素はうまくいかなくなるかも）
defer・・・読み込み開始は非同期、読み込みが完了してもすぐには実行せず、DOMツリーの構築が完了してから実行
それぞれの外部ファイルの内容を検証したところ、読み込まれる順番が重要だということがわかりました。
しかし、deferでやってもそこまで速度が改善されず、なんとか全てasyncを使いつつ読み込む順番を工夫することで高速化を図りました。
結果としては、それぞれの読み込み速度と読み込むべき順番を考慮し、
①Mapboxのinitialize
②各ルートの緯度経度のデコード
③各ルートを異なる色の線として描画
③マップ表示範囲の調整
④SVGマーカーなどマーカー類の表示
といったような順序になりました。
また、ファイル内でのコードの順番（どこに呼び出し内容を書くか）というのも速度に影響していました。
HTML→JavaScript（外部ファイル呼び出し、JS処理）
としていたのを
JavaScript（外部ファイル呼び出し）→HTML→JavaScript（JS処理）
と変更しました。
<link rel="stylesheet" href="{$smarty.const.TEMPLATE_URL}templates/css/select2.min.css">
<link rel="stylesheet" href="{$smarty.const.TEMPLATE_URL}templates/css/jsgantt.css">
<script async src="templates/js/mapbox/initializeMapbox.js"></script>
<script async src="templates/js/mapbox/makeVrpResultFestureData.js"></script>
<script async src="templates/js/utils.js"></script>
<script async src="templates/js/decodePathLngLat.js"></script>
<script async src="templates/js/mapbox/addLine.js"></script>
<script async src="templates/js/mapbox/resizeToFit.js" ></script>
<script async src="{$smarty.const.OPEN_LAYERS}"></script>
<script async src="templates/js/error_check.js"></script>
<script async src="templates/js/mapbox/addSvgMarker.js"></script>
<script async src="templates/js/mapbox/addSymbolMarker.js"></script>
<script async src="templates/js/mapbox/addPopup.js"></script>
<h1>{$smarty.const.DELIVERY_PLAN_CRATE}</h1>
{include file='route_optimizer/flow_and_status.html'}
...