我在这尝试两个方面：-->DOM与js

-->DOM与浏览器

（最近在秒味视频上学到不少，哈哈哈）

一、DOM与js

1.js与dom的交互问题

频繁的与dom交互，是一件浪费时间与金钱的事情，这就需要我们尽量改进自己的代码，让我们想做的事情尽量在js中做的差不多了在去跟dom打交道。

下面的小例子就说明了问题：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

 <meta charset=utf-8>

 <title>dom优化相关</title>

 </head>

 <style>  

 </style>  

 <body>

     <div id="div1"></div>

      <script>

         window.onload =  function(){

             var nDiv = document.getElementById('div1');

             var str = '';

             /*console.time("innerHTML10000个a所用的时间");

             //每次循环dom都与js交互，太浪费时间啦

             for(var i=0;i<10000;i++){

                 nDiv.innerHTML += 'a';

             }

             console.timeEnd("innerHTML10000个a所用的时间");*/

             console.time("获得10000个a之后innerHTML所用的时间");

             //这种就减少了js与dom的交互，大量的循环只在js中实现

             for(var i=0;i<10000;i++){

                 str += 'a';

             }

             nDiv.innerHTML = str;

             console.timeEnd("获得10000个a之后innerHTML所用的时间");

         }

     </script>

 </body>

 </html>

(在chrome下)

这个时间的对比还是比较明显的喔。 对了，这console.time()和console.timeEnd()还挺好用的吧，其实console 还有好多亮瞎人眼的方法，可以自行google或百度脑补。

<------STOP  START------->：

写到上面代码时，用到了window.onload,然后这里暂时说点别的，看下面的代码：

        function t(){

             alert("1")

             }

         function b(){

             alert("2")

             }

          window.onload =t ;

          window.onload =b ;

对吧，这只会alert('2')嘛，也就是说window.onload不能同时加载多个函数，后面的会覆盖掉前面的。

那怎么办呢？ 这有一个简单易用的方法：

  function t(){

             alert("1")

             }

   function b(){

             alert("2")

             }

    window.onload = function(){

             t();

             b();

          }

这样就可以1和2都弹窗了。

不过更加庆幸的是，我们还有更好的方法来为 一个事件指派多个处理程序了那就是addEventListener和attachEvent：

        if(window.attachEvent){

             window.attachEvent('onload',function(){

                 alert('ie1');

             });

             window.attachEvent('onload',function(){

                 alert('ie2');

             });

         }else{

             window.addEventListener('load',function(){

                 alert('1');

             });

             window.addEventListener('load',function(){

                 alert('2');

             });

         }

就是ie中可能执行顺序会有点不一样而已啦。

<------STOP  END------->

2.在于dom交互时innerHTML与dom方法（像appendChild（）这样的方法）之间的效率比较：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

 <meta charset=utf-8>

 <title>dom优化相关</title>

 </head>

 <style>  

 </style>  

 <body>

     <div id="div1"></div>

     <ul id="oul"></ul>

     <script>

         window.onload =  function(){

             var UL = document.getElementById('oul');

             var str='';

             console.time('dom操作所用时间');

             for(var i=0;i<10000;i++){

                 var LI = document.createElement('li');

                 UL.appendChild(LI);

             }

             console.timeEnd('dom操作所用时间');

             console.time('innerHTML操作所用时间');

             for(var i=0;i<10000;i++){

                 str += '<li></li>';

             }

             UL.innerHTML = str;

             console.timeEnd('innerHTML操作所用时间');

         }

     </script>

 </body>

 </html>

下面是时间对比：

chrome：

FF：

奇异的事实证明两个浏览器下都是dom方法运行速度比较快。在我以前的认知里面两个浏览器的表现不应该是一致的，感觉ff下innerHTML应该会比dom快的。

此处也求高人指点。

3.我们知道与dom相关的行为都会牵扯到时间问题，那么怎么减少dom操作呢？

