前端优化：BigRender

2024-04-27 14:14:27

字体：大中小

来源：转载

供稿：网友

前端优化：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>

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父节点的类；'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代码转义：尖括号等都被转义了，这个会增加服务器的压力；而且，这个的改造只是前端的渲染，服务器依旧是一次过计算所有的数据，输出所有的数据，这一点没有得到提高。