Analyser l'ordre dans lequel les navigateurs exécutent le chargement des scripts JavaScript et les compétences d'exécution du code_javascript

Cet article s'appuie principalement sur plusieurs manières d'introduire JavaScript dans les pages HTML, en analysant l'ordre d'exécution des scripts JavaScript en HTML

1. Concernant la nature bloquante de l'exécution du script JavaScript

JavaScript a des caractéristiques de blocage lorsqu'il est analysé et exécuté dans le navigateur. C'est-à-dire que lorsque le code JavaScript est exécuté, l'analyse, le rendu et le téléchargement des autres ressources doivent s'arrêter et attendre la fin du script①. Ceci n'est pas controversé et le comportement est cohérent dans tous les navigateurs. La raison n'est pas difficile à comprendre : le navigateur a besoin d'une structure DOM stable, et JavaScript peut modifier le DOM (changer la structure du DOM ou modifier un certain nœud DOM), si le l'analyse de la page continue pendant l'exécution de JavaScript, l'ensemble du processus d'analyse deviendra difficile à contrôler et la possibilité d'erreurs d'analyse deviendra également très élevée.

Cependant, il y a un autre problème qui mérite attention ici. Pour les scripts externes, cela implique également un processus de téléchargement de script. Dans les premiers navigateurs, le téléchargement de fichiers JavaScript bloquait non seulement l'analyse de la page, mais bloquait même d'autres ressources. sur la page Téléchargements (y compris d'autres fichiers de script JavaScript, des fichiers CSS externes et des ressources externes telles que des images). À partir d'IE8, Firefox3.5, Safari4 et Chrome2, le téléchargement parallèle de JavaScript est autorisé. Dans le même temps, le téléchargement de fichiers JavaScript ne bloquera pas le téléchargement d'autres ressources (dans les anciennes versions, le téléchargement de fichiers JavaScript bloquera également). le téléchargement d'autres ressources).

Remarque : différents navigateurs ont des restrictions différentes sur le nombre maximum de connexions sous le même nom de domaine. L'exigence de la spécification du protocole HTTP1.1 est qu'il ne peut pas être supérieur à 2, mais la plupart des navigateurs fournissent actuellement un nombre maximum de connexions. . Plus de 2, IE6/7 en ont tous deux 2, IE8 a été mis à niveau vers 6, Firefox et Chrome en ont également 6. Bien entendu, ce paramètre peut également être modifié. Pour plus de détails, veuillez vous référer à : http://. www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

2. À propos de l'ordre d'exécution du script

Les navigateurs analysent les pages dans l'ordre de haut en bas, donc dans des circonstances normales, l'ordre d'exécution des scripts JavaScript est également de haut en bas, c'est-à-dire que le code qui apparaît en premier sur la page ou le code qui est introduit en premier est toujours exécuté en premier, même lorsque le téléchargement parallèle de fichiers JavaScript est autorisé. Notez que nous avons marqué ici « dans des circonstances normales » en rouge. Quelle en est la raison ? Nous savons qu'il existe de nombreuses façons d'ajouter du code JavaScript au HTML, qui sont résumées comme suit (quels que soient les chargeurs de modules tels que requirejs ou seajs) :

(1) Introduction normale : c'est-à-dire introduire du code de script ou introduire des scripts externes via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

(2) Écrivez des balises ou des codes 3f1c4e4b6b16bbbd69b2ee476dc4f83a sur la page via la méthode document.write

(3) Grâce à la technologie de script dynamique, c'est-à-dire en utilisant l'interface DOM pour créer un élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, en définissant le src de l'élément, puis en ajoutant l'élément au DOM.

(4) Obtenez le contenu du script via Ajax, puis créez l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, définissez le texte de l'élément, puis ajoutez l'élément au DOM.

(5) Écrivez du code JavaScript directement dans le gestionnaire d'événements de l'élément ou directement comme corps de l'URL. L'exemple est le suivant :

.

<!--直接写在元素的事件处理程序中-->
<input type="button" value="点击测试一下" onclick="alert('点击了按钮')"/>
<!--作为URL的主体-->
<a href="javascript:alert('dd')">JS脚本作为URL的主体</a> 

Le cinquième cas n'a aucun impact sur l'ordre d'exécution du script dont nous discutons, nous n'abordons donc ici que les quatre premiers cas :

