大流量网站性能优化:一步一步打造一个适合自己的BigRender插件_html/css_WEB-ITnose
BigRender
当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢?
常见的也是相对简单易行的一个优化方案是 图片的延迟加载。一个庞大的页面,有时我们并不会滚动去看下面的内容,这样就浪费了非首屏部分的渲染,而这些无用的渲染,不仅包括图片,还包括其他的 DOM 元素,甚至一些 js/css(某些js/css 是根据模块请求的,比如一些 ajax),理论上,每增加一个 DOM,都会增加渲染的时间。有没有办法能使得 HTML、js、css 都能按需加载呢?答案是肯定的,这就是本文要讲的 BigRender。
业界有很多 BigRender 在生产环境中的案例,比如 新浪,美团,途牛旅行网,360网址导航,淘宝商品详情页 等等。查看它们的源代码(ctrl+u),ctrl+f 搜索 textarea 关键字,很容易可以看到一些被 textarea 标签包裹的 HTML 代码。
比如途牛:
而这些被 textarea 标签包裹的 HTML 代码,只是 textarea 的 value 值,并没有渲染到 DOM 树上。没错,BigRender 通常就是用 textarea 标签包裹 HTML 代码(js/css),当作其 value 值,等到合适的时机(通常当 textarea 标签出现或者即将出现在用户视野时)将 textarea 中的 HTML 代码取出,用 innerHTML 动态插入到 DOM 树中,如有必要,取出 js/css 代码(正则),动态执行它们。(是不是和图片的延迟加载很相似?)
玉伯指出:
页面下载完毕后,要经过 Tokenization — Tree Construction — Rendering. 要让首屏尽快出来,得给浏览器减轻渲染首屏的工作量。可以从两方面入手: 1. 减少 DOM 节点数。节点数越少,意味着 Tokenization, Rendering 等操作耗费的时间越少。(对于典型的淘宝商品详情页,经测试发现,每增加一个 DOM 节点,会导致首屏渲染时间延迟约 0.5ms.) 2. 减少脚本执行时间。脚本执行和 UI Update 共享一个 thread, 脚本耗的时间越少,UI Update 就能越发提前。
为什么是用 textarea 标签存放大块 HTML 内容?还是可以看下玉伯的 这篇文章。淘宝的 kissy 就内置了 DataLazyload 组件。(插播:美团详情页还有用到 script 标签做 BigRender 优化,详情请见下面的 “其他” 一节)
接下去就来一步一步实现一个适合自己的 BigRender 插件,我希望可以延迟加载 HTML 元素、js 以及 css。
T.datalazyload
仿照 jQuery 的写法我定义了一个全局对象 T,将延迟加载的实现代码封装在了 T.datalazyload 对象中,将需要延迟加载的代码 “包裹” 在 textarea 标签中,设置其 visibility 属性为 hidden,并赋予该标签一个特殊的类名(为了做事件监听),比如叫做 “datalazyload”。为了方便,我规定每个做 bigrender 优化的 textarea 的父节点都只有一个子孩子(即该 textarea 元素),这一点非常重要必须遵守,因为后面代码有针对此的特殊处理。(注意要设置好父节点的高度宽度,和 dom 渲染后的高度宽度保持一致)
一些 HTML/js/css 代码都可以包裹在 textarea 标签中,例如:
alert("I am lazyload zone!"); .main {margin: 0 auto; text-align: center; padding-top: 200px; width:1000px; height:1000px; border:5px black dashed;} .second {margin: 0 auto; width:1000px; height:200px; border: 5px purple dotted; padding-top: 100px; text-align: center;} 我是延迟加载的部分!
init
给 T.datalazyload 对象定义一个 init() 方法,初始化页面时监听 scroll、resize 以及移动端的 touchmove 事件,当触发这些事件时,回调函数内判断延迟加载部分是否已经出现在视口。
init: function(config) { var cls = config.cls; this.threshold = config.threshold ? config.threshold : 0; this.els = Array.prototype.slice.call(T.getElementsByClassName(cls)); this.fn = this.pollTextareas.bind(this); this.fn(); T.addEvent(window, "scroll", this.fn); T.addEvent(window, "resize", this.fn); T.addEvent(doc.body, "touchMove", this.fn);}
config 是配置参数,其 cls 属性表示需要延迟加载的 textarea 的类名,threshold 为阈值,单位 px,表示当 textarea 距离视口多少像素时,进行预加载。
将需要延迟加载的元素存入一个数组(this.els),(某 textarea 元素)后续一旦完成加载随即在数组中删除该元素。事件监听的回调函数为 pollTextarea() 方法。
pollTextarea
pollTextareas: function() { // 需延迟加载的元素已经全部加载完 if (!this.els.length) { T.removeEvent(window, "scroll", this.fn); T.removeEvent(window, "resize", this.fn); T.removeEvent(doc.body, "touchMove", this.fn); return; } // 判断是否需要加载 for (var i = this.els.length; i--; ) { var ele = this.els[i]; if (!this.inView(ele)) continue; this.insert(ele); this.els.splice(i, 1); }}
这个方法的作用是判断需要延迟加载的元素是否已经在视口,如果是,则进行加载(触发 insert 方法),并且在数组中删除该元素;如果数组为空,则表明需要延迟加载的部分都已经加载完,移除事件监听,整个延迟加载结束。
insert
接下去看 insert 方法。inert 方法的参数是需要延迟加载的 textarea 元素,很显然,我们需要解析的代码全在 textarea.innerHTML 中。我们用 extractCode 方法取出其中的 js/css 代码,然后将 js/css 过滤掉,这样剩下的就全是 HTML 代码了,将其插入 DOM 中(这正是前文说的 “每个 textarea 的父节点都只有一个子孩子” 的原因,可以直接用父节点 innerHTML 操作),如果有 loading 效果,一般在父节点加个 loading 类,移除即可。最后再动态执行 js 脚本,插入 css 样式。
insert: function(ele) { var parent = ele.parentNode , txt = this.decodeHTML(ele.innerHTML) , matchStyles = this.extractCode(txt, true) , matchScripts = this.extractCode(txt); parent.innerHTML = txt .replace(new RegExp("]*>([\S\s]*?)\s*>", "img"), "") .replace(new RegExp("]*>([\S\s]*?)\s*>", "img"), ""); if (matchStyles.length) for (var i = matchStyles.length; i --;) this.evalStyles(matchStyles[i]); // 如果延迟部分需要做 loading 效果 parent.className = parent.className.replace("loading", ""); if (matchScripts.length) for (var i = 0, len = matchScripts.length; i
extractCode
我们通过正则将 js 和 css 标签部分取出:
extractCode: function(str, isStyle) { var cata = isStyle ? "style" : "script" , scriptFragment = "]*>([\S\s]*?)" + cata + "\s*>" , matchAll = new RegExp(scriptFragment, "img") , matchOne = new RegExp(scriptFragment, "im") , matchResults = str.match(matchAll) || [] , ret = []; for (var i = 0, len = matchResults.length; i
成功地将 script 以及 style 标签内的内容提取了出来,巧妙地用了正则中的子表达式。
evalScripts/evalStyles
脚本执行,样式渲染。
evalScripts: function(code) { var head = doc.getElementsByTagName("head")[0] , js = doc.createElement("script"); js.text = code; head.insertBefore(js, head.firstChild); head.removeChild(js);},evalStyles: function(code) { var head = doc.getElementsByTagName("head")[0] , css = doc.createElement("style"); css.type = "text/css"; try { css.appendChild(doc.createTextNode(code)); } catch (e) { css.styleSheet.cssText = code; } head.appendChild(css);}
优缺点 & 适用场景
简单讲讲 BigRender 优化的优缺点,以及适用场景。
优点很明显,因为减少了首屏 DOM 的渲染,所以能加快首屏加载的速度,并且能分块加载 js/css,非常适用于一些模块区分度很高的网站(个人觉得大型网站的模块区分度普遍越来越高了)。
缺点是需要更改 DOM 结构(DOM 节点的替换和渲染),可能会引起一些重排和重绘。一些没有开启 js 功能的用户将看不到延迟加载的内容(可以用 noscript 标签给出一个善意提醒)。最大的缺点可能是不利于 SEO,一些依赖于 SEO 的网站可能需要在 SEO 上下点功夫了,比如美团。
关于 SEO,可以看下 http://www.seoqx.com/lynx 这个网站,能模拟搜索引擎蜘蛛对网站的爬取情况。美团对于 BigRender 以及 SEO 解决方案 [美团网案例]改善BigRender技术导致的SEO问题
bigrender 通过减少 DOM 节点,加快首屏的渲染,但是,它也是有额外的性能损耗的,渲染前textarea 里面的 html 代码,在服务端把 html 代码保存在隐藏的 textarea 里面,所以在服务端会把 html 代码转义:尖括号等都被转义了,这个会增加服务器的压力;而且,这个改造只是前端的渲染,服务器依旧是一次计算所有的数据,输出所有的数据,这一点没有得到提高。
一般来说,使用都是后端拼接成 html 字符串,然后塞入 textarea 标签中,吐给前端。
demo
如果要做一个完整的 BigRender demo,可能比较复杂,还要涉及到后端。
之前学习 lazyload 时做过一个图片的延迟加载 demo,see http://hanzichi.github.io/cnblogs/2016/Feb/picture-lazyload/。因为 BigRender 是 lazyload 的加强版,所以简单地做了个 BigRender 版本的图片延迟加载 http://hanzichi.github.io/cnblogs/2016/Mar/bigrender/,实现的具体代码可以 check bigrender.js。求 star,求 fork~
其他
除了首页部分用了 textarea 做 BigRender 优化外,美团还用到了 script 标签做优化。比如 这个商品详情页
给 script 标签设置个非 “text/javascript” 的 type,可以下载这段 js,但不执行,这种做法似曾相识,在 labjs 中看到过。
更多可以参考 前端优化三续:用script存放html代码来减少DOM节点数
Read More
- 淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式(推荐!!如果被Q了可以 看这里)
- 前端优化:BigRender的textarea延迟渲染和关于LABjs的实践
- lazyload延迟加载组件
- KISSY懒加载data lazyload 的应用
- kissy datalazyload.js 源码
- kissy DataLazyload API
- kissy DataLazyload demos
打赏支持作者写出更多好文章,谢谢!
打赏作者
打赏支持作者写出更多好文章,谢谢!
关于作者:韩子迟
a JavaScript beginner 个人主页 · 我的文章 · 4 ·