亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

JAVAscript在瀏覽器中運(yùn)行的性能，可以認(rèn)為是開(kāi)發(fā)者所面臨的最嚴(yán)重的可用性問(wèn)題。這個(gè)問(wèn)題因?yàn)镴avaScript的阻塞性而變得復(fù)雜，事實(shí)上，多數(shù)瀏覽器使用單一進(jìn)程來(lái)處理用戶界面和js腳本執(zhí)行，所以同一時(shí)刻只能做一件事。js執(zhí)行過(guò)程耗時(shí)越久，瀏覽器等待響應(yīng)的時(shí)間越長(zhǎng)。

加載和執(zhí)行

1.IE8,FF,3.5,Safari 4和Chrome都允許并行下載js文件，當(dāng)script下載資源時(shí)不會(huì)阻塞其他script的下載。但是js下載仍然會(huì)阻塞其他資源的下載，如圖片。盡管腳本下載不會(huì)互相影響，但頁(yè)面仍然必須等待所有js代碼下載并執(zhí)行完才能繼續(xù)。因此仍然存在腳本阻塞問(wèn)題.推薦將所有js文件放在body標(biāo)簽底部以減少對(duì)整個(gè)頁(yè)面的影響。

2.減少頁(yè)面外鏈腳本文件的數(shù)量將會(huì)提高頁(yè)面性能：

http請(qǐng)求會(huì)帶來(lái)額外的開(kāi)銷(xiāo)，因此下載單個(gè)300k的文件將比下載10個(gè)30k的文件效率更高。

3.動(dòng)態(tài)腳本加載技術(shù)：

無(wú)論何時(shí)啟動(dòng)下載，文件的下載和執(zhí)行都不會(huì)阻塞頁(yè)面其他進(jìn)程。

function laodScript(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()        }    }    script.src = url;    document.getElementsByTagName('head')[0].AppendChild(script);}
// 使用loadScript('./a.js',function(){    loadScript('./b.js',function(){        loadScript('./c.js',function(){            console.log('加載完成')        })    })})

4. 無(wú)阻塞加載類(lèi)庫(kù)——LABjs,使用方法如下：

<script src="lab.js"></script>// 鏈?zhǔn)秸{(diào)用時(shí)文件逐個(gè)下載，.wAIt()用來(lái)指定文件下載并執(zhí)行完畢后所調(diào)用的函數(shù)$LAB.script('./a.js')    .script('./b.js')    .wait(function(){        App.init();})
// 為了保證執(zhí)行順序，可以這么做,此時(shí)a必定在b前執(zhí)行$LAB.script('./a.js').wait()    .script('./b.js')    .wait(function(){        App.init();})

三. DOM編程

1.訪問(wèn)DOM會(huì)影響瀏覽器性能，修改DOM則更耗費(fèi)性能，因?yàn)樗麜?huì)導(dǎo)致瀏覽器重新計(jì)算頁(yè)面的幾何變化。<通常的做法是減少訪問(wèn)DOM的次數(shù)，把運(yùn)算盡量留在JS這一端。

2. HTML集合優(yōu)化

① 優(yōu)化一——集合轉(zhuǎn)數(shù)組collToArr

function collToArr(coll){    for(var i=0, a=[], len=coll.length; i<len; i++){        a.push(coll[i]);    }    return a}

② 緩存集合length

③ 訪問(wèn)集合元素時(shí)使用局部變量（即將重復(fù)的集合訪問(wèn)緩存到局部變量中，用局部變量來(lái)操作）

3. 遍歷DOM

① 使用只返回元素節(jié)點(diǎn)的API遍歷DOM,因?yàn)檫@些API的執(zhí)行效率比自己實(shí)現(xiàn)的效率更高：

 ② 選擇器API——querySelectorAll()

let arr = document.querySelectorAll('div.warning, div.notice > p')

4.重繪和重排

① 重排發(fā)生的條件：

5.渲染樹(shù)變化的排列和刷新

offsetTop,offsetWidth...scrollTop,scrollHeight...clientTop,clientHeight...getComputedStyle()

// 設(shè)置樣式body.style.color = 'red';body.style.fontSize = '24px'// 讀取樣式let color = body.style.colorlet fontSize = body.style.fontSize

另外，獲取計(jì)算屬性的兼容寫(xiě)法：

function getComputedStyle(el){    var computed = (document.body.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el,'');    return computed}

6.最小化重繪和重排

/* 使用cssText */el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';

