优化dom的结构，无非就是引用保存，动画优化，节点保存，更新节点等基本操作。
曾记得，以前在网上翻阅html的时候，很多人都会不约而同(儿童)的说道，获取到dom节点后一定要记得保存。否则，下场很难看的。
为什么~为什么~为什么~
我们都知道所谓的js其实是dom，bom，ecma结合的产物。 本来我js挺快的，你非要去的dom说说话。 那怎么办，只有敲敲门，等dom来回应你呀~ 但是，这个等待时间灰常长。
看个demo吧.
var times=10000;var time1 = function(){ var time = times; while(time--){ //dom的两个操作放在循环内 var dom = document.queryselector(#div1); dom.innerhtml+=a; }};var time2=function(){ var time = times, dom = document.queryselector(#div1); while(time--){ //dom的一个操作放在循环内 dom.innerhtml+=a; }};var time3=function(){ var time = times, dom = document.queryselector(#div1), str = ; while(time--){ //循环内不放置dom的操作 str +=a; } dom.innerhtml=str;}console.time(1); //设置时间起点time1();console.timeend(1);console.time(2); //设置时间起点time2();console.timeend(2);console.time(3); //设置时间起点time3();console.timeend(3);//测试结果为:1: 101.868ms2: 101.560ms3: 13.615ms
当然，这只是个比较夸张的例子了，当你过多的频繁操作dom的时候，一定要记得保存。 而且，保存一定是要保存所有涉及dom相关的操作。
比如. style,innerhtml等属性。
而这样做的原理就是减少重流和重绘的次数。
重流重绘发生的情况 那重流和重绘通常什么情况下会发生呢？重流发生情况:
添加或者删除可见的dom元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）
页面渲染初始化（这个无法避免）
浏览器窗口尺寸改变
总的来说，就是改变页面的布局，大小，都会发生重流的情况。那重绘什么时候会发生呢？ 发生重流就一定会发生重绘，但是，重绘的范围比重流稍微大了一点。比如，当你仅仅改变字体颜色，页面背景颜色等 比较肤浅的操作时，是不会打扰到重排的。
合并dom的操作 当我们这样操作时:
div.style.color=red;div.style.border=1px solid red;
浏览器会很聪明的将两次重排合并到一次发生，节省资源。 其实函数节流的思想和这个有异曲同工的妙处
var throttle = (function(){ var time; return function(fn,context){ cleartimeout(time); //进行函数的节流 time = settimeout(fn.bind(context),200); }})()
这个技巧通常用在你调整浏览器大小的时候。但是，如果中间，你访问了offsettop,clienttop等 立即执行属性的话。那结果你就么么哒了。
div.style.color=red; //积累一次重排记录var height = div.clientheight; //触发重排div.style.border=1px solid red; //再次积累一次重排
这时候，浏览器已经被你玩傻了。 所以，给的一点建议就是，如果要更改dom结构最好一次性整完，或者，要整一起整~我们上面的css修改，还可以这样
div.style.csstext=color:red;border:1px solid red; //覆盖原来的cssdiv.classlist.add(change); //利用class来整体改动
dom操作的优化 dom的操作无非就crud。这里简单说一下基本的api
创建节点 var div = document.createelement(div);
查找节点 var divs = document.queryselectorall('div'); //很多个，放在数组内var onlydiv = document.queryselector('div'); //只有一个//以及document.getelement系列
查看节点 var html = div.innerhtml; var outer = div.outerhtml; //这两个是非常常用的var classnames = div.classlist;var classname = div.classname;var tagname = div.tagname;var id = div.id;var style = div.getattribute(style);//....
移动节点 ele.replacechild(replace,replaced); //replace代替replaced//添加子节点ele.appendchild(child);//删除子节点ele.removechild(child);//插入子节点ele.insertbefore(newele,referenceele);
ok~ 其实，上面所说的这些api只要涉及到dom操作的都会发生重排。所以，这里是地方可以优化的.
使用fragment 当我们需要批量加入子节点的时候，就需要使用fragment这个虚拟片断，来作为一个容器.比如，我们需要在div里面添加100个p标签
var times = 100;var addp = function(){ var time = times, tag1 = document.queryselector('#tag1'); while (time--) { var p = document.createelement('p'); tag1.appendchild(p); }}var usefrag = function(){ var time = times, tag1 = document.queryselector('#tag1'), frag = document.createdocumentfragment(); while (time--) { var p = document.createelement('p'); frag.appendchild(p); } tag1.appendchild(frag);}console.time(1);addp();console.timeend(1);console.time(2);usefrag();console.timeend(2);//基本事件差为:1: 1.352ms2: 0.685ms
除了使用fragment片断，还可以使用innerhtml,outerhtml进行相关的优化操作。这里就不赘述了
ui操作的优化
这里想说的其实不多，就是学会使用absolute排版。 因为当你进行相关ui操作的时候，毫无疑问有可能不经意间，导致全屏的渲染。比如 校园二手街的布局，当你下滑的时候，他的headerbar便会发生扩大，布局较差的情况是整版重排。(傻逼傻逼傻逼)
他这里不一样，他直接使用absolute进行布局，脱离了文档流，防止页面过度的重排，赞~
最后：
优化之路漫漫，大家好自为之~