让你掌握HTML及資源是怎样载入的

2021-03-22 06:47 jianzhan

本blog全部內容选用 Creative Commons Licenses 批准应用. 引入本內容时,请保存 朱涛出处 ,而且 非商业服务 .

引进

进行了若干个根据WEB的新项目, 也掌握了从前端开发的js,css,html到后端开发python/php等, 2者怎样互动, 最后访问器怎样实行, 这些在内心也早已很确立了. 但是1个难题1直缭绕在心中,那便是:

1个html有若干个外界資源(js,css,flash,image等),这些恳求是什么时候免费下载的,又是什么时候实行的?

不清晰,不搞清楚, 因此也就不知道道我写的js到底什么时候实行的, 也就不知道道为何许多高特性的提议是要将js置于1个 html底端</body>以前.

假如你也并不是很确立,请来和我1起学习培训吧.

实际剖析

最先大家看来1个示例的html网页页面,以下:

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

它有以下几种資源:

  1. 3个外界js文档,1个inline js编码
  2. 1个外界css文档, 1个inline css编码
  3. 1个image文档,及1个js恳求的image

一共是6个http request.

在剖析以前,大家看来看firefox对这个html恳求的結果, 以下图:

大家再看看chrome(linux)对这个html的恳求結果,以下图(图较为小,能够在新标识中开启):

大家先剖析下,随后再去表明这2种恳求結果的不一样.

恳求剖析

最先表明下面这些叙述关键是根据自身google, 资询盆友和在 SO 和 IRC 上得到, 我并沒有阅读文章有关的spec(自然我很想阅读文章,假如了解有关spec的盆友请留言感谢), 不可以确保其正确性和精确性,风险性自担 :D.

根据有关的调查, 我的了解为, 针对1个URI恳求, 访问器会依照下面的恳求和实行次序开展:

  1. 1个进程对DOM开展免费下载(也便是html, 而不去管html中的外界資源)
  2. 此外1个进程会刚开始剖析早已免费下载的DOM, 并刚开始免费下载在其中的外界資源(如js, css, image等)
  3. 第3个进程(假如有的话)会去免费下载2正在免费下载的之外的外界資源
  4. 假如容许更多的联接, 更多的进程会再次免费下载其它資源

1个恳求能够另外有是多少个connection(进程), 取决于不一样的访问器, http1.1 规范中要求的是针对同1个server/proxy(也便是hostname) 不超出2个connection, 可是在具体的访问器完成中, 实际以下:

Firefox 2: 2
Firefox 3: 6
Opera 9.26: 4
Opera 9.5 beta: 4
Safari 3.0.4 Mac/Windows: 4
IE 7: 2
IE 8: 6

因此请依据这个具体状况来思索上面的免费下载次序.

随后大家看实行次序(js的实行, css的运用等):

  1. 要是访问器"看到了"了js编码,它就会实行
  2. 访问器是从下到下,1行1行地实行
  3. 假如js编码坐落于1个涵数或目标中,则仅有当涵数或目标被启用时才会实行
  4. 而所谓的direct code(不处在涵数或目标中的编码),则会从上到下次序实行
  5. 当css文档免费下载进行时, 相应的款式也会运用到DOM上
  6. onload或jquery的$(document).ready()是在DOM免费下载进行后实行

在具体的访问器中, 1般遇到<script>标识会全自动block住其它进程的免费下载, 如firefox, 这也是为何 在web开发设计中经常强烈推荐将<script>标识置于</body>以前的缘故.

可是并不是全部的访问器都block, 如chrome其实不会block住其它的connection. 因此实际的load还必须参照实际的访问器完成.

提议, 将<script></script>标识置于</body>以前, 这样能够在大多数数状况下都获得较好的特性.

对Firefox和chrome的恳求剖析

大家转过头看来下上面2个图中的恳求回应图.

Firefox

有以下特点:

  1. 最先免费下载html
  2. html免费下载进行后, 从上到下先后免费下载外界文档(js, css,img)
  3. js会block其它外界文档的免费下载
  4. 其它文档会并行处理免费下载

chrome

有以下特点:

  1. 最先免费下载html
  2. 从上到下先后免费下载外界文档(js,css,img)
  3. 各个資源的免费下载次序是并行处理的

你将会会怪异假如js能够并行处理免费下载,那末将会坐落于DOM下面的编码会先实行, 最先能够毫无疑问的是 即便下面的js先进行免费下载,也不容易危害到总体的从上到下的实行次序,访问器会维护保养这类次序的关联, chrome的这类方法也是将来访问器的1种发展趋势, 而这也是为何chrome可以更快的缘故之1.

成心思的1个插曲

在提出这个难题后,我便多方下手, 向盆友资询, 向 SO 提出难题, 乃至去Firefox的 IRC 开展了发问,

回应的盆友还全是很细心的, 但是, 她们大多数向我问了1个难题 做WEB开发设计, 你为何要掌握这些细节.

针对这样的难题,我還是较为疑惑的, 我1直觉得 1个好的程序流程员,不但必须了解how, 还要了解what, 乃至why,

了解how,只表明你是1个达标的码工,只会简易地应用他人出示的物品来开发设计.

了解what, 表明你刚开始去关心身后是怎样完成的, 伴随着時间推动, 这时候候你会慢慢变成1个有工作经验的程序流程员.

了解why, 表明你刚开始向hacker的路迈入了, 刚开始逐渐走向了技术性牛人的线路了,长久以往你会有很大的发展的. 参照 How To Become A Hacker.

让大家去享有细节,实质的开心吧,而并不是只滞留在我会的层面那末表层的开心.

结果

访问器是各大厂商占领的销售市场,不管是独立(Firefox, chrome, IE, Opera, Safari)或根据1定的核心(畅游, 搜狗搜索, TT, 360等), 可是能够毫无疑问的是访问器会更为强劲, 遵循标准, 更快的回应等, 而大家WEB程序流程员的生活也会好过许多.

本文一部分细节還是较为模棱两可, 后边将会还会在写1篇文章内容来开展更完全,清楚的表明.

欢迎探讨.

续篇

这次是甘愿血本了, 以前累积了快400的 SO reputation score, 1下压出去了150个来找寻最令人满意的回答.

实际大伙儿能够参照:

Load and execution sequence of a web page?

帖子中有较详尽的回应,能够做为参照.

参照材料

  1. Load and execution sequence of a web page?
  2. JavaScript DOM load events, execution sequence, and $(document).ready()
  3. JavaScript Execution Order
  4. Newbie - when is the CSS applied?
pdf版装包免费下载