IT技術互動交流平台(tai)

北京快三官网

作者︰一介(jie)良猿  發布(bu)日(ri)期︰2020-02-27 15:56:10

北京快三官网

有(you)對象才叫跨(kua)年,沒對象叫熬(ao)夜。所(suo)以,在這沒對象的(de)元旦假期的(de)夜里搗弄(long)了一下前端優化的(de)東(dong)西。如果(guo)你听說過(guo)FaceBook,太好了,你肯定是(shi)個網 絡潮人;如果(guo)你還听說過(guo)FaceBook的(de)bigpipe,那麼(me)你多數和我一樣是(shi)單身IT猿。很好,那麼(me)今天(tian)我就(jiu)說說bigrender吧,你沒看錯,我 也沒寫錯,我想講的(de)就(jiu)是(shi)bigrender,前面講的(de)都是(shi)廢(fei)話。

北京快三官网

bigrender是(shi)前端優化的(de)技術,從字面上都可以很清楚的(de)理解這一技術特點。big(大)& render(渲染),如果(guo)翻譯不對,請罵度娘。bigrender顧名思jia)迨shi)對大頁面渲染的(de)優化。bigrender的(de)原理是(shi)通過(guo)某種(zhong)方(fang)式,將首(shou)屏不需(xu) 要(yao)的(de)html代碼(ma)先(xian)存放起來。渲染好首(shou)屏後,再將存儲好的(de)html代碼(ma)逐步渲染出來。

北京快三官网

先(xian)看看效果(guo),下面的(de)截圖是(shi)美團的(de)頁面的(de)截圖,通過(guo)截圖可以看出,上面紅色框(kuang)內的(de)就(jiu)是(shi)首(shou)屏的(de)內容,這部分是(shi)被渲染好的(de),下面藍色框(kuang)內的(de)只是(shi)輸(shu)出了個佔位框(kuang),內容時空白的(de),內容都被保(bao)存在一個隱藏的(de)textarea框(kuang)內(見圖1)。

使用bigrender的(de)好me)ο遠準 jian)少DOM節點,加快首(shou)屏的(de)渲染,提(ti)高用戶體(ti)驗,進一步思考,如果(guo)你的(de)頁面不單止大,還有(you)很多圖片資(zi)源,還可以延遲首(shou)屏外(wai)的(de)圖片加載,提(ti)速是(shi)杠(gong)杠(gong)滴(di)。

圖1

圖1

北京快三官网

這個元旦,通過(guo)改(gai)造個人博客(ke)實(shi)現bigrender。如圖2,每(mei)個紅色框(kuang)都是(shi)一個article標(biao)簽,把(ba)article內的(de)html都保(bao)存在 article里面隱藏的(de)textarea,article設了一個最小高度(article渲染後會(hui)移(yi)除最小高度),目的(de)是(shi)把(ba)整個頁面撐開,給屏幕添加 滾動條事(shi)件,當每(mei)個article出現可視範圍的(de)時候(hou)就(jiu)渲染textarea里面的(de)html。

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

bigrender-效果(guo)

圖2

bigrender-效果(guo)

圖3 效果(guo)

JS代碼(ma)

 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' 是(shi)textarea父fu)詰愕de)類(lei);'textarea' 是(shi)textarea標(biao)簽的(de)類(lei);'threshold'是(shi)距離進入(ru)屏幕還有(you)150像素就(jiu)開始jian)秩荊#39;remove'是(shi)否刪除textarea標(biao)簽 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  // 渲染首(shou)屏的(de)內容19  initBigrender(); 20  // 綁(bang)定滾動條事(shi)件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  // 判斷時候(hou)需(xu)要(yao)渲染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內的(de)html代碼(ma)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  // 屏幕綁(bang)定滾動條事(shi)件,當待渲染的(de)內容進入(ru)可視屏幕就(jiu)觸(chu)發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);

調(diao)用方(fang)式

1 $.fn.bigrender({'threshold' : 100}); // 提(ti)前100像素開始jian)秩/pre>

渲染前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='2020-02-27T16:12:48+00:00'&gt;2020年02月27日(ri)&lt;/time&gt;&lt;/a&gt; 分類(lei)︰&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;了解框(kuang)架(jia)的(de)目錄結構是(shi)框(kuang)架(jia)快速入(ru)門(men)的(de)一個途徑,一個成熟的(de)框(kuang)架(jia),每(mei)個功能模塊都被劃分存放在不同的(de)目錄。在網上找了很多關于Symfony2目錄結構,但都是(shi)不是(shi)很明了,所(suo)以,今天(tian)在自己看了幾個月的(de)Symfony2框(kuang)架(jia)後寫下這篇拙文,簡明地(di)分析(xi)Symfony2框(kuang)架(jia)的(de)目錄結構。本文會(hui)說明哪些是(shi)框(kuang)架(jia)核心(xin)包、哪些是(shi)第三方(fang)插件包、哪些是(shi)應用程序包、配置文件存放在哪里等(deng)。  &lt;a href='http://www.hcoding.com/?p=27' style='font-size:12px;color:#19b4ed'&gt;閱讀(du)全(quan)文&lt;/a&gt; &lt;/div&gt; &lt;div class='tags'&gt;標(biao)簽︰&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='2020-02-27T16:12:48+00:00'>2020年02月27日(ri)</time></a> 分類(lei)︰<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;了解框(kuang)架(jia)的(de)目錄結構是(shi)框(kuang)架(jia)快速入(ru)門(men)的(de)一個途徑,一個成熟的(de)框(kuang)架(jia),每(mei)個功能模塊都被劃分存放在不同的(de)目錄。在網上找了很多關于Symfony2目錄結構,但都是(shi)不是(shi)很明了,所(suo)以,今天(tian)在自己看了幾個月的(de)Symfony2框(kuang)架(jia)後寫下這篇拙文,簡明地(di)分析(xi)Symfony2框(kuang)架(jia)的(de)目錄結構。本文會(hui)說明哪些是(shi)框(kuang)架(jia)核心(xin)包、哪些是(shi)第三方(fang)插件包、哪些是(shi)應用程序包、配置文件存放在哪里等(deng)。  <a href='http://www.hcoding.com/?p=27' style='font-size:12px;color:#19b4ed'>閱讀(du)全(quan)文</a> </div> <div class='tags'>標(biao)簽︰<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通過(guo)減(jian)少DOM節點,加快首(shou)屏的(de)渲染,但是(shi),它也是(shi)有(you)額外(wai)的(de)性能損耗的(de),可以看到上面渲染前textarea里面的(de)html代 碼(ma),在服(fu)務端把(ba)html代碼(ma)保(bao)存在隱藏的(de)textarea里面,所(suo)以在服(fu)務端會(hui)把(ba)html代碼(ma)轉義︰尖(jian)括號等(deng)都被轉義了,這個會(hui)增加服(fu)務器的(de)壓力;而且, 這個的(de)改(gai)造只是(shi)前端的(de)渲染,服(fu)務器依舊是(shi)一次(ci)過(guo)計算所(suo)有(you)的(de)數據,輸(shu)出所(suo)有(you)的(de)數據,這一點沒有(you)得到提(ti)高。

 

北京快三官网

    Tag標(biao)簽︰前端  
    • 北京快三官网

    About IT165 - 廣告服(fu)務 - 隱私聲(sheng)明 - 版權(quan)申明 - 免(mian)責條款 - 網站地(di)圖 - 網友投稿 - 聯系方(fang)式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中(zhong)請遵循(xun)相關法律法規
    北京快三官网 | 下一页