Skip to content

Latest commit

 

History

History
254 lines (168 loc) · 7.08 KB

dombian_cheng.md

File metadata and controls

254 lines (168 loc) · 7.08 KB

DOM编程

浏览器独自实现JS和DOM

IE中.分别存在jscript.dll & mshtml.dll

为什么DOM会慢

因为分开实现,之间通过接口访问.之间需要过桥费

##1. 优化建议

  1. 谨慎使用循环操作DOM

    因为这个过桥费,所以谨慎使用循环.

    若DOM操作有顺序,先放在一个字符串里,汇总完后再一次修改DOM.

  2. innerHTML & createElement

    在旧浏览器中innerHTML比标准DOM操作(document.createElement())快

    现代浏览器相差无几,甚至有点反超.

  3. 节点clone

    先createElement好所需元素.

    在循环中clone

  4. HTML集合优化

    1. document.getElementByName();
    2. document.getElementsByClassName();
    3. document.getElementsByTagName();
    4. document.images;
    5. document.links;
    6. document.forms;
    7. document.forms[0].elements

    以上方法军返回HTML集合对象,非数组,因为没有push()和slice()等方法,可以根据索引获取对象和length获取长度

    建议如果频繁操作HTML集合,可转换为数组.

    避免在for循环中使用HTML集合.length因为每次都会重新计算.

    尽量采用局部变量,但要用到对象成员时.

    function K(){
var coll document.getElementsByTagName('div'),
    len = coll.length,
    name ='',
    el =null;
    for(var count =0;count<len;count++){
        el =coll[count];
        name = el.nodeName;
        type = el.nodeType;
        name = el.tagName;
    }

}

  5. 遍历DOM

    遍历查询某节点的所有子节点时,可以

    1. 使用nextSibling递归的查找所有子节点
    2. 使用childNodes查找所有子节点的集合

    因为方法2中用到HTML集合,所有在IE6/7上前者效率高很多,但是现代浏览器就相差无几了

    但是nextSlibing和childNodes都会有一个问题,会把HTML的注释/空格都算作一个元素节点.所以有了以下API的代替

    属性名 被替代的属性
    children childNodes
    childElmentCount childNodes.length
    firstElementChild firstChild
    lastElementChild lastChild
    nextElementSlibling nextSlibling
    previousElementSlibing previousSlibing

    以上属性IE6/7/8只支持children属性,使用新的API会比旧的要快很多,因为少了空白等无用的节点个数.

  6. 选择器API

    var elements = document.querySelectorAll('#menu a');
var elements = document.getElementById('menu').getElementsByTagName('a');

    前者会返回一个NodeList--匹配节点的类数组对象.因为是数组比后者返回的HTML集合要快多了.

    前者从IE8开始支持.

##2. 重绘和重排

浏览器下载完所以组件--HTML标记 javascript CSS 图片后会生成两个内部数据结构.

  1. DOM树 : 表示页面结构
  2. 渲染树 : 表示DOM节点如何显示.

每一个DOM树需要显示的节点都至少在渲染树中存在一个对应的节点(隐藏DOM除外),渲染树的节点称为帧 / 盒,主要包含padding border margin position等元素,DOM树和渲染树构造完成,浏览器就开始绘制页面.

何为重排 & 重绘

  1. 重排 : 当DOM影响了元素的宽 / 高时发生

    受影响部分在渲染树中失效,重新构造渲染树.

  2. 重绘 : 完成了重排后.浏览器重新绘制手影响部分到网页中,这个过程叫重绘.

重排何时发生 :

  1. 添加/删除可见DOM元素
  2. 元素位置改变
  3. 元素尺寸改变
  4. 内容改变
  5. 页面渲染器初始化
  6. 浏览器窗口尺寸改变

当浏览器的滚动条出现时,整个页面重排.

###2.1 渲染树变化的队列和刷新

使用offsetTop/Left/Width/Height

or scolllTop/...

or clientTop/...

or getComputedStyle() //currentStyle in IE

当执行以上方法时,浏览器刷新队列,并立即执行上述代码.

在修改样式的过程中,尽量少用.

即使你要用.多次访问这些变量时,请赋值到一个局部变量里,不要多次访问以上属性.

###2.2 最少化重绘和重排

改变样式时

  1. 多次改变样式

方法 1:

element.style.borderLeft = ...;
element.style.borderRight = ...;

方法 2 :

element.style.cssText += '; borderLeft :1px ...';

后者会只触发一次重排.

###2.3 批量修改DOM

当需要一些列DOM操作时,可以通过下面三个步骤优化

  1. 使元素脱离文档流
  2. 对其应用多重改变
  3. 把元素带回文档

令DOM脱离文档流主要有三种方法

  1. display : none(两次重排)

    这里就是批处理前先none掉,执行完了,再display回来.

  2. 在文档外创建并更新一个文档片段.(一次重排 推荐.)

    val ul = document.createDocumentFragment();
DOM操作.
document.getElementById('指定部分').appendChild(ul);

  3. 把要改变的部分clone,再替换(两次重排)

    var old = document.getElementById('修改部分');
var clone =old.cloneNode(true);
DOM操作`clone`
old.parentNode.replaceChild(clone,old);

###2.4 让元素脱离动画流

假如你要在页顶添加一个div,导致整个页面向下移,会导致整个页面重排

避免页面中的大部分重排.

  1. 使用绝对位置定位页面上的动画元素,让其脱离文档流.
  2. 让元素动起来,当它扩大时,临时覆盖部分页面.尽量少的影响其他元素.
  3. 当动画结束时恢复定位,从而智慧下移一次文档的其他元素.

###2.5 IE和:hover

例如表格中使用hover让所在行高亮,当表格很大时,应该避免这种效果.

###2.6 事件委托

不建议绑定事件过多

建议让时间冒泡,让统一的高层捕抓.

eg:

在导航栏中,ul->li->a,要把所有的a链接改为ajax更新页面.

document.getElementByID('ul_ID').onclick =function (e){
    //IE6/7/8中会采取后面的方式获得全局事件对象..
    e = e || window.event
    
    var pageid,hrefparts;
    //获取触发事件的元素 后者还是为了兼容IE.
    var target = e.target || e.srcElement;
    
    if(target.nodeName !=='A'){
        return ;
    }
    
    //作者应该默认网页为../id.html
    //从链接找到页面ID
    hrefparts =target.href.splict('/');
    pageid =hrefparts[hreparts.length-1];
    //把.html去掉..
    pageid = pageid.replace('.html','');
    
    ajaxRequets('xhr.php?page='+id,updatePageContent);
    
    
    if(typeof e.preventDefault == 'function'){
        //阻止浏览器默认行为 跳转页面
        e.preventDefault();
        //阻止事件冒泡&捕获
        e.stopPropagation();
    }else {
        e.returnValue =false;
        e.cancelBubble =true;
    }
}

##总结

  1. 尽量减少DOM访问次数,尽可能在JS解决,然后采取操作DOM
  2. 使用HTML最好把它放到数组里.
  3. 动画中使用绝对定位.
  4. 使用事件委托,减少绑定数量.