? 這不就是直接執行script腳本嗎？</p><p>以前的我這有認為，但是今天卻知道了他的奧秘。他並沒有表面的那麼簡單。</p><p>屬性</p><p><script>擁有7個屬性，沒想到吧！</p><ul><li>asyncboolean異步執行該腳本，但不保證按照指定它們的先後順序執行</li></ul><ul><li>deferboolean通知瀏覽器該腳本將在文檔完成解析後遇到</html>，並會按照它們出現的先後順序執行。但會在觸發 DOMContentLoaded 事件前執行。</li></ul><ul><li>integrity包含用戶代理可用於驗證已提取資源是否已無意外操作的內聯元數據</li></ul><ul><li>srctypetextcrossorigin使那些將靜態資源放在另外一個域名的站點打印錯誤信息,就是將跨域報錯變為同源報錯</li></ul><blockquote><p>在XHTML文檔中，要把async屬性設置為 async = "async", defer = "defer"</p></blockquote><p>知道了那幾個屬性接下來，來看看下面這個圖：</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/15401716781101458612cee" img_width="720" img_height="732" style="height:732px" alt="淺談Script標籤" inline="0"><p class="pgc-img-caption"></p></div><ol><li>第一個光禿禿的<script>說明了，在html解析中，如果有<script>的話，html會在Script下載並且執行的時候，暫停解析。</li><li>第二個帶async屬性的<script>，如圖所示，也就是他下載Script的時候是異步的，但是隻要Script文件下好了，那麼就馬上執行。</li><li>第三個帶defer屬性的<script>，其實和上面帶async屬性一樣都是異步執行去下載Script文件的。但是在這個帶有defer的則是在html全部解析完畢之後才去執行Script文件。而且它是按照加載順序執行腳本的，這一點要善加利用。顯然 defer 是最接近我們對於應用腳本加載和執行的要求的</li></ol><p>使用動態創建的<script>標籤元素來下載並執行代碼</p><pre>var script = document.createElement('script');<br>script.type = "text/javascript";<br>script.src = "file1.js";<br>document.getElementByTagName("head")[0].appendChild(script);<br></pre><p>這個技術的重點在於：</p><p>無論何時啟動下載，文件的下載和執行過程不會阻塞頁面其他進程。</p><p>參考：</p><blockquote><p>《高性能JavaScript》</p></blockquote><p>使用XHR對象下載JS代碼注入頁面</p><pre>function loadScript(url, callback){<br> var script = document.createElement(<br>"e");<br> script.type = "text/javascript";<br> if(script.readyState){ //ie<br> script.onreadystatechange = function(){<br> if(script.readyState == "loaded" || script.readyState == "complete"){<br> script.onreadystatechage = null;<br> callback();<br> }<br> };<br> } else {<br> script.onload = function(){<br> callback();<br> }<br> }<br>}<br>loadScript("the-rest.js", function(){<br> Application.init()<br>});<br></pre><p>這樣做實現了動態創建標籤元素並下載，其次當第二個腳本文件下載時，應用所需的所有DOM結構已經創建完畢，並做好了交互的準備,從而避免了需要另一個事件來檢測頁面是否準備好。</p><div class="pgc-img"><img src="http://p99.pstatp.com/large/pgc-image/1540171715945334bd0a18e" img_width="1280" img_height="1002" alt="淺談Script標籤" inline="0"><p class="pgc-img-caption"></p></div><p>https://zhuanlan.zhihu.com/p/35239152</p></div>
閱讀更多 前端小學生 的文章
