前端优化：BigRender - 网页设计在线参考手册.docx

前端优化：BigRender-网页设计在线参考手册-最新IT资讯_电脑知识大全_网络安全教程-次元立方网有对象才叫跨年，没对象叫熬夜。所以，在这没对象的元旦假期的夜里捣弄了一下前端优化的东西。假如你听讲过FaceBook，太好了，你肯定是个网络潮人；假如你还听讲过FaceBook的bigpipe，那么你多数和我一样是单身IT猿。很好，那么今天我就讲讲bigrender吧，你没看错，我也没写错，我想讲的就是bigrender，前面讲的都是废话。bigrender是前端优化的技术，从字面上都能够很清楚的理解这一技术特点。big大render渲染，假如翻译不对，请骂度娘。bigrender顾名思义是对大页面渲染的优化。bigrender的原理是通过某种方式，将首屏不需要的代码先存放起来。渲染好首屏后，再将存储好的代码逐步渲染出来。先看看效果，下面的截图是美团的页面的截图，通过截图能够看出，上面红色框内的就是首屏的内容，这部分是被渲染好的，下面蓝色框内的只是输出了个占位框，内容时空白的，内容都被保存在一个隐藏的textarea框内见图1。使用bigrender的好处显而易见，减少DOM节点，加快首屏的渲染，提高用户体验，进一步考虑，假如你的页面不单止大，还有很多图片资源，还能够延迟首屏外的图片加载，提速是杠杠滴。图1这个元旦，通过改造个人博客实现bigrender。如图2，每个红色框都是一个article标签，把article内的都保存在article里面隐藏的textarea，article设了一个最小高度article渲染后会移除最小高度，目的是把整个页面撑开，给屏幕添加滚动条事件，当每个article出现可视范围的时候就渲染textarea里面的。1textarea>图2图3效果JS代码1(function($)2$.fn.bigrender=function(opts)4varwinHeight=document.documentElement.clientHeight;5varsum=0;6varcount=0;7varflash=newArray();9/class是textarea父节点的类；textarea是textarea标签的类；threshold是距离进入屏幕还有150像素就开场渲染；remove能否删除textarea标签10options=$.extend(11class:.br-warp,12textarea:.br-rendered,13threshold:150,14remove:true,15,opts);17$brenders=$(options.class);18/渲染首屏的内容19initBigrender();20/绑定滚动条事件21scrollDisplay();24/函数定义25functioninitBigrender()26$brenders.each(function(n,object)27sum+;28if(isRender($(this)29display($(this);30count+;31flashn=true;32else33flashn=false;35);38/判定时候需要渲染39functionisRender(object)40offsetTop=object.offset().top;41ojh=object.outerHeight(true);42st=Math.max(document.body.scrollTop|document.documentElement.scrollTop);44if(offsetTop+ojh+options.threshold=stoffsetTop-options.threshold(st+winHeight)45returntrue;46elsereturnfalse;50/渲染textarea内的代码51functiondisplay(object)52$display=object.find(options.textarea).eq(0);53if(options.remove)54object.append($display.val();55$display.remove();56else57object.append($display.val();61/屏幕绑定滚动条事件，当待渲染的内容进入可视屏幕就触发isRender函数62functionscrollDisplay()63$(window).scroll(function()65if(countsum)66$brenders.each(function(n,object)67if(flashn=false)68if(isRender($(this)69display($(this);70count+;71flashn=true;727576);78);80;81)(jQuery);调用方式1$.fn.bigrender(threshold:100);/提早100像素开场渲染渲染前article>渲染后article>bigrender通过减少DOM节点，加快首屏的渲染，但是，它也是有额外的性能损耗的，能够看到上面渲染前textarea里面的代码，在服务端把代码保存在隐藏的textarea里面，所以在服务端会把代码转义：尖括号等都被转义了，这个会增加服务器的压力；而且，这个的改造只是前端的渲染，服务器照旧是一次过计算所有的数据，输出所有的数据，这一点没有得到提高。