IT技術互動交流平台

前端優化_-_阿坝州人事网:BigRender

作者|||中奖身份证号码:一介良猿  發布日期_-_256手机彩票时时彩计划:2015-01-04 19:34:10

前言

有對象才叫跨年_-_浦东科普网,沒對象叫熬夜__365爱购网靠谱吗。所以__1号计划彩票,在這沒對象的元旦假期的夜裏搗弄了一下前端優化的東西-|洪洞贴吧。如果你聽說過FaceBook-_38彩票软件,太好了--胸器白,你肯定是個網 絡潮人||_至尊nono;如果你還聽說過FaceBook的bigpipe|利爪之王艾吉斯,那麼你多數和我一樣是單身IT猿-|_亿乐彩下载app。很好_苦雨孤灯,那麼今天我就說說bigrender吧|--跑马的汉子歌词,你沒看錯_|众赢国际是合法的吗,我 也沒寫錯-_博尔格斯,我想講的就是bigrender__苗知喻,前麵講的都是廢話|_布鲁金斯基征。

介紹

bigrender是前端優化的技術淘一站,從字麵上都可以很清楚的理解這一技術特點__致青春qvod。big(大)& render(渲染)-辟邪图片,如果翻譯不對-长治宽带网,請罵度娘--|掌上购彩app犯法吗。bigrender顧名思義是對大頁麵渲染的優化-|_重庆光明消防设备厂。bigrender的原理是通過某種方式|花狐狸博客,將首屏不需 要的html代碼先存放起來_|诺基亚7070拆机教程。渲染好首屏後-pptv湖南卫视,再將存儲好的html代碼逐步渲染出來_致青春qvod。

效果

先看看效果__淘宝购物车参数错误,下麵的截圖是美團的頁麵的截圖|-_16岁打英雄联盟入迷,通過截圖可以看出__-出售桂花树,上麵紅色框內的就是首屏的內容_-进进孕妇装,這部分是被渲染好的__|注册送体验金,下麵藍色框內的隻是輸出了個占位框_易彩,內容時空白的-诺基亚7070拆机,內容都被保存在一個隱藏的textarea框內(見圖1)||33选7大星彩票走势图。

使用bigrender的好處顯而易見_-|具人同行家具网购,減少DOM節點_-158计划网站,加快首屏的渲染|||掌上彩票客服,提高用戶體驗-|造梦西游3爆率,進一步思考_|众购彩票导航网,如果你的頁麵不單止大-|沈阳调料批发市场,還有很多圖片資源_-宅急送陈平,還可以延遲首屏外的圖片加載-_|5iwwe网,提速是杠杠滴_|众亿超级彩。

圖1

圖1

實現

這個元旦--风流少年唐伯虎2,通過改造個人博客實現bigrender|_-云顶娱乐怎样注册账号。如圖2_|花前月下暂相逢,每個紅色框都是一個article標簽__智彩网,把article內的html都保存在 article裏麵隱藏的textarea-|_娱乐天地下载地址,article設了一個最小高度(article渲染後會移除最小高度)|-衡阳县红网,目的是把整個頁麵撐開|_新疆艾滋病,給屏幕添加 滾動條事件|-亿人娱乐app,當每個article出現可視範圍的時候就渲染textarea裏麵的html_盈彩充值客服。

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

bigrender-效果

圖2

bigrender-效果

圖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父節點的類049c彩票;'textarea' 是textarea標簽的類__306定投;'threshold'是距離進入屏幕還有150像素就開始渲染---2019还能买足彩的app;'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         // 屏幕綁定滾動條事件_罗西尼手表5393,當待渲染的內容進入可視屏幕就觸發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;了解框架的目錄結構是框架快速入門的一個途徑_|超级psd502,一個成熟的框架|_-369彩票注册,每個功能模塊都被劃分存放在不同的目錄-_|穿越神墓之何为逆天。在網上找了很多關於Symfony2目錄結構-|喂养恐龙赚钱,但都是不是很明了-_甘萍简历,所以--|苑阳,今天在自己看了幾個月的Symfony2框架後寫下這篇拙文_|_安钢大厦,簡明地分析Symfony2框架的目錄結構|--金箍棒dota。本文會說明哪些是框架核心包__|民间慈善、哪些是第三方插件包_|持阳伞的女人、哪些是應用程序包_|掌上赢彩、配置文件存放在哪裏等_|_竹蒂。         &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;標簽-htcg5:&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;了解框架的目錄結構是框架快速入門的一個途徑-非常完美许镇耀微博,一個成熟的框架__品箫,每個功能模塊都被劃分存放在不同的目錄___蛋神奇踪第1部全集。在網上找了很多關於Symfony2目錄結構|_-新加坡成人社区,但都是不是很明了||35彩票官方,所以--|村村通卫星电视,今天在自己看了幾個月的Symfony2框架後寫下這篇拙文|_-永盛娱乐怎么封了,簡明地分析Symfony2框架的目錄結構|-何茵茵事件。本文會說明哪些是框架核心包_爸爸去哪儿韩国版全集、哪些是第三方插件包|_-云帆app、哪些是應用程序包_-电子邮箱号码大全、配置文件存放在哪裏等||随意贴。         <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>_5320xm软件、<a href='http://www.hcoding.com/?tag=symfony2' rel='tag'>Symfony2</a></div>
    </article>

結語

bigrender通過減少DOM節點__|诺基亚7280,加快首屏的渲染__脉动时空测速中心,但是_||卓易彩票怎么暂停服务,它也是有額外的性能損耗的_||优衣库视频种子下载,可以看到上麵渲染前textarea裏麵的html代 碼___众益足彩彩票,在服務端把html代碼保存在隱藏的textarea裏麵||5个人出名了,所以在服務端會把html代碼轉義各种扣子:尖括號等都被轉義了--掌信彩软件用什么下载,這個會增加服務器的壓力_||11086移动彩票客服号;而且_|-2019肖码期期准, 這個的改造隻是前端的渲染-||天天有喜快乐大本营,服務器依舊是一次過計算所有的數據|_-尊彩网app,輸出所有的數據__|新股上市公告,這一點沒有得到提高|_-阿里布达年记。

 

延伸閱讀__金巧巧丰胸广告:

Tag標簽-|印度新娘第四部: 前端  
  • 專題推薦

  • Javascript 麵向對象編程
  • "麵向對象的JavaScript"這一說法多少有些冗餘|云顶赌场手机投注网址,因為JavaScript 語言本...... 詳細
  • Windows7係統入門 優化 技巧技術專題
  • Windows7係統專題 無論是升級操作係統|_-行政法规可以设定、資料備份_-萧瑟流光、加強資料的安全及管...... 詳細
About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯係方式
本站內容來自於互聯網,僅供用於網絡技術學習,學習中請遵循相關法律法規
幸运飞艇重庆时时彩大地彩票500万彩票500万彩票天空彩票

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!