讀《高效能 JavaScript》筆記 －”JS進階必讀“(第一章)
阿新 • • 發佈：2018-12-17
一， 載入和執行
1.0指令碼位置,由於 javaScript的阻塞特性，指令碼位置可以放在<body>標籤底部 ，以儘量減少整個頁面下載的影響。
<html> <head> <title>下載的js檔案 儘可能放在body標籤底部</title> <body> <p>hello world~</p> <--放在這裡--> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type="text/javascript" src="file3.js"></script> </body> </head> </html>
1.1 當然<script>標籤初始下載時會阻塞頁面渲染，合併指令碼，減少<script>標籤，無論外鏈檔案還是內嵌檔案都是如此。
<html> <head> <title>下載的js檔案 儘可能放在body標籤底部</title> <body> <p>hello world~</p> <--可用雅虎提供的合併處理器，以供通過他們的內容傳輸網路(CDN)來分發 Yahoo!User Interface（YUI）Library檔案 可以使用一個url來獲取任意數量的YUI檔案 --> <script type="text/javascript" src="http//yui.yahooapis.com/file1.js&file2.js&file3.js"></script> </body> </head> </html>
1.2 無阻塞的指令碼的祕笈在於，在頁面載入完後下載JavaScript程式碼。用專業術語來說，這意味著在window物件的load事件觸發後再下載指令碼。
1.3 延遲指令碼，Html4 為<script>標籤定義了一個擴充套件屬性：defer ,目標瀏覽器支援的話，也是一個有用的解決指令碼下載阻塞的方案，帶有defer屬性的JavaScript檔案下載的時，它不會阻塞瀏覽器的其他程序，因此這類檔案可以與頁面中的其他資源並行下載。
<html> <head> <title>script defer example</title> <body> <p>hello world~</p> <script defer>alert("defer")</script> <script>alert("script")</script> <script> window.onload=function(){ alert("load"); } </script> <p>支援defer的瀏覽器 列印結果順序為："script", "defer" ,"load" 注意!!! 帶有 defer的script標籤 是在onload執行之前呼叫 而不是跟著第二個後面</p> </body> </head> </html>
1.3動態指令碼元素，使用動態建立的<script>元素來下載並執行程式碼。
//下面的函式封裝來標準及IE特有的實現方法
//loader.js
function loadScript(url,callback){
var script = document.createElement("script")
script.type = "text/javascript";
if(script.readyState){//IE
script.onreadstatechange = function(){
if(script.readyState == "loaded"||script.readyState == "complete"){
script.onreadychange = null;
callback();
}
}
}else{//other 瀏覽器
script.onload = function(){
callback();
};
}
script.src=url;
document.getElemenByTagName("head")[0].appendChild(script);
}
//使用 單檔案
loadScript("file1.js",function(){
alert("File is loaded!!!")
})
//使用 多檔案
loadScript("file1.js",function(){
loadScript("file2.js",function(){
alert("All File is loaded!!!")
})
})1.4 XMLHttpRequest 指令碼注入
var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange=function(){
if(xhr.readystate == 4){
if(xhr.states >= 200 && xhr.states <300 || xhr.states == 304){
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responeText;
document.body.appendChild(script);
}
}
}
xhr.send(null);1.5向頁面新增大量的JavaScript程式碼只需要兩步1.新增動態載入所需的程式碼 2.載入初始化頁面所需要的剩下程式碼
//放在<body>標籤閉合之前 loader.js 上面1.3處程式碼
<script type="text/javascript" src="loader.js"></script> //步驟一
<script type="text/javascript" >//步驟二
loadScript("the-rest.js",funciton(){
application.init();
})
</script>