用小技巧來優化大數據量的網頁

引用:http://www.feelcss.com/tips-optimization-large-data-pages.htmlcss

有些網頁忒坑爹,裏面數據量大的驚人,都上兆了,先不說下載了,就是瀏覽器去渲染都得渲染很久。固然了,說的這個例子比較極端,但比較長,渲染比較耗時的頁面仍是會碰到的,想給用戶很「快速」的感受,得想點辦法:)html

頁面裏數據量太大,對元素進行解析和渲染會耗費不少時間,但若是咱們先讓第一屏的內容正常顯示出來,而後將後面的內容以加上註釋的形式,加載到一個容器中,這樣由於內容是註釋的,瀏覽器只會當他是文本去處理,不用去解析和渲染,頁面加載的會很是快,而後再用 js 把加上註釋的內容取出來 innerHTML ,就 OK 了。node

(function(){
  //獲取容器test
  var dom = document.getElementById("test");
  //獲取容器內的註釋內容
  var html = test.childNodes[0].nodeValue;
  //將容器test的內容替換,而後解析並渲染
  dom.innerHTML = html;
})();

這樣至關於給用戶一個「快速」的假象,也能夠把內容放在 textarea 裏,原理都是同樣的。web

其實這個方法不必定非要大數據量的網頁纔會用到,若是想控制頁面裏元素的加載順序,又不想改 html 的書寫順序的話,能夠用用:)瀏覽器

相關文章
相關標籤/搜索