前端優化：BigRender

前言

有對象才叫跨年，沒對象叫熬夜。因此，在這沒對象的元旦假期的夜裏搗弄了一下前端優化的東西。若是你據說過FaceBook，太好了，你確定是個網 絡潮人；若是你還據說過FaceBook的bigpipe，那麼你多數和我同樣是單身IT猿。很好，那麼今天我就說說bigrender吧，你沒看錯，我 也沒寫錯，我想講的就是bigrender，前面講的都是廢話。

介紹

bigrender是前端優化的技術，從字面上均可以很清楚的理解這一技術特色。big（大）& render（渲染），若是翻譯不對，請罵度娘。bigrender顧名思義是對大頁面渲染的優化。bigrender的原理是經過某種方式，將首屏不需 要的html代碼先存放起來。渲染好首屏後，再將存儲好的html代碼逐步渲染出來。

效果

先看看效果，下面的截圖是美團的頁面的截圖，經過截圖能夠看出，上面紅色框內的就是首屏的內容，這部分是被渲染好的，下面藍色框內的只是輸出了個佔位框，內容時空白的，內容都被保存在一個隱藏的textarea框內（見圖1）。

使用bigrender的好處顯而易見，減小DOM節點，加快首屏的渲染，提升用戶體驗，進一步思考，若是你的頁面不單止大，還有不少圖片資源，還能夠延遲首屏外的圖片加載，提速是槓槓滴。

圖1

實現

這個元旦，經過改造我的博客實現bigrender。如圖2，每一個紅色框都是一個article標籤，把article內的html都保存在 article裏面隱藏的textarea，article設了一個最小高度（article渲染後會移除最小高度），目的是把整個頁面撐開，給屏幕添加 滾動條事件，當每一個article出現可視範圍的時候就渲染textarea裏面的html。

1 <textarea class="br-rendered" style="display:none">...</textarea>
2 <article class="br-warp" style="min-height: 300px;">...</article>

圖2

圖3 效果

JS代碼

 1 (function($){
 2     $.fn.bigrender = function(opts){
 3 
 4         var winHeight = document.documentElement.clientHeight;
 5         var sum = 0;
 6         var count = 0;
 7         var flash = new Array();
 8        
 9         // 'class' 是textarea父節點的類；'textarea' 是textarea標籤的類；'threshold'是距離進入屏幕還有150像素就開始渲染；'remove'是否刪除textarea標籤       
10         options = $.extend({
11             'class' : '.br-warp',
12             'textarea' : '.br-rendered',
13             'threshold' : 150,
14             'remove' : true,
15         },opts);   
16        
17         $brenders = $(options.class);
18         // 渲染首屏的內容
19         initBigrender();   
20         // 綁定滾動條事件
21         scrollDisplay();
22        
23        
24         // 函數定義
25         function initBigrender(){      
26             $brenders.each(function(n,object){
27                 sum++;
28                 if(isRender($(this))){
29                     display($(this));
30                     count++;
31                     flash[n] = true;
32                 }else{
33                     flash[n] = false;
34                 }
35             });
36         }
37        
38         // 判斷時候須要渲染
39         function isRender(object){
40             offsetTop = object.offset().top;
41             ojh = object.outerHeight(true);
42             st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
43 
44             if(offsetTop+ojh+options.threshold >= st && offsetTop-options.threshold < (st+winHeight)){
45                 return true;
46             }else return false;
47            
48         }
49        
50         // 渲染textarea內的html代碼
51         function display(object){
52             $display = object.find(options.textarea).eq(0);
53             if(options.remove){
54                 object.append($display.val());
55                 $display.remove();
56             }else{
57                 object.append($display.val());
58             }
59         }
60        
61         // 屏幕綁定滾動條事件，當待渲染的內容進入可視屏幕就觸發isRender函數
62         function scrollDisplay(){
63             $(window).scroll(function() {65                 if(count < sum){
66                     $brenders.each(function(n,object){
67                         if(flash[n] == false){
68                             if(isRender($(this))){
69                                 display($(this));
70                                 count++;
71                                 flash[n] = true;
72                             }75                         }
76                     });
77                 }
78             });    
79         }
80     };
81 })(jQuery);

