性能優化之 - 按需加載

　　按需加載是網站性能優化立竿見影的其中一項，按需加載可以了解為 當用戶觸發某個動作的時候，才主動去請求資源，這樣帶來的優化好處：減少了HTTP請求，節省寬帶，讓頁面首屏的內容更快展現在用戶的視線范圍內，可見極大提高了用戶體檢。觸發的動作有很多，如鼠標點擊，拉動頁面滾動條，鼠標經過等等。

 

【一】 圖片按需加載　

<img src="偽裝的圖片" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff">

　　原理：把圖片的真實資源地址存放在標簽自定義的屬性里面，如 'data-src'，那么src屬性就用一張透明的圖片占用（1K左右），當觸發動作時，交換屬性，就可以達到按需加載。常見的交互效果是圖片滾動按需加載，可參考我之前所寫的插件講解，進入。

 

【二】內容按需加載

　　（1）利用textarea標簽，將你需要按需加載的HTML結構全放到這標簽里面，這樣頁面解析的時候會忽略它們，如圖：

<div>
        <textarea id="lazy-a">
            <p>
                <img src="http://dummyimage.com/990x90/259/fff">
                <span>title</span>
            </p>
        </textarea>
</div>

　　谷歌開發工具截圖：

　　

　　如上圖所示，網絡里面沒有圖片的資源加載。

var target = document.getElementById('lazy-a');
　　target.parentNode.innerHTML = target.value;

　　當觸發的時候，將textarea的value賦值給父元素的innerHTML,就達到了按需加載，在太平洋汽車網的滾動效果里面的按需加載就用到此做法，鏈接：

　　　　你可以把全部的內容都放到textarea標簽里面，如 樣式，圖片，腳本，它們都不會被解析。

 　　（2） script標簽的 type="text/html" 有着異曲同工，但常常是用來當js代碼片段模板處理，如彈窗框等等　

<script type="text/html" id="j-tips">
        <div class="ui-pop">
            <div class="ui-pop-hd"></div>
            <div class="ui-pop-bd">
                <p class="tips-txt">{tipstxt}</p>
            </div>
        </div>
</script>

 　　（3）調用程序生成的ajax接口，通過觸發動作往頁面添加內容，如瀑布流布局，點擊加載更多等等，如太平洋汽車網的圖庫，鏈接，通過滾動觸發，請求ajax接口，加載更多的圖片資源

 

　　總結：按需是提高網速的重要方法之一，要點就是通過觸發動作去加載資源，這些資源很多，如圖片，樣式，HTML，iframe，flash等等