JavaScript comprehensively parses the JavaScript execution sequence in various browser web pages

Source: Internet
Author: User

We know that javaScript is an interpreted language, and its execution is top-down, but the understanding of each browser is slightly different, the upstream and downstream of the code, that is, the Program Stream, is crucial to the correctness of the program. Therefore, I think it is necessary to thoroughly understand the execution sequence of multiple js blocks.
First, how many methods can be used to add javaScript to the page? The first two types are common. In fact, there are more.
1. introduce external js files directly on the page: <script src = "my. js"> </script>
2. directly write js fragments such as <script> alert (1) </script> on the page.
3. Introduce the js file document. write ("<scr" + "ERT src = 'my. js'> </scr" + "ERT>") in js ");
Note: At this time, ".. </script>" must be split into "</scr" + "ERT>". Otherwise, the browser may close the parent js segment and make an error;
4. Reference other js fragments in js, document. write ("<scr" + "ERT> alert (1) </scr" + "ERT> ");
You may think this is not necessary. Since it has already been used in the script, why? Haha, it is also a way of writing, and it has its own special behavior. We will discuss it later.
5. Use xmlHttpRequest in Ajax in combination with eval () to introduce js. I first saw the code in Dojo and wrote the following details:
Var ajaxRequest = getXmlHttpRequest () // Save the Department for obtaining xmlHttpRequest from each Browser
AjaxRequest. open ("GET", "my. js", false); // synchronously call the Get method of the xmlHttpRequest object
AjaxRequest. send (null );
SJsFragment = ajax. responseText; // obtain the js clip string.
Eval (sJsFragment); // executes js fragments.
Note: The content of my. js, that is, the subsequent sJsFragment, is required to be a very standard js. Cut comments without a //. How can I check whether js is standardized? Go http://jslint.com/
6. the omnipotent Dom method, which I first saw in Yahoo's front-end code, is very powerful and also detailed:
Var oScript = document. createElement ("script"); // create a Script Element
OScript. src = "my. js"; // specifies the src attribute.
Document. getElementsByTagName ("head") [0]. appendChild (oScript );
Note: The content of my. js will be obtained and executed after oScript is added to the document. Taking a closer look at this section, it is easy to find that this call is asynchronous. It can be triggered by an event after the document is loaded. I used it to work around it, as an alternative to the Get method of xmlHttpRequest in cross-origin fetch, The Get method achieves perfect results and will have the opportunity to write articles in the future.
There may be more than six types, and these types may also be nested and changing.
Among them, the execution sequence of the javaScript introduced in the methods 1, 2, 4, and 6 is very natural. With the loading of pages and subsequent event triggering, they follow the principle of first-in-last-in-internal.
We are mainly concerned about the problems brought about by the introduction of js Methods 3rd, 4 (post please indicate the source: http://blog.csdn.net/lenel)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.