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() 的模板. 详情待定.
先整理下方法, 后期陆续将测试案例代码 写上来.
来源: http://www.qdfuns.com/article/22692/d2c9f48304d0fd9ef3011969c079347e.html