我在这尝试两个方面：-->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# json转换实例

    用户实体: public class UserModel { public long? UserId { get; set; } public string UserName { get; set; ...

  2. sql中的日期查询

    今天的所有数据: 昨天的所有数据: 7天内的所有数据: 30天内的所有数据: 本月的所有数据: 本年的所有数据: 查询今天是今年的第几天: select datepart(dayofyear,getD ...

  3. WebView cookie 管理

    在Android应用程序中经常会加载一个WebView页,如果需要客户端向WebView传递信息,比如Cookie,也是可以的. 需要应用程序先将Cookie注入进去,打开该网页时,WebView会将 ...

  4. 《UML大战需求分析》阅读笔记5

    流程分析利器三,顺序图. 顺序图描述的是一件事发生的顺序,按照时间的发展,事情的走向,其中分为角色,消息等,每个角色下面都有一条生命线,从上到下,从左到右,依次进行事件,没有事情的时候用虚线表示,而有 ...

  5. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  6. Oracle查看用户操作sql语句以及数据库日志

    --查看日志文件 select member from v$logfile; --查看表空间使用情况 SELECT SUM(bytes) / (1024 * 1024) AS free_space, ...

  7. office中通过宏添加快捷键

    把“Microsoft 公式 3.0”作为一个按钮放在 2013中的快速访问工具栏的方法 在使用office办公软件的过程中,因为有的人还在使用office2003版本,所以在使用高版本的office ...

  8. step by step 之餐饮管理系统六(数据库访问模块)

    距上次写的博客已经好几个月,一方面公司里面有很多的东西要学,平时的时候又要写代码,所以没有及时更新,不过现在还好,已经成型了,现在把之前的东西贴出来,先看一下现在做的几个界面吧.第一个界面是用颜色用区 ...

  9. Windows Phone 8.1 新特性 - 控件之FlipView

    本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图. 虽然听起来有点拗口,但是它的用途大家一定不会陌生.在 Windows Phone 8 ...

  10. C代码工具--自动生成enum值和名字映射代码

    这年头好像继续做C语言的人不多了,年轻人大多去互联网和移动应用.确实,那两个领域现在来钱快,且总是供不应求.就说刚刚在一个旧同事的微信群里,有人刚放出自己有团队可以做App几分钟,哇塞,好几个人说有项 ...