Home > Developer > JavaScript
JavaScript writing methods and execution flow
<script></script> is the simplest way to write JavaScript (not used in real-world development), in which case the <script> tag is parsed immediately after the JavaScript is executed. It is important to note that this will not manipulate the DOM elements after the <script> tag. The reason is: the analysis <script> tags are executed immediately after the. The DOM element after the <script> tag is not yet constructed, so the DOM element that is behind it cannot be obtained.
Workaround: Write <script> label before the body's end tag (note: Try to avoid the body) if you want to operate on the body, you can do it through the onload and domcontentloaded methods, Their execution process allows for the body operation.
2. External reading of JavaScript files
Example: <script src= "Http://example.com/js/sample.js" ></script>
The file will be read immediately after the <script> tag analysis, and once read is completed, the javascript,<script> tag within the file will be executed with two attributes: Defer and async. Specify the defer property to defer processing of the <script> label to all other <script> tags. Specify the Async property to read the external file asynchronously and execute it sequentially after the read is completed.
Benefits: ① Browser can cache JavaScript files, if the contents of the Javvascript file changes infrequently, just download once and then cache it to the local, avoid the next read, directly improve the speed; ② team division more clearly
3. Onload
① written directly in HTML <body onload= "alert (" haha ")" >
② written in an external file Window.onload = function () {alert ("haha");}
Write JavaScript code in the OnLoad event handler to be able to execute the page after it is finished reading. Because the entire page is read at execution time, all DOM elements can be manipulated. Since JavaScript is read after reading the entire page, when there are a large number of images on the page, it can cause JavaScript to load very slowly and affect the user experience, so there are a lot of pictures on the page, it is not recommended to use this method
4. domcontentloaded
For the OnLoad method, it may take a certain amount of waiting time to execute JavaScript, which can be resolved using domcontentloaded (IE8 before the browser is not supported). Domcontentloaded is an event that occurs after HTML parsing is completed. Setting the event listener to listen on the event can reduce unnecessary wait times
For example: Document.addeventlistener (' domcontentloaded ', function () {alert ("haha");},false);
5. Dynamic Loading
Dynamically loading JavaScript files during the generation of a SCRIPT element
For example:
Var script = document.createelement (' script ');
SCRIPT.SRC = ' other-javascript.js ';
Document.getelementbytagname (' head ') [0].appendchild (script);
When this method executes JavaScript, the JavaScript file does not block other operations during the loading process, which is a big advantage. If you write script directly on the page, the load of the CSS file will be blocked when the file is loaded.
Reference files: JavaScript programming full solution Turing programming series
2015-06-26 19:31:20
JavaScript Learning notes (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
