1、减少DOM与js语法的多次交互。
如： 插入5000 个a 进入到 div1 中。 如一边循环，一边+= innerHTML 的话，就算是多次产生过桥费，数据交互过多。 那么如果先定义一个 变量，等5000 次 循环完之后 在插入到 div1 结构里面的话，那么等于就过桥了一次，这样会大大的减少交互的时间，减轻服务器的承受。
这是多次操作DOM的。
<script>
let ul1 = document.querySelector('#ul1');
console.time('yc');
for(let i =0;i<5000;i++){
ul1.innerHTML += '<li></li>'
}
console.timeEnd('yc')
</script>
同样的，下面的例子是先创建了一个变量，测试完性能上大大提升，有兴趣的可以根据代码去测试下。
<script>
let ul1 = document.querySelector('#ul1');
let sliHtml = '';
console.time('yc');
for (let i = 0;i<5000;i++){
sliHtml+='<li></li>'
}
ul1.innerHTML = sliHtml;
console.timeEnd('yc')
</script>
2、 根据用户情况选择是否用DOM方法，还是 innerHTML。
经过测试，谷歌内核的偏向于DOM方法的用时少， ie 、火狐等内核的浏览器，会对innerHTML 操作DOM结构的用时会少。
所以要根据公司分析，来决定用那种方法来操作DOM结构。
<script>
let ul1 = document.querySelector('#ul1');
//先用DOM方法去插入元素
console.time('yc');
for (let i=0;i<5000;i++){
let liHtml = document.createElement('li');
ul1.appendChild(liHtml);
}
console.timeEnd('yc');
//下面是用innerHTML去直接插入内容
let sliHtml = '';
console.time('yc');
for (let i = 0;i<5000;i++){
sliHtml+='<li></li>'
}
ul1.innerHTML = sliHtml;
console.timeEnd('yc')
</script>
3、克隆节点，因为创建一个节点，进行复制，会比多次创建节点好。
// 创建一个节点，用克隆的方法去做
console.time('yc');
let liHtml = document.createElement('li');
liHtml.innerHTML = 'li';
for(let i = 0;i<5000;i++){
let NewLiHtml = liHtml.cloneNode(true);
ul1.appendChild(NewLiHtml)
}
console.timeEnd('yc');
4、局部变量的方法，
如：循环时候的 length，提前声明一个局部变量，会提升一些性能，提升的不会太高，但是积少成多，也会影响到一些性能。
// 如1：
let len = liHtml.length;
for(let i = 0;i<len;i++){
``````
}
// 如2：
let doc = document;
let oDiv = doc.getElementsByTagName('div')
5、尽量使用新的获取元素的方法，如querySelector、querySelectorAll 去选择元素。
let ul1 = document.querySelector('#ul1');
6、在插入节点前，将节点内的内容先填入好，在appendChilden 进去，性能上会有大大的提升。
7、添加样式利用 cssText 的方法，统一添加。
8、缓存布局信息。 如先把元素的位置用变量存起来，然后去操作这个变量的参数。
9、文档碎片整理。 这个相当于买了5000个 火腿肠，你每一次拿一根回家，然后在去超市拿一根，回家，然后在回去，就这样跑了5000次。 那么用createDocumentFragment（）的方法，就相当于你买了一个袋子，一下把5000个火腿肠装起来，一次性的拿回家。
10、 事件委托。详情待定。
11、逻辑和视图分离。
利用jq 的 tmpl（）的模板。详情待定。
先整理下方法，后期陆续将测试案例代码 写上来。