2.1 Lors de l'introduction normale du script

Lorsqu'un script est normalement introduit, le code JavaScript sera exécuté de haut en bas. Que le script soit téléchargé en parallèle ou non, il sera toujours exécuté de haut en bas dans l'ordre d'introduction. DEMO à titre d'exemple :

Tout d'abord, écrivez un script via PHP. Ce script reçoit deux paramètres, l'URL du fichier et le délai. Le script enverra le contenu du fichier au navigateur après le délai entrant. Le script est le suivant :

<&#63;php
$url = $_GET['url'];
$delay = $_GET['delay'];
if(isset($delay)){
sleep($delay);
}
echo file_get_contents($url);
&#63;> 

De plus, nous avons également défini deux fichiers JavaScript, à savoir 1.js et 2.js. Dans cet exemple, les codes des deux sont les suivants :

1.js

alert("Je suis le premier script");

2.js

alert("Je suis le deuxième script");

Ensuite, nous introduisons le code du script en HTML :

<script src='/delayfile.php&#63;url=http://localhost/js/load/1.js&delay=3' type='text/javascript'></script>
<script type="text/javascript">
alert("我是内部脚本");
</script>
<script src='/delayfile.php&#63;url=http://localhost/js/load/2.js&delay=1' type='text/javascript'></script> 

虽然第一个脚本延迟了3秒才会返回，但是在所有浏览器中，弹出的顺序也都是相同的，即："我是第一个脚本"->"我是内部脚本"->"我是第二个脚本"

2.2 通过document.write向页面中写入脚本时

document.write在文档流没有关闭的情况下，会将内容写入脚本所在位置结束之后紧邻的位置，浏览器执行完当前短的代码，会接着解析document.write所写入的内容。

注：document.write写入内容的位置还存在一个问题，加入在93f0f5c25f18dab9d176bd4f6de5d30e内部的脚本中写入了93f0f5c25f18dab9d176bd4f6de5d30e标签内部不应该出现的内容，比如dc6dce4a544fdca2df29d5ac0ea9906b等内容标签等，则这段内容的起始位置将是6c04bd5ca3fcae76e30b72ad730ca86d标签的起始位置。

通过document.write写入脚本时存在一些问题，需要分类进行说明：

[1]同一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中通过document.write只写入外部脚本：

在这种情况下，外部脚本的执行顺序总是低于引入脚本的标签内的代码，并且按照引入的顺序来执行，我们修改HTML中的代码：

<script src='/delayfile.php&#63;url=http://localhost/js/load/1.js&delay=2' type='text/javascript'></script>
<script type="text/javascript">
document.write('<script type="text/javascript" src="/delayfile.php&#63;url=http://localhost/js/load/2.js"><\/script>');
document.write('<script type="text/javascript" src="/delayfile.php&#63;url=http://localhost/js/load/1.js"><\/script>');
alert("我是内部脚本");
</script> 

这段代码执行完毕之后，DOM将被修改为：

而代码执行的结果也符合DOM中脚本的顺序："我是第一个脚本"->"我是内部脚本"->"我是第二个脚本"->"我是第一个脚本"

[2]同一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中通过document.write只写入内部脚本：

在这种情况下，通过documen.write写入的内部脚本，执行顺序的优先级与写入脚本标签内的代码相同，并且按照写入的先后顺序执行：

我们再修改HTML代码如下：

<script src='/delayfile.php&#63;url=http://localhost/js/load/1.js' type='text/javascript'></script>
<script type="text/javascript">
document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本")<\/script>');
alert("我是内部脚本");
document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本2222")<\/script>');
document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本3333")<\/script>');
</script> 

在这种情况下，document.write写入的脚本被认为与写入位置处的代码优先级相同，因此在所有浏览器中，弹出框的顺序均为："我是第一个脚本"->"我是document.write写入的内部脚本"->"我是内部脚本"->"我是document.write写入的内部脚本2222"->"我是document.write写入的内部脚本3333"

[3]同一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中通过document.write同时写入内部脚本和外部脚本时：

在这种情况下，不同的浏览器中存在一些区别：

在IE9及以下的浏览器中：只要是通过document.write写入的内部脚本，其优先级总是高于document.write写入的外部脚本，并且优先级与写入标签内的代码相同。而通过通过document.write写入的外部脚本，则总是在写入标签的代码执行完毕后，再按照写入的顺序执行；

