Writing a dynamically built DOM for entirety of session once - php

Question

I'm grabbing JSON from a rest api and using the result to build a navigation menu dynamically via jQuery which works. However I worry having to repopulate the DOM every refresh or page load would most likely cause a slower user experience...
My question is, instead of getting the data, parsing and building every load. Are there any other ways of storing and implementing this so that the user only has to take the slight dip on first load? I'm thinking of possibly storing it in a cookie and grabbing that but that could be slow too.
To get the api
<?php
use yii\httpclient\Client;
$client = new Client();
$response = $client->createRequest()
->setMethod('GET')
->setUrl('API_URL')
->send();
if ($response->isOk) {
$page = $response;
}
$retJSON = $response->content;
$decode = json_decode($retJSON, true);
$page=$decode;
?>
To parse and build the data
<script async>
<?php $page = json_encode($page); ?>
var json = '<?php print $page; ?>';
$amtmenu = "";
$.each(JSON.parse(json), function(idx, obj) {
if(obj.menu_item_parent == 0){
if(obj.type != 'custom' | obj.title == 'More'){
$amtmenu += '<li class="dropdown"> '+ obj.title +'<span class="fa fa-angle-down"></span><ul class="dropdown-menu ldrop" id="' + obj.ID +'"></ul></li>';
} else {
$amtmenu += '<li>' + obj.title + '</li>';
}
}
});
$(".navbar-nav").html($amtmenu);
$.each(JSON.parse(json), function(idx, obj) {
if(obj.menu_item_parent != 0){
$itemparent = obj.menu_item_parent;
$('#' + $itemparent).append( '<li> ' + obj.title + ' </li>');
}
});
</script>
Which builds something like
<ul class="nav navbar-nav">
<li class="dropdown"> Leasing<span class="fa fa-angle-down"></span>
<ul class="dropdown-menu ldrop">
<li>Personal Car leasing</li>
<li>Business Car Leasing</li>
<li>Van Leasing</li>
</ul>
</li>
<li>Special Offers</li>
<li class="dropdown"> Services<span class="fa fa-angle-down"></span>
<ul class="dropdown-menu">
<li> Overview </li>
</ul>
</li>
<li class="dropdown"> Leasing Guide<span class="fa fa-angle-down"></span>
<ul class="dropdown-menu">
<li> The Guide </li>
</ul>
</li>
<li class="dropdown">More<span class="fa fa-angle-down"></span>
<ul class="dropdown-menu">
<li>Contact Us</li>
</ul>
</li>
</ul>
Any help or ideas are appreciated!