js-11Dom是树结构（性能优化）

Hd_stn
178 阅读4分钟
  • 1、# Dom节点的Attribute和Property有和区别
    • property只是一个JS对象的属性的修改，获取方式e.propName，返回值可能是字符串、布尔值、对象、undefined 等
    • Attribute是对html标签属性的修改，获取方式e.getAttribute()，返回值是源文件中设置的值，类型是字符串或者 null（有的实现返回""）
    • 大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性
    • 一些 attribute 和 property 不是一一对应如：form 控件中<input value="hello"/>对应的是 defaultValue，修改或设置 value property 修改的是控件当前值，setAttribute 修改 value 属性不会改变 value property
    • 一些布尔属性<input hidden/>的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property
    • 像<a href="../index.html">link</a>中 href 属性，转换成 property 的时候需要通过转换得到完整 URL

  • 2、dom性能优化的基本原则

    • 将频繁的操作改为一次性操作

    • 通过创建文档碎片，最后一次性加入文档碎片。

    • 1、查找时,如果只用一个条件就可查询出结果时,优先选择易用的按选择器查找.

    • 2、添加时,尽量减少操作DOM树的次数,减少重排重绘。如果同时添加父元素和子元素,应先将子元素添加到父元素,最后再将父元素添加到DOM树。如果添加多个平级子元素,则应先将子元素添加到文档片段,最后,再将文档片段添加到DOM树.

    • 3、修改时,尽量减少重排重绘。如果同时修改多个元素的内容和样式。应使用class批量修改样式.

      • 需要对元素进行复杂操作时,可以先隐藏(display:"none"),操作完成后再显示.
      • 需要创建多个DOM节点时,使用DocumentFragment创建完之后一次性的加入documnet
      • 缓存Layout属性值,如:var left =elem.offsetLeft;这样,多次使用left产生一次回流
      • 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其他元素回流)
      • 避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)
      • 尽量使用css属性简写,如:用border代替border-width,border-style,border-color
      • 批量修改元素样式:elem.style.xxx

    • 4.事件绑定时,应尽量利用冒泡减少事件监听的个数.

  • 3、利用冒泡和不利用冒泡的差别
    • 1.绑定对象不同:不利用冒泡绑定在目标元素上,利用冒泡绑定在父元素上.
    • 2.监听对象的个数不同:不利用冒泡会反复创建多个监听,利用冒泡始终只有一个监听.
    • 3.动态生成元素:不利用冒泡无法自动获得事件处理函数,必须反复绑定
    • 4.利用冒泡可让动态添加的子元素自动获得父元素的处理函数,无需反复绑定.

  • 4、安HTML查找和按选择器查找的差别
    • 1.返回值不同:按HTML查找返回动态集合,按选择器查找返回非动态集合
    • 2.效率不同:按HTML查找效率高,按选择器查找效率低
    • 3.易用性不同:当条件复杂时,按HTML查找繁琐,而按选择器查找简单

  • 5、描述一下dom事件模型：捕获、目标触发、冒泡
    • 捕获阶段：由外向内,依次记录各级父元素上的事件处理函数。只记录,暂不触发。
    • 目标触发:优先触发目标元素上的事件处理函数。
    • 冒泡:由内向外，依次触发各级父元素上的事件处理函数.

  • 6、事件委托：将事件绑定目标元素的父元素上,利用冒泡机制触发该事件.

    • 优点:

      • 可以减少事件注册,节省大量内存占用
      • 可以将事件应用于动态添加的子元素上

    • 缺点:使用不当会造成事件在不应该触发时触发

url.addEventListener('click',function(e){
  var  target =event.target ||  event.srcElement;
  if(!!target  && target.nodeName.toUpperCase() === "LI"){
    console.log(target.innerHTML);
  }
},false);

  • 7、前端（性能）优化的方法：
    • 1.减少dom操作
    • 2.部署前,图片压缩,代码压缩
    • 3.优化js代码结构,减少冗余代码
    • 4.减少HTTP请求,合理设置HTTP缓存
    • 5.使用内容分发cdn加速
    • 6.静态资源缓存
    • 7.图片延迟加载
avatar
文章
阅读
粉丝