而在其中浏览器中， 出现在第一个document.write写入的外部脚本之前的内部脚本，执行顺序的优先级与写入标签内的脚本优先级相同，而之后写入的脚本代码，不管是内部脚本还是外部脚本，总是要等到写入标签内的脚本执行完毕后，再按照写入的顺序执行。

我们修改以下HTML中的代码：

<script src='/delayfile.php&#63;url=http://localhost/js/load/1.js' type='text/javascript'></script><script type="text/javascript"> document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本")<\/script>'); alert("我是内部脚本"); document.write('<script type="text/javascript" src="/delayfile.php&#63;url=http://localhost/js/load/1.js"><\/script>'); document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本2222")<\/script>'); document.write('<script type="text/javascript" src="/delayfile.php&#63;url=http://localhost/js/load/1.js"><\/script>'); document.write('<script type="text/javascript">alert("我是docment.write写入的内部脚本3333")<\/script>'); alert("我是内部脚本2222");</script> 

在IE9及以下的浏览器中，上面代码执行后弹出的内容为："我是第一个脚本"->"我是document.write写入的内部脚本"->"我是内部脚本"->"我是document.write写入的内部脚本2222"->"我是document.write写入的内部脚本3333"->"我是内部脚本2222"->"我是第一个脚本"->"我是第一个脚本"

其他浏览器中，代码执行后弹出的内容为："我是第一个脚本"->"我是document.write写入的内部脚本"->"我是内部脚本"->"我是内部脚本2222"->"我是第一个脚本"->"我是document.write写入的内部脚本2222"->"我是第一个脚本"->"我是document.write写入的内部脚本3333"

如果希望IE及以下的浏览器与其他浏览器保持一致的行为，那么可选的做法就是把引入内部脚本的代码拿出来，单独放在后面一个新的3f1c4e4b6b16bbbd69b2ee476dc4f83a标签内即可，因为后面3f1c4e4b6b16bbbd69b2ee476dc4f83a标签中通过document.write所引入的代码执行顺序肯定是在之前的标签中的代码的后面的。

2.3 通过动态脚本技术添加代码时

通过动态脚本技术添加代码的主要目的在于创建无阻塞脚本，因为通过动态脚本技术添加的代码不会立刻执行，我们可以通过下面的load函数为页面添加动态脚本：

function loadScript(url,callback){
var script = document.createElement("script");
script.type = "text/javascript";
//绑定加载完毕的事件
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState === "loaded" || script.readyState === "complete"){
callback&&callback();
}
}
}else{
script.onload = function(){
callback&&callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

但是通过动态脚本技术添加的外部JavaScript脚本不保证按照添加的顺序执行，这一点可以通过回调或者使用jQuery的html()方法，详细可参考：http://www.jb51.net/article/26446.htm

2.4 通过Ajax注入脚本

通过Ajax注入脚本同样也是添加无阻塞脚本的技术之一，我们首先需要创建一个XMLHttpRequest对象，并且实现get方法，然后通过get方法取得脚本内容并注入到文档中。

代码示例：

我们可以用如下代码封装XMLHttpRequest对象，并封装其get方法：

var xhr = (function(){
function createXhr(){
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
var xhrVersions = ['MSXML2.XMLHttp','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.6.0'], i, len;
for(i = 0, len = xhrVersions.length; i < len ; i++){
try{
xhr = new ActiveXObject(xhrVersions[i]);
}catch(e){
}
}
}else{
throw new Error("无法创建xhr对象");
}
return xhr;
}
function get(url,async,callback){
var xhr = createXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
callback&&callback(xhr.responseText);
}else{
alert("请求失败，错误码为" + xhr.status);
}
}
}
xhr.open("get",url,async);
xhr.send(null);
}
return {
get:get
}
}()) 

然后基于xhr对象，再创建loadXhrScript函数：

function loadXhrScript(url,async, callback){ if(async == undefined){ async = true; } xhr.get(url,async,function(text){ var script = document.createElement("script"); script.type = "text/javascript"; script.text = text; document.body.appendChild(script); });} 

我们上面的get方法添加了一个参数，即是否异步，那么如果我们采用同步方法，通过Ajax注入的脚本肯定是按照添加的顺序执行；反之，如果我们采用异步的方案，那么添加的脚本的执行顺序肯定是无法确定的。