---->使用节点克隆

 <!DOCTYPE html>

 <html lang="zh">

 <head>

 <meta charset=utf-8>

 <title>dom优化相关</title>

 </head>

 <style>  

 </style>  

 <body>

     <div id="div1"></div>

     <ul id="oul"></ul>

     <script>

        window.onload =  function(){

             var UL = document.getElementById('oul');

             var str='';

             /*console.time('dom操作所用时间');

             for(var i=0;i<10000;i++){

                 var LI = document.createElement('li');

                 LI.innerHTML = 'li';

                 UL.appendChild(LI);

             }

             console.timeEnd('dom操作所用时间');*/

             console.time('克隆节点所用时间');

             var LI = document.createElement('li');

             LI.innerHTML = 'li';

             for(var i=0;i<10000;i++){

                 var newLi = LI.cloneNode(true);

                 UL.appendChild(LI);

             }

             console.timeEnd('克隆节点所用时间');

         }

     </script>

 </body>

 </html>

虽然相差不大，但是还是不一样的：

chrome：

--->尽量使用局部变量

下面两种写法也是会影响效率的，因为每次都要获取aLi.length集合也是要代价的，保存成局部变量会好些那。

          for(var i=0;i<aLi.length;i++){

                aLi[i].innerHTML = 'li';

            }
            var  len = aLi.length;

            for(var i=0;i<len;i++){

                aLi[i].innerHTML = 'li';

            }

在上面添加10000个节点例子中尝试：

同样的下面两种写法也是有区别的：

            var Div = document.getElementById();

            var LI = document.getElementById();

            var Input = document.getElementById();

            //改成下面这样会比较好

            var doc = document;

            var Div = doc.getElementById();

            var LI = doc.getElementById();

            var Input = doc.getElementById();

---->还有就是尽量只是用获取元素节点的方法：

            childNodes -->元素节点、文本节点

            children--> 元素节点

             (利用querySelectorAll)

            var oul  = document.getElementById('uli');

            var ali = oul.getElementById('li');

            -->

            var aLi = document.querySelectorAll('#uli li');

二、dom与浏览器

1.添加操作（尽量在appendChild前添加操作）

 <!DOCTYPE html>

 <html lang="zh">

 <head>

 <meta charset=utf-8>

 <title>dom优化相关</title>

 </head>

 <style>

    #div1 {

      width: 100px;

      height: 100px;

      background: red;

      position: absolute;

    }

 </style>  

 <body>

     <div id="div1"></div>

     <ul id="oul"></ul>

     <script>

          window.onload = function(){

             var oul = document.getElementById('oul');

             console.time('dom操作时间');

             for(var i=0;i<10000;i++){

                 var oli = document.createElement('li');

                 //注意下面两句的位置

                 //oul.appendChild(oli);

                 //oli.innerHTML = 'li';

                 oli.innerHTML = 'li';

                 oul.appendChild(oli);

               }

             }

             console.timeEnd('dom操作时间');

          }

     </script>

 </body>

 </html>

还是有一定的差别喔，可以自己动手试一下。

2.合并dom操作（利用cssText）

 window.onload = function(){

            var oul = document.getElementById('oul');

            console.time('dom操作时间');

            for(var i=0;i<;i++){

                var oli = document.createElement('li');

                //事实上我们总以为下面第二种方法会更好些，时间会更短，但是，分别在FF和chrome中测试的话，还是有点奇妙的。（chrome中神奇的第二种更快些）

                oli.style.width = '100px';

                oli.style.height = '100px';

                oli.style.background = 'red';

                //oli.style.cssText = 'width:100px;height:100px;background:red';

            }

            console.timeEnd('dom操作时间');

        }

3.缓存布局信息：

