Discusses the loading order of HTML and javascript in the browser

I felt good about myself after sweeping javascript the other day. Now that I think about it, it doesn't matter. Today's task is to finish the chapter on the client-side page life cycle in asp.net ajax. However, because of the content of this chapter, I have some confusion. None of this is mentioned in the book.

What is the detailed loading process of an HTML page? What is the priority of page elements when they load?

The scope of javascript, the scope of variables, the relationship between different script segments?

The life cycle of an HTML page?

These questions really hit home. Without this knowledge, I couldn't see the underlying principles through the framework of asp.net ajax. We know the reason but not the reason.

In the case of extensive access to information on the Internet. Part of the answer.

About HTML loading:

In general, HTML is loaded and parsed from top to bottom, while dom objects are generated. As for the inclusion in HTML:

Document. The write (" XXXX ");

< The script type = "text/javascript" SRC = "aaa. Js >" < / script>

Or something like that, what's their order? Again, if you're parsing HTML, you're going to stop parsing these things and execute these generated statements, and if you're inserting an external link, you're going to parse and execute the js corresponding to the external link. The following statements have different results for different browsers:

< The script type = "text/javascript" SRC = "aaa. Js >" < / script>

In ie. Instead of waiting for aaa.js to download and parse, another thread is created to handle it, and the main thread passes over. But in ff. It waits until aaa.js is downloaded, parsed, and executed.

See the attached resources for a detailed discussion of javascript execution later in this article.

About the life cycle of a page in HTML:

The two most important events are onLoad and onUnLoad. OnLoad is triggered when the page is loaded. OnUnLoad fires after the dom of the page is destroyed. However, onLoad is a bit of a special case, and see the resources attached later in this article. Be sure to pay attention.

I looked at several sites of HTML source code, found the following code:

< Div class = "ad1602 >" < Script SRC = "/ GGJS view1602_w. Js" > < / script> < / div>

This is the code for a website to display ads on the page. For domestic websites, display ads are usually introduced to a third-party page with an iframe, but here they are generated directly with a javascript segment. Later, I looked at the HTML code generated by 163 blog. The entire HTML code has only one shelf, and all pages are generated through js. I see a few js files introduced at the end of the page, and finally a call to the initAll function at the end of the page. I didn't study its js code closely, and I suspect that it put all the presentation layer functionality into the client's js file. The server side is just a few page racks and a lot of webservices. It's amazing.

For an event to trigger multiple response functions:

I've thought about implementing a c# delegate myself. Javascript events can be associated with more than just a function. You can fire a list of events one at a time. I've been working on asp.net ajax for a few days, and there's a package for that.

In asp.net ajax, you can wrap a dom element into a sys. ui.domelement object in asp.net ajax. You can then manipulate the list of events using its methods: addHandler(), addHandlers(), removeHander(). That's convenient. The principle was not clear at the time. Today I saw two pieces of code in the resources section below to get the middle details straight:

I. use the interface in dom 2:

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
 ... 
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
 ... 
}

It turns out that this concept already exists in the dom. Didn't know. It seems that there are still many things I don't know about dom.

Two, this method is pure hand to achieve. See the following code:

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
window.onload = func;
   } else {
     window.onload = function() {
       if (oldonload) {
         oldonload();
       }
       func();
     }
   }
}

This is a nice function to write. Do it with anonymous functions!