When I use google maps, I am interested in its implemention, so I use the firebug to inspect.
Then I found that its javascript loading strategy is rather interesting. Take this page for example:
Then when I open this page first time, the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bcommon,map,util,poly%7D.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bonion,geometry%7D.js
But if I refresh the page(use the ctrl+f5), the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
However the page still works, the overlay is drawn in the map. But where is the poly.js and etc?
Also, can anyone tell me how to load the js by components? For exmaple the common util poly in the example.
What should I know when I write the different components?
1. When poly.js loads, it passes a string to
google.maps.__gjsload___.Here’s an excerpt:
google.maps.__gjsload__('common', '\'use strict\';var Ai=isNa...The rest of the file is just the contents of that string.
My hunch is this function probably stores this string in
localStorageorsessionStorageso that it only has to be retrieved once.2. Also, if you want to learn about loading js files as-needed, look into AMD and/or CommonJS:Modules.
A good imlementation of AMD (my preference) is RequireJS.
Update
I did some poking around, and
localStorageandsessionStoragedo not appear to be being used on this page. I also can’t duplicate your results. In Firebug, poly.js always loads for me. There may be some magic happening somewhere, but I don’t see it.However, it’s entirely possible to store a string in
localStorageandsessionStoragefor retrieval without having to make an extra js call.