性能优化

ajax优化

1、缓存ajax：
a、异步并不等于及时
2、请求使用GET
a、- 当使用XMLHttpRequest时，而URL长度不到2K，可以使用GET请求数据，GET相比POST更快速。、

b、POST类型请求要发送两个TCP数据包。
①先发送文件头
②再发送数据。

d、GET
①类型请求只需要发送一个TCP数据包。
②取决于你的cookie数量。

cookie

1、减少cookie的大小
2、使用无cookie的域
①比如图片CSS等静态文件放在静态资源服务器上并配置单独域名，客户端请求静态文件的时候，减少COOKIE反复传输时对主域名的影响。

dom优化

1、优化节点修改。
使用cloneNode在外部更新节点然后再通过replace与原始节点互换。

var orig = document.getElementById('container');
var clone = orig.cloneNode(true);
var list = ['foo', 'bar', 'baz'];
var content;
for (var i = 0; i < list.length; i++) {
    content = document.createTextNode(list[i]);
    clone.appendChild(content);
}
orig.parentNode.replaceChild(clone, orig);

2、优化节点添加

多个节点插入操作，即使在外面设置节点的元素和风格再插入，由于多个节点还是会引发多次reflow。

a、优化的方法是创建DocumentFragment，在其中插入节点后再添加到页面。
如JQuery中所有的添加节点的操作如append，都是最终调用DocumentFragment来实现的，

createSafeFragment(document) {
        var list = nodeNames.split("|"),
               safeFrag = document.createDocumentFragment();
        if (safeFrag.createElement) {
            while (list.length) {
                safeFrag.createElement(
                    list.pop();
                );
            };
        };
    return safeFrag;
};

3、优化css样式转换

如果需要动态更改CSS样式，尽量采用触发reflow次数较少的方式。

a、如以下代码逐条更改元素的几何属性，理论上会触发多次reflow

element.style.fontWeight = 'bold' ;
element.style.marginLeft= '30px' ; 
element.style.marginRight = '30px' ;

b、可以通过直接设置元素的className直接设置，只会触发一次reflow

element.className = 'selectedAnchor' ;

4、减少dom元素数量

a、在console中执行命令查看DOM元素数量。

`document.getElementsByTagName( '*' ).length`

b、正常页面的DOM元素数量一般不应该超过1000

c、DOM元素过多会使DOM元素查询效率，样式表匹配效率降低，是页面性能最主要的瓶颈之一。

5、dom操作优化

a、DOM操作性能问题主要有以下原因。
①、DOM元素过多导致元素定位缓慢。
②、大量的DOM接口调用。
：
JAVASCRIPT和DOM之间的交互需要通过函数API接口来完成，造成延时，尤其是在循环语句中。

③、DOM操作触发频繁的reflow(layout)和repaint。
④、layout发生在repaint之前，所以layout相对来说会造成更多性能损耗。
reflow(layout)就是计算页面元素的几何信息。
repaint就是绘制页面元素。
⑤、对DOM进行操作会导致浏览器执行回流reflow。
b、解决方案

⑥、
⑦、
⑧、
⑨、
⑩、

ajax优化

cookie

dom优化

推荐阅读更多精彩内容