javascript - Caching HTML / Performance: How can I speed up page loads when 50+% of the transferred bytes are for nav menus? -

i have large, complicated website. many, has lot of common html across pages, namely navigation , top ribbon.

a single (very complicated) page can take 300kb (of exclusively html) load. of half html common in nav , top ribbon. these elements only ever change when new version of site updated.

the content pane of every page unique, again, nav , top ribbon (which account ~50% of page's data) not change.

how can speed general page load speeds? i've got 2 ideas below, given site huge , established, pros , cons of each possible solution important.

1. make jquery (javascript) store nav menu in common_html.js file populated targeted divs 100s of kbs of common data. therefore browser (hopefully) cache common_html.js file and, not re-downloading ever page, allow common code injected instantly.
2. use ajax loading of main content div, pushing url states changes made. seems common facebook approach, applying large, existing website (where sole dev) makes me wonder difficulty (and performance) of approach compared others.

which of these better, or is there better/faster option i'm missing? time implement important performance gains are!

so seems main issue dom (document object model) rendering. if ton of html, want minimize things force re-render dom.

if it's menu super large; might worth going option 2 (although in case may suggest using angularjs or facebook's react).

speaking of facebook's react library; have concept called "virtual dom" makes rendering dom elements faster.

make decision on implement based on has less html change, rendering html intensive things once.