zoukankan      html  css  js  c++  java
  • 字符串拼接和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.减少向服务器的请求次数

  • 相关阅读:
    HDU 1213 How Many Tables(并查集,简单)
    POJ 1611 The Suspects(并查集,简单)
    HDU 4539 郑厂长系列故事――排兵布阵(曼哈顿距离)
    POJ 2411 Mondriaan'sDream(状压DP)
    ZOJ 4257 MostPowerful(状压DP,简单)
    HDU 3001 Traveling(状压DP)
    POJ 3311 Hie with the Pie(Floyd+状态压缩DP)
    POJ 1185 炮兵阵地(状态压缩DP)
    POJ 3254 Corn Fields(状态压缩DP)
    XueXX and Chessboard(dp)
  • 原文地址:https://www.cnblogs.com/shangjun6/p/9965453.html
Copyright © 2011-2022 走看看