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.减少向服务器的请求次数

  • 相关阅读:
    全内存的redis用习惯了?那能突破内存限制类redis产品ssdb呢?
    multi_compile
    MVVM
    Gamma Correction
    Animator状态快速切换问题
    SVN 不显示状态图标--解决方法
    Rendering with Replaced Shaders
    MySql权威指南
    Effective C++
    帧同步
  • 原文地址:https://www.cnblogs.com/shangjun6/p/9965453.html
Copyright © 2011-2022 走看看