大家都知道lazyload.js预加载技术，它极大的加快了网页打开速度，但是今天我们所讲的并不是介绍lazyload.js是如何工作的，而是重新认识一款新的优化神器-BigRender，从名字是可以很清楚的理解这一技术特点，bigrender顾名思义是对大页面渲染的优化。bigrender的原理是通过某种方式，将首屏不需要的html代码先存放起来。渲染好首屏后，再将存储好的html代码逐步渲染出来。
效果：
打开天猫首页，首屏已经渲染好了，其他的内容，通过一个gif图来表示，这些没有被渲染的内容都被保存在一个隐藏的textarea框内，这么做的好处是显而易见，减少DOM节点，加快首屏的渲染，提高用户体验，如果首屏够长，内容够多，都可以进行这样的处理，速度那是没得说！
bigrender使用方法：
js代码
( function ($){ $.fn.bigrender = function (opts){ var winHeight = document.documentElement.clientHeight; var sum = 0; var count = 0; var flash = new Array(); 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 ; } function display(object){ $display = object.find(options.textarea).eq(0); if (options.remove){ object.append($display.val()); $display.remove(); } else { object.append($display.val()); } } function scrollDisplay(){ $(window).scroll( function () { 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}); |
渲染前html
< article class = "br-warp" style = "min-height: 300px;" >< textarea class = "br-rendered" style = "display:none" >< div >html内容。。。</ div ></ textarea ></ article > |
渲染后html
< article class = "br-warp" style = "min-height: 300px;" >< div >html内容。。。</ div ></ article > |
优缺点 & 适用场景
–优点很明显，因为减少了首屏 DOM 的渲染，所以能加快首屏加载的速度，并且能分块加载 js/css，非常适用于一些模块区分度很高的网站。
–缺点是需要更改 DOM 结构（DOM 节点的替换和渲染），可能会引起一些重排和重绘。
具体查看插件主页：https://github.com/hanzichi/hanzichi.github.io/tree/master/2016/bigrender
