ajax優(yōu)化
1镶殷、緩存ajax：
a、異步并不等于及時(shí)
2微酬、請求使用GET
a绘趋、- 當(dāng)使用XMLHttpRequest時(shí)，而URL長度不到2K颗管，可以使用GET請求數(shù)據(jù)陷遮，GET相比POST更快速。垦江、
b帽馋、POST類型請求要發(fā)送兩個(gè)TCP數(shù)據(jù)包。
①先發(fā)送文件頭
②再發(fā)送數(shù)據(jù)。
d绽族、GET
①類型請求只需要發(fā)送一個(gè)TCP數(shù)據(jù)包姨涡。
②取決于你的cookie數(shù)量。
cookie
1项秉、減少cookie的大小
2绣溜、使用無cookie的域
①比如圖片CSS等靜態(tài)文件放在靜態(tài)資源服務(wù)器上并配置單獨(dú)域名慷彤，客戶端請求靜態(tài)文件的時(shí)候娄蔼，減少COOKIE反復(fù)傳輸時(shí)對主域名的影響。
dom優(yōu)化
1底哗、優(yōu)化節(jié)點(diǎn)修改岁诉。
使用cloneNode在外部更新節(jié)點(diǎn)然后再通過replace與原始節(jié)點(diǎn)互換凛澎。
var orig = document.getElementById('container');
var clone = orig.cloneNode(true);
var list = ['foo', 'bar', 'baz'];
var content;
for (var i = 0; i < list.length; i++) {
content = document.createTextNode(list[i]);
clone.appendChild(content);
}
orig.parentNode.replaceChild(clone, orig);
2泉瞻、優(yōu)化節(jié)點(diǎn)添加
多個(gè)節(jié)點(diǎn)插入操作脐区，即使在外面設(shè)置節(jié)點(diǎn)的元素和風(fēng)格再插入企软，由于多個(gè)節(jié)點(diǎn)還是會引發(fā)多次reflow麸折。
a借笙、優(yōu)化的方法是創(chuàng)建DocumentFragment储笑，在其中插入節(jié)點(diǎn)后再添加到頁面孕暇。
如JQuery中所有的添加節(jié)點(diǎn)的操作如append炼列，都是最終調(diào)用DocumentFragment來實(shí)現(xiàn)的只搁，
createSafeFragment(document) {
var list = nodeNames.split("|"),
safeFrag = document.createDocumentFragment();
if (safeFrag.createElement) {
while (list.length) {
safeFrag.createElement(
list.pop();
);
};
};
return safeFrag;
};
3、優(yōu)化css樣式轉(zhuǎn)換
如果需要?jiǎng)討B(tài)更改CSS樣式俭尖，盡量采用觸發(fā)reflow次數(shù)較少的方式氢惋。
a、 如以下代碼逐條更改元素的幾何屬性稽犁，理論上會觸發(fā)多次reflow
element.style.fontWeight = 'bold' ;
element.style.marginLeft= '30px' ;
element.style.marginRight = '30px' ;
b焰望、可以通過直接設(shè)置元素的className直接設(shè)置，只會觸發(fā)一次reflow
element.className = 'selectedAnchor' ;
4已亥、減少dom元素?cái)?shù)量
a熊赖、 在console中執(zhí)行命令查看DOM元素?cái)?shù)量。
`document.getElementsByTagName( '*' ).length`
b虑椎、正常頁面的DOM元素?cái)?shù)量一般不應(yīng)該超過1000
c秫舌、DOM元素過多會使DOM元素查詢效率，樣式表匹配效率降低绣檬，是頁面性能最主要的瓶頸之一足陨。
5、dom操作優(yōu)化
a娇未、DOM操作性能問題主要有以下原因墨缘。
①、DOM元素過多導(dǎo)致元素定位緩慢。
②镊讼、大量的DOM接口調(diào)用宽涌。
：
JAVASCRIPT和DOM之間的交互需要通過函數(shù)API接口來完成，造成延時(shí)蝶棋，尤其是在循環(huán)語句中卸亮。
③、DOM操作觸發(fā)頻繁的reflow(layout)和repaint玩裙。
④兼贸、layout發(fā)生在repaint之前，所以layout相對來說會造成更多性能損耗吃溅。
reflow(layout)就是計(jì)算頁面元素的幾何信息溶诞。
repaint就是繪制頁面元素。
⑤决侈、對DOM進(jìn)行操作會導(dǎo)致瀏覽器執(zhí)行回流reflow螺垢。
b、解決方案
⑥赖歌、
⑦枉圃、
⑧、
⑨庐冯、
⑩孽亲、
