Testing of loading resources on the home page and IFRAME

Http://www.ilovejs.net/archives/760

 

For IFRAME, I did less tests, this evening, due to one of my questions, "Is there a way to load HTML content and other resources concurrently on the page" triggered a test on IFRAME between me and the bottle.

The first reason is my misunderstanding that "IFRAME will block the download of resources after" and the "browser Resolution Page and download resource Order Problem" caused by the above problems. In the official WebKit blog, I published this article: How WebKit loads a Web page, which describes how pages parse HTML and download resources. This article explains that WebKit has two download channels when loading a page, one for loading HTML document and the other for loading sub-resources (images, CSS, JS, etc ), in addition, the two channels have time sequence problems (view the original text or the following illustration to understand ), this shows that "loading page HTML content and other resources in parallel" is currently impossible, because it is determined by the internal page loading mechanism of the browser.

In this article, there are some differences with the word "frames" in the bottle, he believes that this is the same meaning as IFRAME on a common page (this is also the fuse for the next bunch of IFRAME tests ), when I used to parse HTML pages in Firefox in an en article, I also mentioned the word frame. The frame is not an IFRAME in ordinary HTML, it is equivalent to a "dark box" or a "Container" to parse HTML page content. This problem has not been confirmed, so I will not go into detail.

Then I said with my memory, "loading IFRAME will block the loading of subsequent elements." My intention is to say, when JS, images, CSS, and other resources in IFRAME need to be loaded, the loading of resources after IFRAME on the home page will be blocked. However, after his test, he found that "the HTML of the home page and the HTML of IFRAME are loaded in parallel ". I was puzzled at the beginning, and I came up with the "advanced guide for high-performance website construction" to view the content about IFRAME, I found that the book does not discuss "loading IFRAME will block loading of the following elements", but rather describes the CSS or JS resources in front of IFRAME, the loading of IFRAME (test page) will be blocked. If it is placed after the IFRAME, the IFRAME and the home page will be loaded in parallel (test page ). At the same time, the book also pointed out that "iframe will hinder the onload event triggering on the home page ".

After this test, I had to admit that it was my mistake. Wrong ~

However, during the test, I observed the HTTP waterfall chart generated by firebug and httpwatch and found an interesting thing: when IFRAME is in front of JS, images, CSS, and other home page resources, the HTTP waterfall diagram shows that all the resources in IFRAME are loaded on the home page. That's a strange question. Next, I wrote a test page. The JS file in IFRAME defines a function and the file size is more than 100 kb. on the homepage, fulljsmin. the JS file calls this function. The file is small (test page ). What is more interesting after passing the test is that no undefined error is returned when the function is successfully called. Isn't this inconsistent with what is shown in the HTTP waterfall diagram? The following is an HTTP waterfall chart under firebug and httpwatch:

At the same time, the inspect plug-in is used in chrome to test the situation. Although the IFRAME shown in httpwatch under IE8 is not concurrently loaded with the home page, the problems are basically the same as described above. Is this a bug of firebug, httpwatch, and inspect? This problem cannot occur at the same time, right? I think the problem still lies in the mechanism of loading IFRAME on the page.

I initially thought that when loading IFRAME on the home page, another process will be started to load Resources in the IFRAME. However, browsers generally only support parallel download of two resources, IFRAME cannot escape this rule. So this idea is wrong, and the bottle's view on the page loading home page resources and IFRAME resources at the same time is:

1. Parent page HTML loading-> HTML Parsing
2. If IFRAME exists, open an IFRAME thread to download HTML. Repeat Step 1.
3. Put other elements to be requested on the page into a loading queue, which is global. If it is an iframe html parsing, it will also be added to this queue. However, the final sequence may be different. Some browsers should wait until all HTML analysis is complete and then start to load the queue, while others parse and execute the queue. In the first case, the page content should be loaded first, and the content in IFRAME will be loaded continuously. In the second case, the order may be crossover, however, IFRAME loading should mostly be concentrated in one place.

The first point is beyond doubt, but the second point is "Open an IFRAME thread to download HTML, repeat Step 1". This may need to be explained, this IFRAME thread is limited by the number of concurrent downloads that the browser can only have at the same time. Therefore, the new thread may be affected by CSS and JS files, as mentioned at the beginning, when CSS and JS are in front of IFRAME, they will block loading of IFRAME (test page, this time two IFRAME are nested in the page ). It can be noted that when there are CSS, JS and other external files in front of IFRAME, blocking is serious:

For the third point of adding resources in the IFRAME to the load queue, I am a bit confused here as to "where to join the load queue ". In simple HTTP waterfall diagram, the first case is more reasonable: when loading resources on the page, a loading queue is automatically generated. When IFRAME is encountered, load the resources in IFRAME to the end of the queue, but this does not conform to the above function call test. Therefore, in Firefox, chrome, and IE, when the home page starts to load sub-resources, a loading queue is automatically generated. When IFRAME is encountered, add the sub-Resources in IFRAME to the load queue, and the sub-resources on the home page will be added to the load queue. This is also the case when there are several IFRAME in the page.

At the time of writing this article, I still have a lot of questions that need to be uncovered. At the same time, I hope that my friends who have research on this aspect can point out one or two points for further discussion ~