1、DOM访问与修改的优化:

DOM访问是有代价的,修改DOM则会引起DOM的重绘与重排,而这两种操作会消耗性能。

(1)缓存DOM:将频繁访问的对象或属性使用变量缓存起来,每次访问的时候,直接使用变量,而不是再次去访问DOM。

(2)减少重绘与重排:

批量修改:使用文档片段documentFragment、使用类名一次性修改多个样式、或者使用CSSText属性

如 ele.style.cssText = 'color:red;border:1px solid green';

元素脱离文档流,再做修改:将元素隐藏或者克隆一份,在对其进行修改,完成修改后再显示。(对隐藏元素的操作不会引起重绘重排)

(3)选择器的使用,使用更快的querySelectorAll('#div1 .active')。

注意:使用getElementsByTagName等返回HTML集合的方法时,这些返回的HTML集合会实时连接着底层文档,比如增加了一个元素,HTML结合会立即反应出来。

可以使用变量缓存,或者将HTML集合拷贝到一个数组中,访问数组的效率会比访问HTML集合要快

下面这段代码会陷入死循环:

function loopAlways(){
var odivs = document.getElementsByTagName('div');
for(var i=0;i<odivs.length;i++){ console.log(odivs.length); //odivs是一个HTML集合,实时和文档连接,记录最新变化
var d = document.createElement('div');
document.body.appendChild(d);
} }

改成下面这种,将集合长度缓存下来,就不会出现上面的情况

 var odivs = document.getElementsByTagName('div');
for(var i=0,len=odivs.length;i<len;i++){
var d = document.createElement('div');
document.body.appendChild(d);
}

(4)使用事件委托:避免对同类元素同时绑定事件,而是使用事件冒泡机制,在父元素上绑定。

(5) innerHTML 与DOM :innerHTML稍快 (除了Webkit内核的浏览器)

web前端优化--DOM性能优化的更多相关文章

  1. 全方位分析web前端如何进行性能优化

    前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件 ...

  2. 前端project与性能优化(长文)

    原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题 ...

  3. Tomcat多实例集群架构 安全优化和性能优化

    Tomcat多实例 复制tomcat目录 /usr/local/tomcat1 /usr/local/tomcat2 修改多实例配置文件 #创建多实例的网页根目录 mkdir -p /data/www ...

  4. Atitit 提升开发进度大方法--高频功能与步骤的优化 类似性能优化

    Atitit 提升开发进度大方法--高频功能与步骤的优化 类似性能优化 1. 通用功能又可以组合成crud模块1 1.1. 查询(包括步骤,发送查询dsl,通讯返回结果,绑定到表格控件)2 1.2. ...

  5. 前端性能优化jQuery性能优化

    一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...

  6. Web篇之JS性能优化

    首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...

  7. 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?

    (注:参考自官方英文文档V3.X版本) react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用react-router时候,我们常常会使用其自带的路径 ...

  8. MYSQL之性能优化 ----MySQL性能优化必备25条

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...

  9. Java内存优化和性能优化的几点建议

    1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...

随机推荐

  1. 开博近一年的感想 by 程序员小白

    /* 好吧,这里的写博客应该理解为更宏观的写文章. */   在去年的这个时候,我所知道的平台只有 CSDN 和博客园..然而 CSDN 的广告实在是不想吐槽了,选择博客园是一件非常自然的事情.要说开 ...

  2. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  3. 斐波那契数列第N项f(N)[矩阵快速幂]

    矩阵快速幂 定义矩阵A(m*n),B(p*q),A*B有意义当且仅当n=p.即A的列数等于B的行数. 且C=A*B,C(m*q). 例如: 进入正题,由于现在全国卷高考不考矩阵,也没多大了解.因为遇到 ...

  4. PIC24 通过USB在线升级 -- USB HID bootloader

    了解bootloader的实现,请加QQ: 1273623966 (验证填bootloader):欢迎咨询或定制bootloader; 我的博客主页www.cnblogs.com/geekygeek ...

  5. 【框架学习与探究之消息队列--EasyNetQ(1)】

    前言 本文欢迎转载,实属原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7603554.html 废话 既然都是废话了,所以大家就可以跳过了,这里是博主有事没事 ...

  6. ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL

    之前介绍了My Blog如何使用ADO.NET来访问SQL Server获取数据.本章将介绍如何使用My SQL来完成数据管理. 在使用My SQL之前需确保开发环境中安装了My SQL数据库和Con ...

  7. webpack html

    调用了原模板 修改路径 使html放在JS外面 可以传递参数 多个html指定对应chunks 除了某些模块其余的都被引入

  8. hiveQL求差集

    hive sql求差集的方法 1.什么是差集 set1 - set2,即去掉set1中存在于set2中的数据. 2.hive中计算差集的方法,基本是使用左外链接. 直接上代码 select * fro ...

  9. Emgu.CV(二)

    小实例 class Program { static void Main(string[] args) { #region Emgu.Cv string imgPath = @"D:\tim ...

  10. Ubuntu15.04 网站服务器环境搭建,php/html/css等学习环境搭建教程

    ---恢复内容开始--- 本文部分参考自:http://www.cnblogs.com/emouse/archive/2013/06/07/3124009.html 原文中存在少量错误,已改正. 首先 ...