性能概念

捋一捋一些概念 静态化，异步请求合并，bigrender，lazyload，J-hub，组件化...

页面静态化

参考 淘宝deal页的静态化.pdf

几个概念

静态页面 —— .html

动态页面 —— 页面上的数据通过执行PHP得到，之后生成的网页 静态化 —— 将动态网页以静态网页的形式发布，类似一个快照，所有用户访问这个“快照”

为什么要静态化？

对于用户来讲，提高了访问的速度。对于后台服务来讲，访问脱离数据库，减轻了数据库访问压力

页面静态化，势必要剥离出很多“差异化的东西”，类似于与浏览者，时间，地域，cookie相关的信息，这些东西就要‘单独’去请求。然而大量的请求也是不好滴，服务器有压力，代码逻辑也不好维护，于是提出合并请求机制。

异步请求合并机制

参考：Combo 主站异步请求合并机制【新】

几个概念

Combo —— 实现一个url请求多个静态文件（目前只支持css和js）并缓存

ComboAjax —— 将多个异步请求合并成一个，发往服务器端，服务器端分解并处理，合并结果并返回

怎么使用呢？

前端： 如果发一个，直接Y.mt.www.Ajax.io()代替原来的Y.io() 如果想自定义合并多个，Y.mt.www.Ajax.creat -> add -> send，你来决定何时发 全局合并，页面加载www-ajax模块会调用init方法，它会扫描带data-comboajax的节点，然后自行create -> add -> send请求

后端： 几乎没变，只是把jsonPack变为outputJson了

BigRender

参考：新首页使用BigRender 主站目前用到的懒加载技巧

前话 如果一个网站的内容很多的话，对于浏览器来说，需要耗费很大的力气去渲染，等Dom ready之后才能开始执行js。为了保证重要的模块尽快渲染，尽快可用，提出bigrender。

原理 把内容放到textarea中，DOM树就暂时不用管它了。监听视口，出现在视口内，再把内容拿出来。

用法

后端：

    要转义'&'与'</textarea' why?(隐隐约约知道)

前端：

    J-br 自动初始化，
    Y.mt.BigRender.init()手动初始化，
    TemplateHelper::handleHtmlForBigRender()生成Bigrender所需

图片的lazyload

参考：图片的lazyloading

BigRender缩短了DOM树的构建时间，让用户尽早的看到页面。同时，图片的加载时间也很重要。为此，让用户“尽早”得看到“想要看到”的图片，这很重要 lazyload通过控制img的src或css中的background-image来控制图片的加载时机

组件化

参考：组件化

什么是组件化？ 以页面组件为单位，聚合前端资源。包含view,template,sass,js. 至于生命周期管理如何进一步完善了组件化的思想，还没整明白。