調用方式

1 $.fn.bigrender({'threshold' : 100});  // 提早100像素開始渲染

渲染前html

<article class="br-warp" style="min-height: 300px;">
    <textarea class="br-rendered" style="display:none">     &lt;div class="title"&gt;&lt;a href="http://www.hcoding.com/?p=27" rel="bookmark"&gt;Symfony2目錄結構說明&lt;/a&gt;&lt;/div&gt;
        &lt;div class="entry-meta"&gt;&lt;a href="http://www.hcoding.com/?p=27" title="下午4:12" rel="bookmark"&gt;&lt;time class="entry-date" datetime="2014-11-14T16:12:48+00:00"&gt;2014年11月14日&lt;/time&gt;&lt;/a&gt; 分類：&lt;a href="http://www.hcoding.com/?cat=5" rel="category"&gt;PHP&lt;/a&gt;&lt;/div&gt;
        &lt;div class="cover"&gt;&lt;/div&gt;
        &lt;div class="summary"&gt;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;瞭解框架的目錄結構是框架快速入門的一個途徑，一個成熟的框架，每一個功能模塊都被劃分存放在不一樣的目錄。在網上找了不少關於Symfony2目錄結構，但都是否是很明瞭，因此，今天在本身看了幾個月的Symfony2框架後寫下這篇拙文，簡明地分析Symfony2框架的目錄結構。本文會說明哪些是框架核心包、哪些是第三方插件包、哪些是應用程序包、配置文件存放在哪裏等。         &lt;a href="http://www.hcoding.com/?p=27" style="font-size:12px;color:#19b4ed"&gt;閱讀全文&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="tags"&gt;標籤：&lt;a href="http://www.hcoding.com/?tag=php" rel="tag"&gt;PHP&lt;/a&gt;、&lt;a href="http://www.hcoding.com/?tag=symfony2" rel="tag"&gt;Symfony2&lt;/a&gt;&lt;/div&gt;
    </textarea>
</article>

渲染後html

<article class="br-warp" style="min-height: 0px;">
   
        <div class="title"><a href="http://www.hcoding.com/?p=27" rel="bookmark">Symfony2目錄結構說明</a></div>
        <div class="entry-meta"><a href="http://www.hcoding.com/?p=27" title="下午4:12" rel="bookmark"><time class="entry-date" datetime="2014-11-14T16:12:48+00:00">2014年11月14日</time></a> 分類：<a href="http://www.hcoding.com/?cat=5" rel="category">PHP</a></div>
        <div class="cover"></div>
        <div class="summary">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;瞭解框架的目錄結構是框架快速入門的一個途徑，一個成熟的框架，每一個功能模塊都被劃分存放在不一樣的目錄。在網上找了不少關於Symfony2目錄結構，但都是否是很明瞭，因此，今天在本身看了幾個月的Symfony2框架後寫下這篇拙文，簡明地分析Symfony2框架的目錄結構。本文會說明哪些是框架核心包、哪些是第三方插件包、哪些是應用程序包、配置文件存放在哪裏等。         <a href="http://www.hcoding.com/?p=27" style="font-size:12px;color:#19b4ed">閱讀全文</a>
        </div>
        <div class="tags">標籤：<a href="http://www.hcoding.com/?tag=php" rel="tag">PHP</a>、<a href="http://www.hcoding.com/?tag=symfony2" rel="tag">Symfony2</a></div>
    </article>

結語

bigrender經過減小DOM節點，加快首屏的渲染，可是，它也是有額外的性能損耗的，能夠看到上面渲染前textarea裏面的html代 碼，在服務端把html代碼保存在隱藏的textarea裏面，因此在服務端會把html代碼轉義：尖括號等都被轉義了，這個會增長服務器的壓力；並且， 這個的改造只是前端的渲染，服務器依舊是一次過計算全部的數據，輸出全部的數據，這一點沒有獲得提升。

連接：http://www.hcoding.com/?p=194

更多內容：http://www.hcoding.com