Js的阻塞性 Javascript 在浏覽器中的性能問題，可能是最重要的可用性問題
Js的阻塞性 浏覽器用單一進程來處理UI進程和Js的執行
不管是內嵌的還是外鏈的，下載並立即執行 因為它有可能會修改頁面
頁面生存周期的概念 瀑布圖中看到了下載時間和executing time
在head中加入script 和link body加載到前不會輸出任何東西，因此會看到空白頁面
復制代碼 代碼如下:
<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>
頁面在到script時，不知道script裡會做什麼，所以必然阻塞，等它執行
Ie8 等浏覽器能並行下載多個js等資源,但是還是對下載圖片有影響
結論， 將腳本放在底部加載
組織腳本 目標 最小化遲延時間
問題
引用多個script文件 內嵌多個script標簽
每個http請求都會帶來性能上的開銷
緊跟在link 後的script 是個錯誤 它會等待css的加載，以求獲得最精准的描繪
結論:減少script標簽的數量
將多個js文件合並成一個，打包工具
yahoo的合並處理器
無阻塞的腳本 js傾向於阻止浏覽器的某些處理過程，如http請求處理和界面更新.這是最重要的性能問題。於是要減少js文件大小和限制http請求數
但是功能豐富與代碼量之間的矛盾， 合並成單個文件卻體積大會鎖死浏覽器一大段時間，於是我們需要逐步加載javascript文件
重點：在頁面加載完成後加載javascript文件
1、延遲加載腳本 defer 屬性
如果要下載的js文件不會進行dom操作,那麼defer屬性有很大的用處，它能讓文件並行下載，並不會立即執行，而會在onload事件後再執行,適用於任何script標簽
2、動態加載腳本 一個function
復制代碼 代碼如下:
function loadScript(url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
if(script.readyState) { //IE
script.onreadyStatechange = function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadyStatechange = null;
callback();
}
} else {
script.onload = function(){
callback();
}
}
}
這裡要注意浏覽器的兼容性，刪除事件，
如果有多個文件需要這樣加載，那麼可以
復制代碼 代碼如下:
loadScript('file1.js', function(){
loadScript('file2.js',function(){
})
});
3、XHR腳本注入 復制代碼 代碼如下:
var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) {
var oScript = document.createElement('script');
oScript.text = xhr.responseText;
document.body.appendChild(oScript);
}
}
}
304表示從緩存取 text將ajax的內容放入text
它的優點 兼容性好，異步， 缺點：不能擴域 不能從cdn取內容