Cloudy JavaScript - Cloud Ready JavaScript :-)
1. <Script src=''></Script>
This will load JavaScript synchronously and block the rendering of the rest content. Use this to load jQuery which is the prerequisites for the rest of the code.
Unlike any other ajax API such as $.getJSON and d3.json which is restricted to make calls to the same original domain. <Script> tag call download and execute script (jsonp script) from cross domain site.
To get the benefts of both cross domain calls and asynchronous calls, use next approach.
2.
function loadasync(url) {
var head = document.getElementsByTagName("head")[0]; // Find document <head>
var s = document.createElement("script"); // Create a <script> element
s.src = url; // Set its src attribute
head.appendChild(s); // Insert the <script> into head
}
This will load the JavaScript asynchronously since executing and inserting <Script> doesn't block the rendering of rest content.
An easier way is to use jQuery "getScript" call. Another bonus of using getScript call is that it doesn't leave a trace of JavaScript in the browser developer tools because it removes the <Script> after executing it. The inner working of getScript is shown here:
http://jeremyhixon.com/snippet/loading-javascript-files-asynchronously/
3. Minimize footprint of Cloudy JavaScript
To minimize the footprint of any cloudy script, use this pattern
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $.getScript("js/d3mapc.js"); </script> <div class="d3svgmap"></div>
In the cloudy script, load all other script files as
$.getScript("url1", function () {
$.getScript("url2", function () {
$.getScript("url3", function () {
$(function () {
......
hideLoading();
});
});
});
});
No comments:
Post a Comment