Js with asynchronous

<! DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <div id="testdom"></div> <script src="js/main1.js" defer ></script> <script src="js/main2.js" defer ></script> <script src="js/main3.js" defer ></script> <! -- async: does not block DOM rendering, executes whichever file is loaded first --> <! -- defer: Asynchronous, neither of which will block the DOM rendering, but not immediately, but in sequence, after all elements have been parsed and before the DOMContentLoaded event is triggered --> <! 1> parse <HTML> 2> load style files and scripts 3> parse and execute script code 4> DOMContentLoaded 5> Add external images 6> load --> <! -- window.onload = function(){ } --> <! -- <script src="js/main1.js" defer ></script> <script src="js/main2.js" defer ></script> <script src="js/main3.js" defer  ></script> --> <! Async is not very useful for application scripts because it doesn't care about dependencies at all (even the lowest level of sequential execution), but it is very suitable for scripts that don't depend on or be relied on by any script, most typical example: Google Analytics --> <! -- <script src="js/main1.js" defer async></script> <script src="js/main2.js" defer async></script> <script src="js/main3.js" defer async></script> --> </body> </html>Copy the code

Performance Perform Performance analysis on the Performance page

<! DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <div id="testDom"> test session cookie </div> <script> var testDom = document.getElementById('testDom'); // testDom.onclick = function(){ // console.log('111'); // } // testDom.onclick = function(){ // console.log('222'); // } testDom.addEventListener('click',function(){ console.log('kkk'); }) testDom.addEventListener('click',function(){ console.log('mmmm'); }) function getTiming(){ var time = performance.timing; var timingObj = {}; TimingObj [' redirect time '] = (time.redirectend - time.redirectStart)/1000; TimingObj ['DNS lookup time '] = (time.domainlookupend-time. DomainLookupStart)/1000; TimingObj ['TCP connection time '] = (time.connectend - time.connectstart)/1000; TimingObj [' requestStart '] = (time.responseend-time.requestStart)/1000; TimingObj [' time to parse DOM tree parse '] = (time.domcomplete-time.domloading)/1000; TimingObj [' script time] = (time. DomContentLoadedEventEnd - time. DomContentLoadedEventStart) / 1000; TimingObj ['onload event time '] = (time.loadeventend-time. LoadEventStart) / 1000; var totalTime = (time.loadEventEnd - time.fetchStart)/1000; For (item in timingObj) {console.log(item+':'+timingObj[item]) +' seconds'} console.log(' totalTime :'+totalTime); } window.addEventListener('load',getTiming) // window.onload = function(){ // getTiming() // } var arr= []; for(var i=0; i<1000; i++) { arr.push(i); } </script> </body> </html>Copy the code