Discuss the loading order of html and javascript in the browser_javascript skills

I swept through JavaScript a while ago, and I felt good about myself at the time. Now that I think about it, I feel like it’s nothing. Today's task is to study the chapter on the life cycle of the client page in asp.net ajax. However, I was a bit confused by the content of this chapter. None of these doubts are mentioned in the book.

1. What is the detailed loading process of html page? What is the priority of page elements when loading?

2. The scope of JavaScript, the scope of variables, and the relationship between different script segments?

3. The life cycle of html pages?

These questions really hit home for me. Without understanding these, I cannot see the underlying principles through the asp.net ajax framework. I only know it but don't know why.

With extensive access to information online. Got some answers.

About html loading:

Generally speaking, html is loaded and parsed in order from top to bottom, while generating dom objects. As for what is mixed in html:

document.write("xxxx");

and the like, what is their order? Still the same, if you encounter these things when parsing HTML, you will stop parsing and execute these generated statements. If an external link is inserted in the middle, you will parse and execute the js corresponding to the external link. The following statements have different results for different browsers:

In ie. It will not wait for aaa.js to be downloaded and parsed. It will create another thread to handle it, and the main thread will pass over. But in ff. It will wait until aaa.js is downloaded, parsed, and executed.

Regarding the execution of javascript, please see the reference materials attached at the end of this article, which has a detailed discussion.

About the life cycle 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, please also see the reference materials attached at the end of this article. Be sure to draw attention.

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

This is the code for a website to display advertisements on the page. On domestic websites, display advertisements usually use iframes to introduce third-party pages, but here they are generated directly using javascript segments. Later, I looked at the html code generated by the 163 blog. It was so abnormal. The entire html code has only one shelf, and all pages are generated through js. I saw that several js files were introduced behind the page, and finally there was a call to the initAll function at the end of the page. I haven't studied its js code carefully. I suspect that it puts all the functions of the presentation layer into the client's js file. The server side is just a few page racks and many webservices. It's really breathtaking.

About one event triggering multiple response functions:

I once thought about implementing something similar to a delegate in c#. JavaScript events can be associated with more than one function. A list of events can be triggered at a time. I have been studying asp.net ajax these days and there is a package for this.

In asp.net ajax, a dom element can be encapsulated into a Sys.UI.DomElement object in asp.net ajax. Then you can use its methods: addHandler(), addHandlers(), removeHander() to operate the event list. How convenient. I didn't quite understand this principle at the time. Today I saw the two pieces of code in the reference material below, which made me fully understand the details:

1. Use the interface in dom 2:

Copy the code The 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 has already existed in DOM. Only then did I know. It seems that there are still many things I don’t understand about dom.

2. This method is implemented purely by hand. Please see the code below:

Copy the code The 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 very cleverly written. Use anonymous functions to get it done!