Comment implémenter la synchronisation JS, l'asynchronisme et le chargement paresseux

Cette fois, je vais vous montrer comment implémenter la synchronisation JS, le chargement asynchrone et différé, et quelles sont les précautions pour implémenter la synchronisation JS, le chargement asynchrone et différé. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1 : Chargement synchrone

La méthode la plus couramment utilisée.

Le mode synchrone, également connu sous le nom de mode de blocage, empêchera le navigateur de procéder à un traitement ultérieur et arrêtera l'analyse ultérieure. Ce n'est que lorsque le chargement en cours sera terminé que l'étape suivante pourra être effectuée. Par conséquent, l’exécution synchrone est sécurisée par défaut. Mais s'il y a des actions telles que la sortie du contenu du document, la modification du DOM, la redirection, etc. dans js, cela entraînera une congestion des pages. Par conséquent, il est généralement recommandé de placer la balise à la fin de pour réduire autant que possible le blocage des pages.

2 : Chargement asynchrone

Le chargement asynchrone est également appelé chargement non bloquant. Pendant que le navigateur télécharge et exécute js, il continuera à traiter les pages suivantes. Il existe trois manières principales.

Méthode 1 : également appelée élément Script DOM

(function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild); })(); L'attribut est un nouveau support asynchrone en HTML5. Cette méthode est appelée méthode Script DOM Element. Google Analytics et Google+ Badge utilisent ce code de chargement asynchrone.

(function(){; var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); Cependant, cette méthode de chargement empêchera le déclenchement de l'événement onload avant la fin de l'exécution. Désormais, le code de nombreuses pages effectue un travail de rendu supplémentaire pendant le chargement, il bloquera donc toujours le processus d'initialisation. de quelques pages.

Méthode 2 : Chargement asynchrone lors du chargement

Remarque : La différence entre DOMContentLoaded et Load. Le premier est une fois que le document a été analysé et que les éléments DOM de la page sont disponibles, mais que les images, vidéos, audio et autres ressources de la page n'ont pas été chargées. La fonction est la même que l'événement ready dans jQuery ; la différence dans ce dernier cas est que toutes les ressources de la page ont été chargées.

Méthode 3 : Autres méthodes

En raison de la nature dynamique de JavaScript, il existe de nombreuses méthodes de chargement asynchrone : Injection XHR, Eval XHR, Script In Iframe , Attribut de report de script, document.write (balise de script).

Injection XHR (injection XHR) : obtenez du javascript via XMLHttpRequest, puis créez un élément de script à insérer dans la structure DOM. Une fois la requête ajax réussie, définissez script.text sur le texte de réponse renvoyé une fois la requête réussie.

//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var script = document.createElement("script"); script.text = xmlHttp.responseText; document.getElementsByTagName("head")[0].appendChild(script); } } XHR Eval : Différent de la façon dont XHR Injection exécute ResponseText, ResponseText est directement exécuté dans la fonction eval().

//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ eval(xmlHttp.responseText); //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来 $("#btn1").click(function(){ alert($(this).text()); }); } } Script dans Irame : insérez un élément iframe dans la fenêtre parent, puis chargez JS dans l'iframe.

var insertJS = function(){alert(2)}; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。 doc.open(); doc.write(" var insertJS = function(){}; "); doc.close(); GMail Mobile : le contenu JS dans l'industrie est commenté, il ne sera donc pas exécuté. Si nécessaire, récupérez le contenu du texte dans le script, supprimez les commentaires et appelez eval() pour l'exécuter. .

/* var ... */ Nouveaux attributs HTML5 : attributs asynchrones et différés Attributs différés : apparus dans IE4.0. Il n'y aura aucune modification document.write et dom dans le script de déclaration d'attribut defer. Le navigateur téléchargera en parallèle d'autres scripts avec des attributs defer. sans bloquer le traitement ultérieur de la page. Remarque : tous les scripts de report doivent être exécutés dans l'ordre.

Attribut async : nouvel attribut en HTML5. Le script sera exécuté dès que possible après le téléchargement. La fonction est la même que celle de différer, mais il n'y a aucune garantie que le script sera exécuté dans l'ordre. Ils se termineront avant l’événement onload.

Firefox 3.6, Opera 10.5, IE 9 et les derniers Chrome et Safari prennent tous en charge l'attribut async. Vous pouvez utiliser async et différer en même temps, afin que tous les IE après IE 4 prennent en charge le chargement asynchrone.

Sans l'attribut async, le script sera récupéré (téléchargé) et exécuté immédiatement, bloquant le traitement ultérieur du navigateur. S'il existe un attribut asynchrone, le script sera téléchargé et exécuté de manière asynchrone, tandis que le navigateur poursuivra le traitement ultérieur.

总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在 匿名函数 中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

三：延迟加载

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。

解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者 Object对象 加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。

1：模拟较长的下载时间：

利用thread让其sleep一段时间在执行下载操作。

2：模拟较长的JS代码执行时间

var start = Number(new Date()); while(start + 5000 > Number(new Date())){//执行JS} 这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！