前端优化:BigRender

介绍

bigrender是前端优化的技术,从字面上都可以很清楚的理解这一技术特点。big(大)& render(渲染),如果翻译不对,请骂度娘。bigrender顾名思义是对大页面渲染的优化。bigrender的原理是通过某种方式,将首屏不需要的html代码先存放起来。渲染好首屏后,再将存储好的html代码逐步渲染出来。

效果

先看看效果,下面的截图是美团的页面的截图,通过截图可以看出,上面红色框内的就是首屏的内容,这部分是被渲染好的,下面蓝色框内的只是输出了个占位框,内容时空白的,内容都被保存在一个隐藏的textarea框内(见图1)。

使用bigrender的好处显而易见,减少DOM节点,加快首屏的渲染,提高用户体验,进一步思考,如果你的页面不单止大,还有很多图片资源,还可以延迟首屏外的图片加载,提速是杠杠滴。

bigrender-美团

图1

实现

这个元旦,通过改造个人博客实现bigrender。如图2,每个红色框都是一个article标签,把article内的html都保存在article里面隐藏的textarea,article设了一个最小高度(article渲染后会移除最小高度),目的是把整个页面撑开,给屏幕添加滚动条事件,当每个article出现可视范围的时候就渲染textarea里面的html。

<textarea class=“br-rendered” style=“display:none”></textarea>
<article class=“br-warp” style=“min-height: 300px;”></article>

bigrender-效果

图2

bigrender-效果

图3 效果

JS代码

(function($){
$.fn.bigrender = function(opts){

var winHeight = document.documentElement.clientHeight;
var sum = 0;
var count = 0;
var flash = new Array();

// ‘class’ 是textarea父节点的类;’textarea’ 是textarea标签的类;’threshold’是距离进入屏幕还有150像素就开始渲染;’remove’是否删除textarea标签
options = $.extend({
‘class’ : ‘.br-warp’,
‘textarea’ : ‘.br-rendered’,
‘threshold’ : 150,
‘remove’ : true,
},opts);

$brenders = $(options.class);
// 渲染首屏的内容
initBigrender();
// 绑定滚动条事件
scrollDisplay();

// 函数定义
function initBigrender(){
$brenders.each(function(n,object){
sum++;
if(isRender($(this))){
display($(this));
count++;
flash[n] = true;
}else{
flash[n] = false;
}
});
}

// 判断时候需要渲染
function isRender(object){
offsetTop = object.offset().top;
ojh = object.outerHeight(true);
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);

if(offsetTop+ojh+options.threshold >= st && offsetTop-options.threshold < (st+winHeight)){
return true;
}else return false;

}

// 渲染textarea内的html代码
function display(object){
$display = object.find(options.textarea).eq(0);
if(options.remove){
object.append($display.val());
$display.remove();
}else{
object.append($display.val());
}
}

// 屏幕绑定滚动条事件,当待渲染的内容进入可视屏幕就触发isRender函数
function scrollDisplay(){
$(window).scroll(function(event) {
event.preventDefault();
if(count < sum){
$brenders.each(function(n,object){
if(flash[n] == false){
if(isRender($(this))){
display($(this));
count++;
flash[n] = true;
}else{
flash[n] = false;
}
}
});
}
});
}
};
})(jQuery);

调用方式

$.fn.bigrender({‘threshold’ : 100});  // 提前100像素开始渲染

渲染前html

<article class=”br-warp” style=”min-height: 300px;”>
<textarea class=”br-rendered” style=”display:none”>     <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”>
了解框架的目录结构是框架快速入门的一个途径,一个成熟的框架,每个功能模块都被划分存放在不同的目录。在网上找了很多关于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>
</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”>
了解框架的目录结构是框架快速入门的一个途径,一个成熟的框架,每个功能模块都被划分存放在不同的目录。在网上找了很多关于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代码转义:尖括号等都被转义了,这个会增加服务器的压力;而且,这个的改造只是前端的渲染,服务器依旧是一次过计算所有的数据,输出所有的数据,这一点没有得到提高。

You may also like...

发表评论