window.onload = function(){

            var oDiv = document.getElementById('div1');

            var l = oDiv.offsetLeft;

            var t = oDiv.offsetTop;

            //setInterval(function(){

            //    oDiv.style.left = oDiv.offsetLeft + 1 + 'px';

            //    oDiv.style.top = oDiv.offsetTop + 1 + 'px';

            //},30);

            //把总是会用到的布局信息缓存起来，这样就不用总是频繁的去访问dom了

            setInterval(function(){

                l++;

                t++;

                oDiv.style.left = l + 1 + 'px';

                oDiv.style.top = t + 1 + 'px';

            },30);

        }

我这里一般测试时间都是在chrome下，有的ff或别的浏览器不一定会一样喔，欢迎留言一起钻研。

js DOM优化相关探索的更多相关文章

  1. JS DOM视频相关的知识

    1.实现点击a标签改变图片时,如果a的href属性有一个目标网址,但是点击又必须跳转到另外一张图,往往会最后跳转到目标网址,可以在onclick事件函数中加入ruturn false,阻止跳转到页面. ...

  2. DOM的相关优化

    为什么要进行DOM优化? DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint). 首先先说一些 ...

  3. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  4. DOM优化

    一:DOM与浏览器: 重排:改变页面的内容. 重绘:浏览器显示的内容. 添加顺序:尽量在appendchild之前. 合并DOM操作-利用csstext, 缓存布局信息 文档碎片. 二 DOM 与事件 ...

  5. js css优化-- 合并和压缩

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...

  6. js 性能优化 篇一

    JS性能优化 摘自:http://www.china125.com/design/js/3631.htm  首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内 ...

  7. js性能优化文章集锦

    总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...

  8. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

  9. JS、JQ相关小技巧积攒

    JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面 ...

随机推荐

  1. c# 导出数据到Excel模板

    最近在做一个发邮件的功能,客户要求需要导出一个Excel附件,并给了附件的格式, eg: Last Name 姓 First Name 名 Chinese Characters汉字书写(仅大陆人填写) ...

  2. MongoDB基本管理命令

    MongoDB是一个NoSQL数据库系统:一个数据库可以包含多个集合(Collection),每个集合对应于关系数据库中的表:而每个集合中 可以存储一组由列标识的记录,列是可以自由定义的,非常灵活,由 ...

  3. android书籍

    教程 源码下载 高薪招聘 Cocos2d-x 博客 签到 视频教程 wiki     帖子 搜索 热搜:二维码定时器手电筒滑块斗地主书架定位买手机聊天游戏开发游戏股票查询机顶盒通话记录二维码扫描振动器 ...

  4. Layout in Rails

    参考链接:http://guides.rubyonrails.org/layouts_and_rendering.html#structuring-layouts layout layout最基本的使 ...

  5. vs2015 无法启动IIS Express Web服务器

    今天在VS2015上装了 之后无法启动IIS Express Web服务器. 然后我去查看了windows日志发现vs创建的虚拟目录不见了(至于是不是以上原因导致的没去查明) 然后在vs2015中点击 ...

  6. NOIP2014 总结

    想了很久,才开始动笔. 怎么说,感觉挺对不起自己的.愚蠢的失误让我正好卡着一等线,真希望不要是二等奖. 最难过的是,努力全葬送在愚蠢上面了. 不过也好,学会平静自己也是一种能力. 半期考试也遭的一塌糊 ...

  7. 论ubuntu的作死技巧

    此处记录自己弄崩系统的几大杀器,长期更新. 1. sudo apt-get autoremove

  8. ＃笔记＃ CSS工作流

    目录 明确代码规范 CSS Reset 关于前缀 浮动闭合 CSS的前处理器(Preprocessor)和后处理器(Postprocessor) 明确代码规范 目的是确保跨平台协作多人开发的代码显示界 ...

  9. [Leetcode][JAVA] Flatten Binary Tree to Linked List

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6   ...

  10. 图的邻接多重表和搜索（C++版本）

    最近在学数据结构,学到图这一章,网上的C++版本的代码乱得不行,所以自己写了一个完整C++版本的放这里. 用邻接多重表表示一个无向图,并给出DFS和BFS搜索代码.邻接多重表好处就是贼直观,几条边就几 ...