[toc]
## 普通js操作与dom操作的性能对比
![](https://box.kancloud.cn/09912fc8bdcffbfc16a4f4de50cb8551_537x364.png)
使用dom方法是十分耗性能的
![](https://box.kancloud.cn/00627b1c0ac0ac964b1b8b128de276e5_457x257.png)
整合成一次
![](https://box.kancloud.cn/4f39f63fe10bcc7542279a1db1be5e1a_413x296.png)
### innerHTML和其它dom方法对比
![](https://box.kancloud.cn/6c0ee3a3ecae32aa158dd6aeb2bf7328_450x191.png)
提升 15%左右
![](https://box.kancloud.cn/3190f1fc4c57d73bb71d7405eb83e130_321x164.png)
但值得注意的是,在chrome下,dom方法要比innerHTML要好(上图为firefox)
## 减少dom操作
![](https://box.kancloud.cn/cb3283e60afb06f62a9cefd9b35e319d_432x358.png)
### 使用克隆
![](https://box.kancloud.cn/11213bbb17b45f8dcefabbb92d827466_395x203.png)
20%左右的提升
![](https://box.kancloud.cn/3901b89e8857242a73f4201635888a5a_371x134.png)
### 使用局部变量
![](https://box.kancloud.cn/bc2dcb2078f31f530ea945dafc9646f1_414x320.png)
缓存length,一点点的提升
![](https://box.kancloud.cn/07e8a75404ea48f13c791c880adad867_308x241.png)
### 不同场景选择不同的domAPI
![](https://box.kancloud.cn/59fdc0b8c854baf11058511ae59cd4af_279x101.png)
![](https://box.kancloud.cn/6c6797ea27f475529dc78b2d17c0f6f7_409x93.png)
## 重排与重绘,浏览器相关
![](https://box.kancloud.cn/15e9cf4b086ce0b11c3554903065e6c8_422x399.png)
### 在DOM插入之前设置其内容
![](https://box.kancloud.cn/af2aa8d7d52312510b791fbcd484df08_387x177.png)
将近一半的提升
![](https://box.kancloud.cn/aa5b328c0513845677c7b134944ab9a8_425x195.png)
### 使用cssText降低重绘消耗
![](https://box.kancloud.cn/1a55467c58981f47e20b89a4703db3c5_406x254.png)
### 缓存布局信息
![](https://box.kancloud.cn/0309e239466c50b65415266cb36f8720_346x212.png)
### 使用文档碎片减少重排
![](https://box.kancloud.cn/788906f6013cfdac95f92443d066bac9_426x169.png)
![](https://box.kancloud.cn/e4ff44c21637c4cc63fa8c3ab08cb9f6_421x201.png)
## 其它
![](https://box.kancloud.cn/2b47f33f8e31ace91b0d003fe6411a8a_505x222.png)
- 空白目录
- window
- location
- history
- DOM
- 什么是DOM
- JS盒子模型
- 13个核心属性
- DOM优化
- 回流与重绘
- 未整理
- 文档碎片
- DOM映射机制
- DOM库封装
- 事件
- 功能组件
- table
- 图片延迟加载
- 跑马灯
- 回到顶部
- 选项卡
- 鼠标跟随
- 放大镜
- 搜索
- 多级菜单
- 拖拽
- 瀑布流
- 数据类型的核心操作原理
- 变量提升
- 闭包(scope)
- this
- 练习题
- 各种数据类型下的常用方法
- JSON
- 数组
- object
- oop
- 单例模式
- 高级单例模式
- JS中常用的内置类
- 基于面向对象创建数据值
- 原型和原型链
- 可枚举和不可枚举
- Object.create
- 继承的六种方式
- ES6下一代js标准
- babel
- 箭头函数
- 对象
- es6勉强笔记
- 流程控制
- switch
- Ajax
- eval和()括号表达式
- 异常信息捕获
- 逻辑与和或以及前后自增
- JS中的异步编程思想
- 上云
- 优化技巧
- 跨域与JSONP
- 其它跨域相关问题
- console
- HTML、XHTML、XML
- jQuery
- zepto
- 方法重写和方法重载
- 移动端
- 响应式布局开发基础
- 项目一:创意简历