網站性能優化：盡量減少向服務器請求的次數 “減少HTTP請求”：
a、CSS/JS文件進行合并
b、ICON圖片也進行合并--->雪碧圖
c、圖片的延遲加載
d、數據的異步加載
e、在移動端，若做一個“簡單的”宣傳頁，盡量把js和css寫成內嵌式
圖片延遲加載
作用：
保證頁面打開的速度（3s之內如果首頁打不開就死了）
網站性能優化：盡量減少向服務器請求的次數 “減少HTTP請求”。（CSS/JS文件進行合并
原理：
a、對于首屏內容中的圖片：首先給對應的區域一張默認圖片占著位置（默認圖需要非常小，一般可以維持在5kb以內），當首屏內容都加載完成后（或者也可以給一個延遲的時間），再開始加載真實的圖片
b、對于其他屏中的圖片：也是給一張默認的圖片占位，當滾動條滾動到對應區域的時候，再開始加載真實的圖片
擴展：數據的異步加載，開始只把前兩屏的數據加載綁定出來，后面的數據不進行處理，當頁面滾動到對應區域的時候再重新請求數據然后綁定渲染數據
——————————————————————————————————
首屏延遲圖片加載：
//html部分：img標簽外要有個包裹容器
<div id="wrap">
<img src="" trueImg="img/1.png" />
</div>
//css部分：外層包裹容器設置背景默認圖片；img的src為空，加載時瀏覽器會出現碎圖，所以先隱藏，加載完真實圖片后再取消隱藏
#wrap{
background:url(img/2.png) no-repeat center center;
}
img{
display:none;
}
//js部分
window.setTimeout(function(){
var oImg=new Image;//創建一個臨時img標簽
oImg.src=img.getAttribute("trueImg");
oImg.onload=function(){//代表真實圖片能夠正常加載
img.style.display="block";
img.src=this.src;
oImg=null;
}
},500);
——————————————————————————————————
其他屏的單張圖片延遲加載：
原理：
image.png
window.onscroll=function(){
if(wrap.isLoad){//已經加載過了
return;
}
var A=wrap.offsetHeight+wrap.offsetTop;
var B=document.documentElement.clientHeight||document.body.clientHeight+document.documentElement.scrollTop||document.body.scrollTop;
if(A<B){
//當條件成立，加載真實的圖片，第一次加載完成后，在讓頁面繼續滾動的過程中，A<B一直成立，又重新執行下面的操作，導致重復給一個容器中的圖片進行加載
var oImg=new Image;
oImg.src=img.getAttribute("trueImg");
oImg.onload=function(){
img.src=this.src;
img.style.display="block";
oImg=null;
};
wrap.isLoad=true;//設置一個自定義屬性，告訴瀏覽器已經把圖片加載完了(不管是否正常加載，只要處理過一次以后都不再處理了)
}
}
