字符串拼接和dom回流

  以对象的角度分析  对象的两方面 属性和方法

  研究对象,主要是研究对象的属性和方法

  案例:

  <ul id="list">

    <li></li>

    <li></li>

  </ul>

  兼容性: 如果元素没有子节点,ie低版本读取不到,而标准浏览器会把文本节点当作子节点

  list.children[0]

  需要处理兼容 if 语句

  if(list.children[0]){

    list.insertBefore(li,list.children[0])

    }

  else{

    list.appendChild(li)

    }

  a超链接,a的属性 href分析

  <a href="">    点击会刷新页面,相当于向后台发送一次请求

  <a href="#s">   瞄点跳转到某一个id叫s的位置

  <a href="javascript:;">  取消刷新页面的功能

  dom回流:

  添加一个,对第一个计算一次

  添加两个,对第一个计算两次,对第二个计算一次

  添加三个,对第一个计算三次,对第二个计算两次,对第三个计算一次

  页面渲染时,我们对HTML结构简单的增删,查改时,浏览器会对所有的dom重新排列,这就是dom回流,严总影响浏览器性能

  拓展:字符串拼接和dom创建都是渲染的方式

  字符串的优点:简单、层次感比较强、可以处理大量数据

  缺点:字符串拼接会影响到原有子元素的事件;

  dom创建

  优点:是一个独立的个体,不会影响到原有的元素

  缺点:处理数据量过大会比较麻烦,会造成dom回流

  补充:

  提升页面的性能的优化

  1.多采用雪碧图

  2.阻止超链接默认行为

  3.减少dom回流

  4.减少向服务器的请求次数

原文地址:https://www.cnblogs.com/shangjun6/p/9965453.html