巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

让你领会HTML及资本是若何加载的

一佰互联网站开辟设想(www.taishanly.com) 宣布日期 2020-04-22 10:10:30 阅读数: 129

本博客一切内容接纳 Creative Commons Licenses 许可利用. 援用本内容时,请保留 朱涛来由 ,并且 非贸易 .

引入

完成了几多个基于WEB的名目, 也领会了畴前真个js,css,html到后端python/php等, 两者若何交互, 终究阅读器若何履行, 这些在内心也已很大白了. 不过一个题目一向缭绕在心中,那便是:

一个html有几多个内部资本(js,css,flash,image等),这些要求是甚么时辰下载的,又是甚么时辰履行的?

不清楚,不大白, 以是也就不晓得我写的js事实甚么时辰履行的, 也就不晓得为甚么良多高机能的倡议是要将js置于一个 html底真个</body>之前.

若是你也不是很大白,请来和我一路进修吧.

具体阐发

起首咱们来看一个示例的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.

基于相干的调研, 我的懂得为, 对一个URI要求, 阅读器会按照上面的要求和履行挨次停止:

  1. 一个线程对DOM停止下载(也便是html, 而不去管html中的内部资本)
  2. 别的一个线程会起头阐发已下载的DOM, 并起头下载此中的内部资本(如js, css, image等)
  3. 第三个线程(若是有的话)会去下载2正鄙人载的之外的内部资本
  4. 若是许可更多的毗连, 更多的线程会持续下载别的资本

一个要求能够或许或许同时有几多个connection(线程), 取决于差别的阅读器, http1.1 规范中划定的是对统一个server/proxy(也便是hostname) 不跨越2个connection, 可是在现实的阅读器完成中, 具体以下:

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

以是请按照这个现实环境来思虑上面的下载挨次.

而后咱们看履行挨次(js的履行, css的利用等):

  1. 只需阅读器"看到了"了js代码,它就会履行
  2. 阅读器是从下到下,一行一行地履行
  3. 若是js代码位于一个函数或东西中,则只要当函数或东西被挪用时才会履行
  4. 而所谓的direct code(不处于函数或东西中的代码),则会从上到下挨次履行
  5. 当css文件下载完成时, 呼应的款式也会利用到DOM上
  6. onload或jquery的$(document).ready()是在DOM下载完成后履行

在现实的阅读器中, 普通碰到<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的这类体例也是将来阅读器的一种趋向, 而这也是为甚么chrome能够或许或许更快的缘由之一.

成心思的一个插曲

在提出这个题目后,我便多方动手, 向伴侣征询, 向 SO 提出题目, 乃至去Firefox的 IRC 停止了发问,

回覆的伴侣还都是很耐烦的, 不过, 他们大多向我问了一个题目 做WEB开辟, 你为甚么要领会这些细节.

对如许的题目,我仍是比拟疑惑的, 我一向以为 一个好的法式员,不只须要晓得how, 还要晓得what, 乃至why,

晓得how,只申明你是一个及格的码工,只会简略地利用别人供给的东西来开辟.

晓得what, 申明你起头去存眷面前是若何完成的, 跟着时辰推动, 这时辰你会慢慢成为一个有经历的法式员.

晓得why, 申明你起头向hacker的路迈进了, 起头慢慢走向了手艺牛人的线路了,久而久之你会有很大的生长的. 参考 How To Become A Hacker.

让咱们去享用细节,实质的欢愉吧,而不是只逗留在我会的层面那末外表的欢愉.

论断

阅读器是各大厂商抢占的市场,不管是自立(Firefox, chrome, IE, Opera, Safari)或基于必然的内核(漫游, 搜狗, TT, 360等), 可是能够或许或许必定的是阅读器会加倍壮大, 遵照规范, 更快的呼应等, 而咱们WEB法式员的日子也会好过良多.

本文局部细节仍是比拟迷糊, 前面能够或许或许还会在写一篇文章来停止更完全,清楚的申明.

接待会商.

跋文

此次是不惜血本了, 之前堆集了快400的 SO reputation score, 一下压进来了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版打包下载
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

02
05月
KeyCDN的收费CDN加快办事利用全攻略

KeyCDN是外洋一家以供给静态文件CDN加快的办事商,CDN加快首要包含两品种似:Push 和 Pull。Push是存储空间,你能够或许或许利用F... >>概况

08
05月
浅析企业营销型网站扶植

在中小型企业的网站扶植之路上,由于广州网站扶植资金、气力等的差异,不能够或许或许与大型企业比拟,是以,他们在成立本身的营销型网站扶植时,常常会挑选智... >>概况

18
04月
小内存VPS利用优化杂记

初尝自从本年年头起头测验考试利用 VPS 后,就喜好上了这个折腾。在 VPS 的折腾路上用了很多多少个 VPS 供给商,根基都是 256 M内存的 ... >>概况

17
05月
“敬业福”速抢攻略,我已分解五福啦,并且第

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站