To avoid this problem, experienced programmers suggest to load the script at the end of the html document. (You can notice it in a low bandwidth network or if your JavaScript is too large). Loading of the script file blocks the rendering of the page. aspx page by adding a script tag inside head element e.g. In this file we are keeping the class of box1 and box2 of index.html Yet another way to load javascript asynchronously Width : 400px height : 40px border : 3px solid green I took 3 Global variables to check whether a file already added or not, if added it will not add those files again to webpage.īorder : 2px solid #CC6600 width : 400px height : 40px On page load we need this function here we are hiding and showing divs but here we are also adding CSS and JavaScript files. dia = 'screen' document.getElementsByTagName( ' head' ).appendChild( script ) ĭocument.getElementById( ' box2').style.display= ' block' ĭocument.getElementById( ' box1').style.display= ' none' style.rel = 'stylesheet' // style.type = 'text/css' Var path = " javascripts" var script = document.createElement( ' script' ) Var style = document.createElement( ' link' ) ĭocument.getElementsByTagName( ' head' ).appendChild( style ) ĭocument.getElementById( ' box2').style.display= ' none' ĭocument.getElementById( ' box1').style.display= ' block' Here I have taken two buttons ( name="check1" & name="check2" ) and two hidden divs ( id="box1" & id="box2")onclick of a button it will hide one and open one div, the div's has some classes defined in style.css file each div's has one one buttons and it has some onclick event which we are keeping in js1.js and js2.js files - If you will think slightly we do not need the js1.js and js2.js files on load If you see the page we only need the JavaScript onclick functions called showbox (boxid) at page load. Third: Add required JavaScript and CSS files after page load on run time.Second: only add the required JavaScript and CSS files to your webpage.First: we have to split JavaScript and CSS files to number of files depending or different functionality.But if we will implement a concept in which we can load the required JavaScript and CSS at the time of load of the page and add the rest JavaScript or CSS files later if required - then we will catch our goal. If you really think at loading time of a website we need 20 to 30% or max 40% JavaScript of the application while the rest 60 to 70% we are loading at the time of page load without any reason. If you are doing something, then please pause yourself for 10 min and go through these steps which will make any website faster and will give good y-slow ranking. These concepts developed by me and i also checked it in various ways, i will also give the sample code to test. If you really want to load your website faster and want to have good ranking for your website in y-slow or etc.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |