web前端优化--DOM性能优化
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性能优化的更多相关文章
- 全方位分析web前端如何进行性能优化
前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件 ...
- 前端project与性能优化(长文)
原文链接:http://fex.baidu.com/blog/2014/03/fis-optimize/ 每一个參与过开发企业级 web 应用的前端project师也许都曾思考过前端性能优化方面的问题 ...
- Tomcat多实例集群架构 安全优化和性能优化
Tomcat多实例 复制tomcat目录 /usr/local/tomcat1 /usr/local/tomcat2 修改多实例配置文件 #创建多实例的网页根目录 mkdir -p /data/www ...
- Atitit 提升开发进度大方法--高频功能与步骤的优化 类似性能优化
Atitit 提升开发进度大方法--高频功能与步骤的优化 类似性能优化 1. 通用功能又可以组合成crud模块1 1.1. 查询(包括步骤,发送查询dsl,通讯返回结果,绑定到表格控件)2 1.2. ...
- 前端性能优化jQuery性能优化
一.使用合适的选择器 $("#id"); 1.使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery底层将直接调用本地方法document.getElementById ...
- Web篇之JS性能优化
首先,性能优化分好几个方面,本章我们从js方面来优化. 1:垃圾收集 日常中的某些情况下垃圾收集器无法回收无用变量,导致的一个结果就是——内存使用率不断增高,以下为对应的情况以及处理方法. ①对象相互 ...
- 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?
(注:参考自官方英文文档V3.X版本) react-router是伴随着react框架出现的路由系统,它也是公认的一种优秀的路由解决方案.在使用react-router时候,我们常常会使用其自带的路径 ...
- MYSQL之性能优化 ----MySQL性能优化必备25条
今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我 们程序员需要去关注的事情.当我们去设计数据库表结构,对操作数 ...
- Java内存优化和性能优化的几点建议
1.没有必要时请不用使用静态变量 使用Java的开发者都知道,当某个对象被定义为stataic变量所引用,这个对象所占有的内存将不会被回收.有时,开发者会将经常调用的对象或者变量定义为static,以 ...
随机推荐
- 开博近一年的感想 by 程序员小白
/* 好吧,这里的写博客应该理解为更宏观的写文章. */ 在去年的这个时候,我所知道的平台只有 CSDN 和博客园..然而 CSDN 的广告实在是不想吐槽了,选择博客园是一件非常自然的事情.要说开 ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- 斐波那契数列第N项f(N)[矩阵快速幂]
矩阵快速幂 定义矩阵A(m*n),B(p*q),A*B有意义当且仅当n=p.即A的列数等于B的行数. 且C=A*B,C(m*q). 例如: 进入正题,由于现在全国卷高考不考矩阵,也没多大了解.因为遇到 ...
- PIC24 通过USB在线升级 -- USB HID bootloader
了解bootloader的实现,请加QQ: 1273623966 (验证填bootloader):欢迎咨询或定制bootloader; 我的博客主页www.cnblogs.com/geekygeek ...
- 【框架学习与探究之消息队列--EasyNetQ(1)】
前言 本文欢迎转载,实属原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7603554.html 废话 既然都是废话了,所以大家就可以跳过了,这里是博主有事没事 ...
- ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL
之前介绍了My Blog如何使用ADO.NET来访问SQL Server获取数据.本章将介绍如何使用My SQL来完成数据管理. 在使用My SQL之前需确保开发环境中安装了My SQL数据库和Con ...
- webpack html
调用了原模板 修改路径 使html放在JS外面 可以传递参数 多个html指定对应chunks 除了某些模块其余的都被引入
- hiveQL求差集
hive sql求差集的方法 1.什么是差集 set1 - set2,即去掉set1中存在于set2中的数据. 2.hive中计算差集的方法,基本是使用左外链接. 直接上代码 select * fro ...
- Emgu.CV(二)
小实例 class Program { static void Main(string[] args) { #region Emgu.Cv string imgPath = @"D:\tim ...
- Ubuntu15.04 网站服务器环境搭建,php/html/css等学习环境搭建教程
---恢复内容开始--- 本文部分参考自:http://www.cnblogs.com/emouse/archive/2013/06/07/3124009.html 原文中存在少量错误,已改正. 首先 ...