性能優(yōu)化
簡單來說，常用的優(yōu)化有兩部分：
第一：面向內(nèi)容的優(yōu)化
- 減少 HTTP 請求
從設(shè)計(jì)實(shí)現(xiàn)層面簡化頁面
合理設(shè)置HTTP緩存(即能緩存越多越好颅筋，能存越久越好)
- 減少 DNS 查找
- 避免重定向
- 使用 Ajax 緩存
- 延遲載入組件
- 預(yù)先載入組件
- 減少 DOM 元素數(shù)量
- CDN加速的原理
通過緩存技術(shù)，將網(wǎng)站文字瓶竭，圖片狰贯，視頻等內(nèi)容緩存到分布與各地的節(jié)點(diǎn)服務(wù)器上，使終端訪問用戶就近訪問倘潜，從而提高訪問速度砚婆。
- 最小化 iframe 的數(shù)量
- 不要出現(xiàn)http 404 錯誤
第二：面向 Server
1.cookie優(yōu)化
減少Cookie大小
頁面內(nèi)容使用無Cookie域名
- 針對 Web 組件使用域名無關(guān)性的
怎樣實(shí)現(xiàn)原生JS異步加載
默認(rèn)情況javascript是同步加載的晰房，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載射沟，對于一些意義不是很大的javascript殊者，如果放在頁頭會導(dǎo)致加載很慢的話，是會嚴(yán)重影響用戶體驗(yàn)的验夯。
有以下三種方法：
(1) defer猖吴，只支持IE
defer屬性的定義和用法（我摘自w3school網(wǎng)站）
defer 屬性規(guī)定是否對腳本執(zhí)行進(jìn)行延遲，直到頁面加載為止挥转。
有的 javascript 腳本 document.write 方法來創(chuàng)建當(dāng)前的文檔內(nèi)容海蔽，其他腳本就不一定是了共屈。
如果您的腳本不會改變文檔的內(nèi)容，可將 defer 屬性加入到 <script> 標(biāo)簽中党窜，以便加快處理文檔的速度拗引。
因?yàn)闉g覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(zhí)行腳本，它將推遲對腳本的解釋幌衣，直到文檔已經(jīng)顯示給用戶為止矾削。
示例：
代碼如下:
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
(2) async：
async的定義和用法(是HTML5的屬性)
async 屬性規(guī)定一旦腳本可用，則會異步執(zhí)行豁护。
示例：
代碼如下:
<script type="text/javascript" src="demo_async.js" async="async"></script>
注釋：async 屬性僅適用于外部腳本（只有在使用 src 屬性時）哼凯。
注釋：有多種執(zhí)行外部腳本的方法：
?如果 async="async"：腳本相對于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時，腳本將被執(zhí)行）
?如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執(zhí)行
?如果既不使用 async 也不使用 defer：在瀏覽器繼續(xù)解析頁面之前楚里，立即讀取并執(zhí)行腳本
(3) 創(chuàng)建script断部，插入到DOM中，加載完畢后callBack班缎，見代碼：
代碼如下:
function loadScript(url, callback){
var script = document.createElement_x("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
