控制台十个文件执行顺序是:one.jsp、three.jsp、two.jsp、four.jsp、five.jsp、six.jsp、sevent.jsp、eight.jsp、nine.jsp、websocket.jsp、DOMContentLoaded事件。
从上述结果可以看出,IE和火狐对待async标签的方式差不多,不同的一点是,IE中async标签与chrome中一样,并不是按照下载完成顺序执行。再来看看IE会不会阻塞async标签的加载,修改index.jsp文件:
控制台十个文件执行顺序是:one.jsp、two.jsp、three.jsp、four.jsp、five.jsp、six.jsp、eight.jsp、seven.jsp、nine.jsp、websocket.jsp、DOMContentLoaded事件。
从结果可以看出,IE中正常标签同样阻塞了async标签的加载。async标签同样不按加载完成顺序执行。
总结一下,三个浏览器最大并发数为6。在chrome中先全部加载正常标签再加载defer和async标签(但正常标签加载的阻塞可能会阻塞其他标签的加载),同时,defer标签在DOMContentLoaded事件前执行,且按照script标签在文档中出现的顺序执行,async标签加载完毕就可能执行,不会等待正常标签的执行,无论是在DOMContentLoaded事件之前还是之后,且执行顺序与async标签加载完成先后顺序无关。除此之外,在chrome中在请求并发数没达到最大并发数时,所有标签都不会阻塞其他标签的加载。在火狐中,所有标签都是并发加载,正常标签不会阻塞defer标签和async标签的加载,但是defer标签会在正常标签执行完毕后再按在文档中出现的顺序执行。async标签则是加载完毕后就执行,而不会等待正常 script标签的执行,同时他们的加载顺序与他们在文档中出现的顺序也没关系。在IE中,正常标签加载的阻塞会阻塞其他在文档中出现在它后面的script标签的加载,无论是正常标签还是defer和async标签。defer和async标签加载的阻塞不会阻塞其他在文档中出现在它后面的script标签的加载,无论是正常标签还是defer和async标签。defer标签会推迟到正常标签执行完毕后再按在文档中出现的顺序执行,并且async标签的执行并不是按照其加载完成先后顺序,async标签的执行与chrome一样,无序可寻。无论是在火狐还是IE或者chrome中,defer和async标签都可以在DOMContentLoaded事件前执行,但只有async标签可以在DOMContentLoaded事件后执行。简单来讲,async标签加载完成后就可能执行且执行可能无序,而不会等待其他标签的执行,而defer则是加载完成后需要等待正常标签执行完毕后才会执行。defer标签和正常标签一定会在DOMContentLoaded事件之前执行完毕,而async标签可能会在DOMContentLoaded事件之前或之后执行。关于defer和async与DOMContentLoaded事件的关系,留待下一篇文章详细探讨。
下面的一段话摘取某篇博文:
Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.
摘自
http://w3c.github.io/html/semantics-scripting.html#data-block
:
The async and defer attributes are
boolean attributes
that indicate how the script should be executed.
Classic scripts
may specify
defer
or
async
;
module scripts
may specify
async
.
There are several possible modes that can be selected using these attributes, and depending on the script’s
type
.
For
classic scripts
, if the
async
attribute is present, then the classic script will be fetched
in parallel
to parsing and evaluated as soon as it is available (potentially before parsing completes). If the
async
attribute is not present but the
defer
attribute is present, then the
classic script
will be fetched
in parallel
and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
For
module scripts
, if the
async
attribute is present, then the module script and all its dependencies will be fetched
in parallel
to parsing, and the module script will be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the module script and its dependencies will be fetched
in parallel
to parsing and evaluated when the page has finished parsing. (The
defer
attribute has no effect on module scripts.)
classic script and module script:
The
script
element allows authors to include dynamic script and data blocks in their documents. The element does not
represent
content for the user.
The type attribute allows customization of the type of script represented :
Omitting the attribute, or setting it to a
JavaScript MIME type
, means that the script is a
classic script
, to be interpreted according to the JavaScript
Script
top-level production. Classic scripts are affected by the
charset
,
async
, and
defer
attributes. Authors should omit the attribute, instead of redundantly giving a
JavaScript MIME type
.
Setting the attribute to an
ASCII case-insensitive
match for the string "module" means that the script is a
module script
, to be interpreted according to the JavaScript
Module
top-level production. Module scripts are not affected by the
charset
and
defer
attributes.
Setting the attribute to any other value means that the script is a data block, which is not processed. None of the
script
attributes (except
type
itself) have any effect on
data blocks
. Authors must use a
valid MIME type
that is not a
JavaScript MIME type
to denote
data blocks
.
最后编辑于:2017-12-09 02:00