So implementieren Sie JS-Synchronisation, Asynchronität und Lazy Loading

Dieses Mal zeige ich Ihnen, wie Sie die JS-Synchronisierung sowie das asynchrone und verzögerte Laden implementieren und welche Vorsichtsmaßnahmen es gibt, um die JS-Synchronisierung sowie das asynchrone und verzögerte Laden zu implementieren. Schauen wir uns die folgenden praktischen Fälle an .

1: Synchrones Laden

Die am häufigsten verwendete Methode.

Der synchrone Modus, auch Blockierungsmodus genannt, verhindert die nachfolgende Verarbeitung durch den Browser und stoppt die nachfolgende Analyse. Erst wenn der aktuelle Ladevorgang abgeschlossen ist, kann der nächste Schritt ausgeführt werden. Daher ist die synchrone Ausführung standardmäßig sicher. Wenn jedoch in js Aktionen wie das Ausgeben von Dokumentinhalten, das Ändern von DOM, Umleiten usw. ausgeführt werden, führt dies zu einer Überlastung der Seite. Daher wird generell empfohlen, das -Tag am Ende von zu platzieren, um die Seitenblockierung so weit wie möglich zu reduzieren.

2: Asynchrones Laden

Asynchrones Laden wird auch als nicht blockierendes Laden bezeichnet. Während der Browser js herunterlädt und ausführt, verarbeitet er nachfolgende Seiten weiter. Es gibt drei Hauptwege.

Methode 1: Auch Script-DOM-Element genannt

(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); })(); -Attribut ist eine neue asynchrone Unterstützung in HTML5. Diese Methode wird als Script DOM Element-Methode bezeichnet. Sowohl Google Analytics als auch Google+ Badge verwenden diesen asynchronen Ladecode.

(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); })(); Diese Lademethode verhindert jedoch, dass das Onload-Ereignis ausgelöst wird, bevor die Ausführung abgeschlossen ist. Jetzt führt der Code vieler Seiten während des Onloads auch zusätzliche Renderarbeiten aus, sodass die Initialisierungsverarbeitung weiterhin blockiert wird einige Seiten.

Methode 2: Asynchrones Laden während des Onloads

Hinweis: Der Unterschied zwischen DOMContentLoaded und Load. Ersteres geschieht, nachdem das Dokument analysiert wurde und die DOM-Elemente auf der Seite verfügbar sind, die Bilder, Videos, Audiodateien und anderen Ressourcen auf der Seite jedoch nicht geladen wurden. Die Funktion ist dieselbe wie das Ready-Ereignis in jQuery Der Unterschied besteht darin, dass alle Ressourcen auf der Seite geladen wurden.

Methode 3: Andere Methoden

Aufgrund der dynamischen Natur von JavaScript gibt es viele asynchrone Lademethoden: XHR-Injection, XHR-Eval, Script In Iframe , Skript-Defer-Attribut, document.write (Skript-Tag).

XHR-Injection (XHR-Injection): Rufen Sie Javascript über XMLHttpRequest ab und erstellen Sie dann ein Skriptelement zum Einfügen in die DOM-Struktur. Nachdem die Ajax-Anfrage erfolgreich war, setzen Sie script.text auf den Antworttext, der nach erfolgreicher Anfrage zurückgegeben wird.

//获取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: Anders als die XHR-Injection ResponseText ausführt, wird ResponseText direkt in der Funktion eval() ausgeführt.

//获取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()); }); } } Skript in Irame: Fügen Sie ein Iframe-Element in das übergeordnete Fenster ein und laden Sie dann JS in den 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: Der JS-Inhalt in der Branche ist kommentiert, daher wird er nicht ausgeführt. Rufen Sie bei Bedarf den Textinhalt im Skript ab, entfernen Sie die Kommentare und rufen Sie eval() zur Ausführung auf.

/* var ... */ HTML5 neue Attribute: Async- und Defer-Attribute Defer-Attribute: Erschienen in IE4.0. Im Defer-Attributdeklarationsskript werden keine Änderungen an document.write und dom vorgenommen. Der Browser lädt parallel andere Skripte mit Defer-Attributen herunter. ohne die weitere Verarbeitung der Seite zu blockieren. Hinweis: Alle Verzögerungsskripte müssen der Reihe nach ausgeführt werden.

asynchrones Attribut: neues Attribut in HTML5. Das Skript wird so schnell wie möglich nach dem Herunterladen ausgeführt. Die Funktion ist dieselbe wie „Defer“, es gibt jedoch keine Garantie dafür, dass das Skript in der richtigen Reihenfolge ausgeführt wird. Sie werden vor dem Onload-Ereignis abgeschlossen.

Firefox 3.6, Opera 10.5, IE 9 und das neueste Chrome und Safari unterstützen alle das Async-Attribut. Sie können Async und Defer gleichzeitig verwenden, sodass alle IE nach IE 4 asynchrones Laden unterstützen.

Ohne das Async-Attribut wird das Skript sofort abgerufen (heruntergeladen) und ausgeführt, wodurch die nachfolgende Verarbeitung durch den Browser blockiert wird. Wenn ein asynchrones Attribut vorhanden ist, wird das Skript heruntergeladen und asynchron ausgeführt, während der Browser die nachfolgende Verarbeitung fortsetzt.

总结： 对于支持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中文网其它相关文章！