网页的加载和执行顺序？ [英] Load and execution sequence of a web page?

查看：122
本文介绍了网页的加载和执行顺序？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经做了一些基于web的项目，但我不认为太多关于普通网页的加载和执行顺序。但现在我需要知道细节。很难找到Google或SO的答案，因此我创建了此问题。



示例页面如下：

 < html> 
< head> 
< script src =jquery.jstype =text / javascript>< / script> 
< script src =abc.jstype =text / javascript> 
< / script> 
< link rel =stylesheetstype =text / csshref =abc.css>< / link> 
< style> h2 {font-wight：bold;}< / style> 
< script> 
 $（document）.ready（function（）{
 $（＃img）。attr（src，kkk.png）; 
}）; 
< / script> 
< / head> 
< body> 
< img id =imgsrc =abc.jpgstyle =width：400px; height：300px;/> 
< script src =kkk.jstype =text / javascript>< / script> 
< / body> 
< / html>

这里是我的问题：




  3. 这是什么时候执行的？ （内联和外部）

  4. 何时执行（应用）CSS？

  5. $（document） >
  6. 将会下载Will abc.jpg吗？或者只是下载kkk.png？

我有以下理解：


  1. 浏览器首先加载html（DOM）。

  2. 浏览器开始逐行加载外部资源。 / li>
  3. 如果满足< script> ，加载将被阻塞，并等待加载并执行JS文件，然后继续




  4. $ b

    或者它是这样的：



    浏览器解析html（DOM），并获得外部资源在数组或堆栈式结构。加载html后，浏览器开始并行加载结构中的外部资源并执行，直到加载所有资源。然后DOM将根据用户的行为而改变，取决于JS。



    任何人都可以详细解释当你得到html的响应时会发生什么页？这在不同的浏览器中有所不同吗？有关此问题的任何参考？



    感谢。



    编辑：



    我在Firefox中使用Firebug做了一个实验。它显示如下图：

    解决方案

    根据您的示例，

     < html& 
    < head> 
    < script src =jquery.jstype =text / javascript>< / script> 
    < script src =abc.jstype =text / javascript> 
    < / script> 
    < link rel =stylesheetstype =text / csshref =abc.css>< / link> 
    < style> h2 {font-wight：bold;}< / style> 
    < script> 
     $（document）.ready（function（）{
     $（＃img）。attr（src，kkk.png）; 
    }）; 
    < / script> 
    < / head> 
    < body> 
    < img id =imgsrc =abc.jpgstyle =width：400px; height：300px;/> 
    < script src =kkk.jstype =text / javascript>< / script> 
    < / body> 
    < / html>

    大致的执行流程如下：


    1. HTML文档下载

    2. 开始解析HTML文档

    3. HTML解析达到< script src =jquery.js...

    4. jquery.js

    5. HTML解析达到< script src =abc.js...

    6. abc.js 已下载，解析并执行

    7. HTML解析达到< link href =abc.css...
      8. 下载并解析
    8. abc.css li>
    9. HTML解析达到< style> ...< / style>

    10. 规则被解析和定义

    11. HTML解析达到< script> ...< / script>

    12. 内部JavaScript已解析并执行

    13. HTML解析达到< img src =abc.jpg...

    15. abc.jpg 已下载并显示
      16. c>< script src =kkk.js...
    16. kkk.js 下载，解析并运行

    17. 解析HTML文档结束

    请注意，异步和非阻塞由于浏览器的行为。例如，在Firefox中，有一个限制每个域同时请求数量的设置。



    还取决于组件是否已经缓存，组件可能不会在近期的请求中再次请求。如果组件已缓存，则将从缓存中加载组件，而不是实际的URL。



    当解析结束并且文档准备就绪并加载时，事件 onload 被触发。因此，当 onload 被触发时， $（＃img）。attr（src，kkk.png）; 运行。所以：


    1. 文件准备就绪，onload被触发。

    2. Javascript执行命中 $（＃img）。attr（src，kkk.png）;

    3. kkk.png 下载并加载到 #img

    $（document）.ready（）事件实际上是所有页面组件加载并准备就绪时触发的事件。详细了解： http://docs.jquery.com/Tutorials ：介绍_ $（document）.ready（）



    编辑 - 此部分详细说明并行或非并行部分：



    默认情况下，从我目前的了解，浏览器通常运行每个页面有3种方式：HTML解析器，Javascript / DOM和CSS。



    HTML解析器负责解析和解释标记语言，因此必须能够调用其他2个组件。



    例如，当解析器遇到此行时：

      ; a href =＃onclick =alert（'test'）; return false; style =font-weight：bold>超文本链接< / a>

    解析器将进行3个调用，两个到Javascript，一个到CSS。首先，解析器将创建此元素并将其注册在DOM命名空间中，以及与此元素相关的所有属性。其次，解析器将调用将onclick事件绑定到此特定元素。最后，它将再次调用CSS线程以将CSS样式应用于此特定元素。



    执行是自上而下的单线程。 Javascript可能看起来是多线程的，但事实是Javascript是单线程的。这就是为什么当加载外部javascript文件时，主HTML页面的解析被暂停。



    但是，CSS文件可以同时下载，因为CSS规则总是被应用 - 这意味着元素总是使用定义的最新的CSS规则重绘， 。



    元素只有在解析后才能在DOM中使用。因此，当使用特定元素时，脚本总是放在窗口onload事件之后或之内。



    这样的脚本会导致错误（在jQuery上） p> 

     < script type =text / javascript> / *<！[CDATA [* / 
     alert $（＃mydiv）。html（））; 
     / *]]> * /< / script> 
    < div id =mydiv> Hello World< / div>

    因为当脚本被解析时， #mydiv 元素仍未定义。相反，这将工作：

     < div id =mydiv> Hello World< / div> 
    < script type =text / javascript> / *<！[CDATA [* / 
     alert（$（＃mydiv）。 
     / *]]> * /< / script>

    或

     < script type =text / javascript> / *<！[CDATA [* / 
     $（window）.ready（function（）{
     alert #mydiv）。html（））; 
    }）; 
     / *]]> * /< / script> 
    < div id =mydiv> Hello World< / div>


    I have done some web based projects, but I don't think too much about the load and execution sequence of an ordinary web page. But now I need to know detail. It's hard to find answers from Google or SO, so I created this question.

    A sample page is like this:

    <html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

    So here are my questions:

    1. How does this page load?
    2. What is the sequence of the loading?
    3. When is the JS code executed? (inline and external)
    4. When is the CSS executed (applied)?
    5. When does $(document).ready get executed?
    6. Will abc.jpg be downloaded? Or does it just download kkk.png?

    I have the following understanding:

    1. The browser loads the html (DOM) at first.
    2. The browser starts to load the external resources from top to bottom, line by line.
    3. If a <script> is met, the loading will be blocked and wait until the JS file is loaded and executed and then continue.
    4. Other resources (CSS/images) are loaded in parallel and executed if needed (like CSS).

    Or is it like this:

    The browser parses the html (DOM) and gets the external resources in an array or stack-like structure. After the html is loaded, the browser starts to load the external resources in the structure in parallel and execute, until all resources are loaded. Then the DOM will be changed corresponding to the user's behaviors depending on the JS.

    Can anyone give a detailed explanation about what happens when you've got the response of a html page? Does this vary in different browsers? Any reference about this question?

    Thanks.

    EDIT:

    I did an experiment in Firefox with Firebug. And it shows as the following image:

    解决方案

    According to your sample,

    <html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

    roughly the execution flow is about as follows:

    1. The HTML document gets downloaded
    2. The parsing of the HTML document starts
    3. HTML Parsing reaches <script src="jquery.js" ...
    4. jquery.js is downloaded and parsed
    5. HTML parsing reaches <script src="abc.js" ...
    6. abc.js is downloaded, parsed and run
    7. HTML parsing reaches <link href="abc.css" ...
    8. abc.css is downloaded and parsed
    9. HTML parsing reaches <style>...</style>
    10. Internal CSS rules are parsed and defined
    11. HTML parsing reaches <script>...</script>
    12. Internal Javascript is parsed and run
    13. HTML Parsing reaches <img src="abc.jpg" ...
    14. abc.jpg is downloaded and displayed
    15. HTML Parsing reaches <script src="kkk.js" ...
    16. kkk.js is downloaded, parsed and run
    17. Parsing of HTML document ends

    Note that the download may be asynchronous and non-blocking due to behaviours of the browser. For example, in Firefox there is this setting which limits the number of simultaneous requests per domain.

    Also depending on whether the component has already been cached or not, the component may not be requested again in a near-future request. If the component has been cached, the component will be loaded from the cache instead of the actual URL.

    When the parsing is ended and document is ready and loaded, the events onload is fired. Thus when onload is fired, the $("#img").attr("src","kkk.png"); is run. So:

    1. Document is ready, onload is fired.
    2. Javascript execution hits $("#img").attr("src", "kkk.png");
    3. kkk.png is downloaded and loads into #img

    The $(document).ready() event is actually the event fired when all page components are loaded and ready. Read more about it: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

    Edit - This portion elaborates more on the parallel or not part:

    By default, and from my current understanding, browser usually runs each page on 3 ways: HTML parser, Javascript/DOM, and CSS.

    The HTML parser is responsible for parsing and interpreting the markup language and thus must be able to make calls to the other 2 components.

    For example when the parser comes across this line:

    <a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>

    The parser will make 3 calls, two to Javascript and one to CSS. Firstly, the parser will create this element and register it in the DOM namespace, together with all the attributes related to this element. Secondly, the parser will call to bind the onclick event to this particular element. Lastly, it will make another call to the CSS thread to apply the CSS style to this particular element.

    The execution is top down and single threaded. Javascript may look multi-threaded, but the fact is that Javascript is single threaded. This is why when loading external javascript file, the parsing of the main HTML page is suspended.

    However, the CSS files can be download simultaneously because CSS rules are always being applied - meaning to say elements are always repainted with the freshest CSS rules defined - thus making it unblocking.

    An element will only be available in the DOM after it has been parsed. Thus when working with a specific element, the script is always placed after, or within the window onload event.

    Script like this will cause error (on jQuery):

    <script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>

    Because when the script is parsed, #mydiv element is still not defined. Instead this would work:

    <div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>

    OR

    <script type="text/javascript">/* <![CDATA[ */
  $(window).ready(function(){
                    alert($("#mydiv").html());
                  });
/* ]]> */</script>
<div id="mydiv">Hello World</div>

    这篇关于网页的加载和执行顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