前端页面的优化

关于页面代码优化的总结:
    其实,之前没有接触过这些东西
    参考:
        前端优化带来的思考
        http://www.cnblogs.com/yexiaochai/p/4901341.html
    0.优化页面的难点???
        ① 页面关系错综复杂，需求迭代容易出BUG；
        ② 框架每次升级都会导致额外的请求量，常加载一些业务不需要的代码；
        ③ 第三方库泛滥，且难以维护，有BUG也改不了；
        ④ 业务代码加载大量异步模块资源，页面请求数增多；
    1.如何优化页面
        1.传输层面:
            减少请求次数,降低请求量
        2.执行层面:
            减少重绘和回流(善于利用页面的缓存)
    2.提前了解一下页面的重绘和回流:
        1.从页面的执行过程来看
            http://www.css88.com/archives/4996
            1.浏览器获取到页面代码,解析为DOM树(包括display:none)
                注释:DOM树只是识别节点,不认识样式
            2.DOM+样式结果体的组合---> 解析为render tree 元素树
               渲染节点,(display:none)的样式直接不渲染(节点不在render树上面的)
               但是 visibility:hidden在rendertree上面,他要占据位置的
            3.浏览器根据render tree来绘制页面
        2.什么是回流和重绘??
            1.回流:
                页面布局发生改变的时候,就会回流.(重新构造render tree ),仅仅是受影响的部分重新构建和渲染(不是整个 render tree)
                回流,一定会引发重绘
                display:none: 影响了布局,会导致回流的...
                
                回流使用的场景:
                    1.页面刚开始加载的时候,必然回流和重绘的
                    2.元素的位置改变的时候
                    3.删除或者添加可见的DOM节点
                    4.元素的尺寸改变
                    5.浏览器的尺寸改变的时候--resize()事件发生的时候
                    
            2.重绘:
                元素更新属性,但是不会影响布局,就叫做重绘的.
        3.对待页面中的大量重绘和回流,浏览器会做一些处理的:
            1.浏览器会整一个队列,当回流达到了某个数量或者到了一定的时间间隔
                就执行一次重绘,实现了回流的整合
            2.但是,程序中的一些代码会影响浏览器,强制浏览器执行回流的队列 ,浏览器的回流优化
                就不起作用了.
                这些操作包括:
                    1. offsetTop, offsetLeft, offsetWidth, offsetHeight
                    2. scrollTop/Left/Width/Height
                    3. clientTop/Left/Width/Height
                    4. width,height
                    5. 请求了getComputedStyle(), 或者 IE的 currentStyle
                原因:
                    因为获得这些属性(宽高),浏览器需要判断在回流队列中,是否有影响宽高的值
                    所以,需要提前执行队列里面的内容
        4.程序员如何减少重绘和回流呢???
            1.使用cssText:的方式来改变样式:(变成字符串的拼接,就可以了)
                el.style.cssText += "; 
                left: " + left + "px; 
                top: " + top + "px;";
            2.造作元素的处理进行'离线操作',操作完之后,再一起挂载到DOM节点上面
                1.在页面增删节点的时候:
                    使用DocumentFragment进行缓存操作
                2.使用display:none
                3.使用cloneNode(true or false)和replaceChild 技术
            3.尽量减少对浏览器flush队列的属性的访问操作,如果必要访问,尽量使用缓存来操作
            4.让元素脱离动画流,减少render tree的规模    
    3.传输层面的页面优化(优化页面的核心)
        1.网页是自上而下来解析渲染的,边解析边渲染,页面内的css文件会阻塞渲染,异步的css导致回流的
        2.无序并发导致朱梓源的速度下降
        3.尽量使用浏览器的缓存资源,
            首屏载入是页面优化的重点
                1.减少请求数
                    合并样式和脚本文件
                    合并背景图片
                    css3 的图标,Icon Font
                2.减少请求的数量:
                    开启Gzip
                    优化静态资源如jQery--->Zepto,去除冗余代码
                    图片无损压缩
                    图片的延时加载
                    减少cookie的携带
                        1.使用缓存
                        2.按需加载
                        3.fake 页技术
                            先是页面可视化
                            之后,在不实现交互就可以的
                        4.CDN
                            感觉好像迅雷啊
    4.如何解决头花页面上的难点??
        1.UI 
            使用一个UI核心
            打包工用的核心UI
        2.拆分页面(组件式的开发)
            1 避免使用全局的业务类样式，就算他建议你使用
            2 避免不通过接口直接操作DOM
        3. 对于资源加载的处理:
            使用核心框架层
            MVC骨架
            异步模块加载器
                require或者seaJS  --这个东西不止一次听说了,需要学习一下子了
            业务公共模块
            独立的page.js资源  又是一个点,我还不会使用webpack,,,打包工具呢,,
            全局的css资源
        4.使用资源缓存技术:
            ① 浏览器缓存
            ② localstorage缓存
            ③ application缓存
                    Hybrid载入 --这个到底是什么东西
        5.前端的工程化
            要完成前端工程化，少不了工程化工具，requireJS与grunt的出现