Discuss the loading sequence of html and javascript in browsers

I felt good when I swept javascript a while ago. Now I think it's okay. Today's task is to study the client page lifecycle in asp.net ajax. However, I am confused by the content of this chapter. These questions are not mentioned in the book.

I. What is the detailed loading process of html pages? What is the priority of page elements during loading?

2. What are the scopes of javascript, the scopes of variables, and the relationships between different script segments?

3. What is the lifecycle of an html page?

These problems really hit my dead point. Without understanding this, I cannot see its underlying principles through the asp.net ajax framework. But I do not know why.

In the case of extensive online access to information. Some answers are obtained.

Html loading:

In general, html loads and parses edges in the order from top to bottom, and generates dom objects while adding the following content to html:

Document. write ("xxxx ");

<Script type = "text/javascript" src = "aaa. js"> </script>

And so on. What is their order? The same is true. If you encounter these things when parsing html, the parsing will stop and execute these generated statements. If you insert an external link in the middle, you will parse and execute the js corresponding to the external link. The following statement has different results for different browsers:

<Script type = "text/javascript" src = "aaa. js"> </script>

In ie. Without waiting for aaa. js to be downloaded and parsed, another thread will be created to handle it, and the main thread will get over. But in ff. Wait until the download, parsing, and execution of aaa. js are complete.

For more information about javascript Execution, see the reference materials attached to this article.

About the lifecycle of pages in html:

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

I read the html source code of several sites and found the following code:

<Div class = "ad1602"> <script src = "/ggjs/view1602_javasjs"> </script> </div>

This is the code for a website to display advertisements on its pages. For domestic websites, iframe is generally used to introduce third-party pages, but javascript segments are directly used here. Later, I read the html code generated by the 163 blog, which is abnormal. The entire html code has only one shelf, and all pages are generated through js. I can see several js files are introduced at the end of the page, and at the end of the page there is a call to the initAll function. I did not carefully study its js code. I suspect that it has fully put all the functions of the presentation layer into the js file of the client. The server side is only a few page racks and many webservices. It's amazing.

About how an event triggers multiple response functions:

I once thought about implementing a delegate in c. Javascript events can be associated with more than a function. You can trigger an event list at a time. I have studied asp.net ajax over the past few days, which is encapsulated in it.

In asp.net ajax, a dom element can be encapsulated into the Sys. UI. DomElement object in asp.net ajax. Then you can use its methods: addHandler (), addHandlers (), and removeHander () to operate the event list. It's really convenient. At that time, I didn't quite understand this principle. Today, I can see two pieces of code in the reference documents below to thoroughly understand the details:

1. Use the interface in dom 2:
Copy codeThe Code is as follows:
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 dom. Only to know. It seems that I still have a lot of things I don't know about dom.

2. This method is implemented by hand. See the following code:
Copy codeThe Code is as follows:
Function addLoadEvent (func ){

Var oldonload = window. onload;

If (typeof window. onload! = 'Function '){

Window. onload = func;

} Else {

Window. onload = function (){

If (oldonload ){

Oldonload ();

}

Func ();

}

}

}

This function is cleverly written. Use anonymous functions!