這篇文章主要介紹了關於Javascript載入的解析,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
1. 瀏覽器載入
(1) 同步載入
在網頁中,瀏覽器載入js檔案的方式是透過<script>標籤。如下所示:</script>
//内嵌脚本 <script type="text/javacript"> // code here! </script> //加载外部脚本 <script type="text/javascript src="path/demo.js"></script>
<script>標籤很方便,只要加入後,瀏覽器便可讀取並運行,但是在讀取的時候,瀏覽器是按照<script>標籤的出現順序,讀取Javascript文件,然後立即運行,導致在多個文件相互依賴的情況下,依賴性最小的文件必須放在最前面,依賴性最大的必須放在最後面,否則代碼會報錯,這一點,想必大家在使用bootstrap的時候都深有體會。另一方面,瀏覽器採用同步模式載入<script>標籤,也就是說,頁面會等待JavaScript檔案載入完成,然後再執行後面的程式碼。當存在很多<script>標籤時,瀏覽器無法同時讀取,必須讀完一個再讀取另一個,造成讀取時間大大延長,頁面回應緩慢,影響使用者體驗。同步模式又稱為阻塞模式,會阻止瀏覽器的後續處理,停止後續的解析,只有目前載入完成,才能進行下一步操作,所以預設同步執行才是安全的。但這樣如果js中有輸出document內容、修改DOM、重定向等行為,就會造成阻塞。所以一般建議把<script>標籤放在<body>結尾處,這樣能減少頁面阻斷。 </script>
(2)非同步載入
為了解決這個問題,ES5中採用了DOM方法,動態載入JavaScript腳本檔案。
function loadScript(url) { var script = document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); }
這種方式透過建立一個新的<script>標籤,並設定其src屬性,非同步讀取javacript檔案</script>
這樣不會造成頁面阻塞,但會有另一個問題,如果其他腳本檔案依賴它,此時無法保證此腳本何時能夠載入完畢。
另一種載入方式是利用defer和async屬性,讓腳本非同步載入。渲染引擎遇到這一行命令,就會開始下載外部腳本,但不會等它下載和執行,而是直接執行後面的命令。 defer和async的區別是: defer要等到整個頁面在內存中正常渲染結束(DOM結構完全生成,以及其他腳本執行完成),才會執行;async一旦下載完成,渲染引擎就會中斷渲染,執行這個腳本以後,再繼續渲染。即defer是渲染完再執行,async是下載完就執行。另外,如果有多個defer腳本,會按照它們在頁面中出現的順序加載,而多個async腳本是不能保證加載順序的。
IE9及以下版本在延遲實作上有一些相當糟糕的錯誤,導致執行順序無法保證。 如果你需要支援
<script></script> <script></script>
如何選用defer和async。如果使用的script是個模組,且不依賴任何其它script檔案時使用async;如果腳本依賴其它script或則被其它script依賴,就使用defer;倘若腳本檔案很小且被一個async script依賴,就使用內嵌script把該檔案放在所有async script前面。
另外一種方法是onload事件的非同步載入。
(function(){ if(window.attachEvent) { window.attachEvent("load", asyncLoad); } else if(window.addEventListener) { window.addEventListener("load", asyncLoad); } else { window.onload = asyncLoad; } var asyncLoad = function() { var script = document.createElement("script"); script.type="text/javascript"; script.async = true; script.src = ('https:'==document.location.protocol ? 'https://ssl' : 'http:www') + '.baidu.com/demo.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); }; )();
這個方法是將插入script的方法放在一個函數裡面,然後放在window的onload方法裡面執行,這樣就解決了阻塞onload事件的觸發問題。
由於Javascript的動態性,還有很多非同步載入方法:XHR Injection、XHR eval、Script In Iframe、document.write("
var createXHR = function() { var obj; if(window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveObject("Microsoft.XMLHTTP"); return obj; }; var xhr = createXML(); xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { var script = document.createElement("script"); script.text = xhr.requestText; document.getElementsByTagName("head")[0].appendChild(script); } }
XHR eval(): 與XHR Injection對responseText的執行方式不同,直接把responseText放在eval()函式裡面執行。
var createXHR = function() { var obj; if(window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveObject("Microsoft.XMLHTTP"); return obj; }; var xhr = createXML(); xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { eval(xhr.responseText); $('#btn').click(function() { alert($(this).text()); }); } }
Script In Iframe: 在父視窗插入一個iframe元素,然後再iframe中執行載入JS的操作。
var insertJS = function(){ alert($); }; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window doc.open(); doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>"); doc.close();
2. 延遲載入
有些JS代码在某些情况下需要使用,并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块,页面初始化时只将事件处理程序添加到UI元素上,然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面,尽可能快地为用户提供目前需要的信息,其余部分的内容可以在用户浏览该页面时在后台载入。
JavaScript的加载分为两个部分:下载和执行脚本,异步加载只解决了下载的问题,但是代码在下载完成后就可能会立即执行,在执行过程中浏览器储与阻塞状态,响应不了任何需求。为了解决JavaScript延迟加载的问题,可以利用异步加载缓存起来,所以不会立即执行,然后在第一次需要的时候再执行。
第二部分内容的载入可以用创建动态脚本的形式:
window.onload = function() { var script = document.createElement("script"); script.type="text/javascript"; script.src="demo.js"; document.documentElement.firstChild.appendChild("script"); }
3. 按需加载
可以通过创建一个require方法,包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。
function require(file, callback) { var script = document.getElementsByTagName("script")[0]; var newjs = document.createElement("script"); newjs.onload= function() { callback(); }; newjs.src=file; script.parentNode.insertBefore(newjs, script); }
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是對於Javascript載入的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

將矩陣電影特效帶入你的網頁!這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效,只需選擇一張圖片,插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧,非常有趣! 工作原理 插件將圖片加載到畫布上,讀取像素和顏色值: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域,並利用jQuery計算每個區域的平均顏色。然後,使用

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫,它基於jQuery構建,並提供許多配置選項來設置輪播。 如今,圖片輪播已成為網站必備功能——一圖胜千言! 決定使用圖片輪播後,下一個問題是如何創建它。首先,您需要收集高質量、高分辨率的圖片。 接下來,您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計,因此使用此庫構建的輪播可以適應任何

核心要点 利用 JavaScript 增强结构化标记可以显著提升网页内容的可访问性和可维护性,同时减小文件大小。 JavaScript 可有效地用于为 HTML 元素动态添加功能,例如使用 cite 属性自动在块引用中插入引用链接。 将 JavaScript 与结构化标记集成,可以创建动态用户界面,例如无需页面刷新的选项卡面板。 确保 JavaScript 增强功能不会妨碍网页的基本功能至关重要;即使禁用 JavaScript,页面也应保持功能正常。 可以使用高级 JavaScript 技术(

數據集對於構建API模型和各種業務流程至關重要。這就是為什麼導入和導出CSV是經常需要的功能。在本教程中,您將學習如何在Angular中下載和導入CSV文件


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Dreamweaver Mac版
視覺化網頁開發工具

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Dreamweaver CS6
視覺化網頁開發工具

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版