<font id="vh7td"></font>

      <rp id="vh7td"></rp>

      <address id="vh7td"></address>
      <em id="vh7td"><i id="vh7td"></i></em>

          <mark id="vh7td"><noframes id="vh7td">
          <font id="vh7td"></font>
            新聞建站cms系統、政府cms系統定制開發

            廣州網站建設公司-閱速公司

            asp.net新聞發布系統、報紙數字報系統方案
            /
            http://www.goldexpectations.com/
            廣州網站建設公司
            您當前位置:首頁>網站技術

            網站技術

            異步加載javascript腳本的幾種方式(async)

            發布時間:2017/7/3 12:30:29  作者:Admin  閱讀:382  

            廣告:阿里云采購優惠專區

            如果在head或者body的前面放入過多的script標簽,并且內容很多的時候,會造成頁面在解析完所有script標簽的內容前有短暫的時間整個頁面空白,給用戶的體驗會很差。但是如果所有的腳本都放在底部,又會造成dom加載完畢后有一段時間頁面雖然能看到,但是和用戶的交互卻很差,因此需要讓一些腳本與頁面異步加載。

            1.在html5中,script新增了async的屬性,script添加了該屬性之后,下載腳本時將可以與頁面其他內容并行下載,但是該屬性必須在ie9以上的瀏覽器中才可以使用,并且只能用于加載外部js腳本。

            <script async src="siteScript.js" onload="myInit()"></script>

            onload 在microsft edge和ihphone手機瀏覽器不支持,myinit事件最好寫在 siteScripts.js里面。不然會導致不同步出錯。

            正確:<script async src="siteScript.js" ></script>

            2.同樣,在html4中也有一個defer屬性,該屬性的兼容性更好一點,但是與async一樣,可以讓js腳本實現異步加載,同樣只能用于加載外部js腳本。

            顯示的順序為:normal defer window.onload

            3.利用XHR異步加載js內容并執行,代碼如下

            <script>

            var xhr = new XMLHttpRequest();

            xhr.open("get", "js/defer.js",true)

            xhr.send();

            xhr.onreadystatechange = function() {

            if (xhr.readyState == 4 && xhr.status == 200) {

            eval(xhr.responseText);

            }

            }

            </script>

            4.動態創建script標簽,主要代碼如下

            var script = document.createElement("script");

            script.src = "js/test.js";

            document.head.appendChild(script);

            5.iframe方式,利用iframe加載一個同源的子頁面,讓子頁面內的js影響當前父頁面的一種方式。

            html5代碼標準檢驗

            http://validator.w3.org/

            http://html5test.com/

            說明:

            1. js文件放在html頁面底部,則不影響頁面顯示和圖片下載,但是js事件要等到底部js下載完才會加載。

            2. js文件放在head之間,則影響頁面顯示和圖片顯示,打開空白,要等js下載完才會加載文字和圖片。

            廣告:阿里云新人采購專場

            相關文章
            異步
            async
            cms新聞系統購買咨詢
            掃描關注 廣州閱速軟件科技有限公司
            掃描關注 廣州閱速科技
            青娱乐极品视觉盛宴国产视频_精品人妻少妇一区二区_禁断の肉体乱爱中文字幕_国产日本卡二卡三卡四卡

            <font id="vh7td"></font>

                <rp id="vh7td"></rp>

                <address id="vh7td"></address>
                <em id="vh7td"><i id="vh7td"></i></em>

                    <mark id="vh7td"><noframes id="vh7td">
                    <font id="vh7td"></font>