发表新帖
发表新帖

Load and execution sequence of a web page?

前端 未结
关注
7 2057
盖世英雄少女心
盖世英雄少女心 2020-11-22 03:15

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

相关标签:
7条回答
  • 不要未来只要你来
    2020-11-22 04:20

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题