function appendDataToEl(option){    var targetEl = option.target || document.body,        createEl,        data = option.data || [];    // 讓容器脫離文檔流，減少重繪重排    var targetEl_display = targetEl.style.display;    targetEl.style.display = 'none';
    // *****創(chuàng)建文檔片段來(lái)優(yōu)化Dom操作****    var fragment = document.createDocumentFragment();    // 給元素填充數(shù)據(jù)    for(var i=0, max = data.length; i< max; i++){        createEl = document.createElement(option.createEl);        for(var item in data[i]){            if(item.toString() === 'text'){                createEl.appendChild(document.createTextNode(data[i][item]));                continue;            }            if(item.toString() === 'html'){                createEl.innerHTML = item,data[i][item];                continue;            }            createEl.setAttribute(item,data[i][item]);        }        // ****將填充好的node插入文檔片段****        fragment.appendChild(createEl);    }    // ****將文檔片段統(tǒng)一插入目標(biāo)容器****    targetEl.appendChild(fragment);    // 顯示容器，完成數(shù)據(jù)填充    targetEl.style.display = targetEl_display;}
// 使用var wrap = document.querySelectorAll('.wrap')[0];var data = [    {name: 'xujaing',text: '選景', title: 'xuanfij'},    {name: 'xujaing',text: '選景', title: 'xuanfij'},    {name: 'xujaing',text: '選景', title: 'xuanfij'}];appendDataToEl({    target: wrap,    createEl: 'div',    data: data});

//緩存布局信息let current = el.offsetLeft;current++;el.style.left = current + 'px';if(current > 300){    stop();}

如果有大量元素使用:hover,那么會(huì)降低相應(yīng)速度，CPU升高

function delegation(e,selector,callback){    e = e || window.event;    var target = e.target || e.srcElement;
    if(target.nodeName !== selector || target.className !== selector || target.id !== selector){        return;    }    if(typeof e.preventDefault === 'function'){        e.preventDefault();        e.stopPropagation();    }else{        e.returnValue = false;        e.cancelBubble = true;    }
    callback()}

// for 循環(huán)for(var i=item.length; i--){    process(item[i]);}// while循環(huán)var j = item.length;while(j--){    process(item[i]);}

items.forEach(function(value,index,array){    process(value);})

function multistep(steps,args,callback){    var tasks = steps.concat();
    setTimeout(function(){        var task = tasks.shift();        task.apply(null, args || []);   //調(diào)用Apply參數(shù)必須是數(shù)組
        if(tasks.length > 0){            setTimeout(arguments.callee, 25);        }else{            callback();        }    },25);}

function timeProcessArray(items,process,callback){    var todo = item.concat();
    setTimeout(function(){        var start = +new Date();
        do{            process(todo.shift());        }while(todo.length > 0 && (+new Date() - start < 50));
        if(todo.length > 0){            setTimeout(arguments.callee, 25);        }else{            callback(items);        }    },25)}

// worker.jsvar worker = new Worker('code.js');// 接收信息worker.onmessage = function(event){    console.log(event.data);}// 發(fā)送數(shù)據(jù)worker.postMessage('hello');
// code.js
// 導(dǎo)入其他計(jì)算代碼importScripts('a.js','b.js');
self.onmessage = function(event){    self.postMessage('hello' + event.data);}

① XMLHttpRequest

② Dynamic script tag insertion 動(dòng)態(tài)腳本注入

③ iframes

④ Comet（基于http長(zhǎng)連接的服務(wù)端推送技術(shù)）

⑤ Multipart XHR（允許客戶端只用一個(gè)http請(qǐng)求就可以從服務(wù)器向客戶端傳送多個(gè)資源）

2.單純向服務(wù)端發(fā)送數(shù)據(jù)（beacons方法）——信標(biāo)

// 唯一缺點(diǎn)是接收到的響應(yīng)類(lèi)型是有限的var url = '/req.php';var params = ['step=2','time=123'];
(new Image()).src = url + '?' + params.join('&');
// 如果向監(jiān)聽(tīng)服務(wù)端發(fā)送回的數(shù)據(jù)，可以在onload中實(shí)現(xiàn)var beacon = new Image();beacon.src = ...;beacon.onload = function(){    ...}beacon.onerror = function(){    ...}

緩存數(shù)據(jù)

1.在服務(wù)端設(shè)置Expires頭信息確保瀏覽器緩存多久響應(yīng)（必須GET請(qǐng)求）

2.客戶端把獲取到的信息緩存到本地，避免再次請(qǐng)求

// 1.延遲加載var a = (x,y) =>{    if(x > 4){        a = 0;    }else{        a = 1;    }}// 需要使用時(shí)調(diào)用a();
// 2.條件預(yù)加載（適用于函數(shù)馬上執(zhí)行并頻繁操作的場(chǎng)景）var b = a > 0 ? '4' : '0';

// 檢測(cè)代碼運(yùn)行時(shí)間var Timer = {    _data: {},    start: function(key){        Timer._data[key] = new Date();    },    stop: function(key){        var time = Timer._data[key];        if(time){            Timer._data[key] = new Date() - time;        };        console.log(Timer._data[key]);        return Timer._data[key]    }};

// 瀏覽器請(qǐng)求時(shí)對(duì)http header設(shè)置Accept-Encoding: gzip// Web服務(wù)器響應(yīng)時(shí)對(duì)http header設(shè)置Content-Encoding: gzip

// cssp{    background-color: expression(altBgcolor(this))}// jsfunction altBgcolor(el){    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";}

DNS緩存和TTL