My website has two independent resources - a JS file (say, myjavascript.js) and an iframe (src: myiframe.html). Each of them is loaded on each page load (ie, they are loaded with same frequency). Both have same cache expiration (6 months). The JS file is larger (40 kB) than the HTML file (30 kB).
Based on relative sizes, I would expect that the browsers in users' devices caches the smaller HTML file more often than the larger JS file. However, logs from the browser's performance resource timing show that the JS file is cached more often than the iframe file.
Is there a reasonable explanation for this behavior? Do browsers treat JS / HTML files / other resources differently with respect to caching? How do they differ? Are there recommended methods to increase caching of certain resources? (In this case, I am trying to increase the cache rate of the HTML file)