最近在研读《高性能JavaScript》,在此做些简单记录。示例代码可在此处查看到。

一、DOM

1)DOM和JavaScript

文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API)。

浏览器通常会把DOM和JavaScript独立实现。例如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎。

访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,两处同行要收过桥费,ECMAScript访问DOM的次数越多,过桥费越贵,因此推荐的做法是尽可能减少过桥的次数。

2)性能测试

下图是对两段代码的性能测试,可在此处查看在线性能测试

1. 第一段每一次循环都直接用DOM赋值

2. 第二段是先将内容缓存到局部变量中,最后使用一次DOM赋值。

测试结果以每秒钟执行测试代码的次数(Ops/sec)显示,这个数值越大越好。

除了这个结果外,同时会显示测试过程中的统计误差,以及相对最好的慢了多少(%),统计误差也是非常重要的指标。

二、选择器API

有时候为了得到需要的元素列表,需要组合调用getElementById等并遍历返回的节点,但这种繁密的过程效率低下。

使用CSS选择器是一种定位节点的便利途径,querySelectorAll就是DOM的原生方法。

//DOM组合API
var elements = document.getElementById('menu').getElementsByTagName('a');
//替换为简便的CSS选择器
var elements = document.querySelectorAll('#menu a');

三、重绘与重排

在《CSS动画与JavaScript动画》中层提到过页面渲染的一般过程为JavaScript > 计算样式 > 布局 > 绘制 > 渲染层合并。

Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环,所以我们尽量避免着这两个环节。

当DOM的变化影响了元素的几何属性(宽和高)将会发生重排(reflow);

完成重排后,浏览器会重新绘制受影响的部分到屏幕中,此过程为重绘(repaint)。

1)重排何时发生

1. 添加或删除可见的DOM元素

2. 元素位置改变

3. 元素尺寸改变(包括外边距、内边距、边框宽度、宽、高等属性)

4. 内容改变,例如文本改变或图片被不同尺寸的替换掉。

5. 页面渲染器初始化。

6. 浏览器窗口尺寸改变。

2)批量执行重排

下面代码看上去会重排3次,但其实只会重排1次,大多数浏览器通过队列化修改和批量显示优化重排版过程。

//渲染树变化的排队和刷新
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

但下列操作将会强迫队列刷新并要求所有计划改变的部分立刻应用:

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)(在 IE 中此函数称为 currentStyle) 

像offsetHeight属性需要返回最新的布局信息,因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值。

对于尺寸坐标相关的信息可以参考《JavaScript中尺寸、坐标》。

3)最小化重绘和重排

1. cssText和class

cssText可以一次设置多个CSS属性。class也可以一次性设置,并且更清晰,更易于维护,但有前提条件,就是不依赖于运行逻辑和计算的情况。

// cssText
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
// class
ele.className = 'active';

在《JavaScript特性(attribute)、属性(property)和样式(style)》详细介绍了CSS相关的JS操作。

2. 批量修改DOM

2.1 隐藏元素display:none,应用修改,重新显示display:block

2.2 使用文档片段fragment,在片段上操作节点,再拷贝回文档。

//文档片段(fragment)
var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'banana';
fragment.appendChild(li);
document.getElementById('fruit').appendChild(fragment);

2.3 将原始元素拷贝到一个脱离文档的节点中(例如position:absolute),修改副本,完成后再替换原始元素。

四、其它章节性能介绍

1)第一章 加载和执行

将<script>标签放到页面底部,也就是</body>闭合标签之前。

多种无阻塞下载JavaScript的方法:

1. 使用<script>标签的defer属性。页面解析到<script>标签时开始下载,但并不会执行,直到DOM加载完(onload事件触发前)。

2. 动态创建<script>元素来下载并执行代码。无论在何时启动下载,文件的下载和执行过程不会阻塞页面其它进程,但返回的代码通常会立刻执行。

3. 使用XHR对象下载JavaScript代码并注入页面中。优点是下载后不会自动执行,所有主流浏览器都支持,但不能跨域下载。

2)第二章 数据存取

1. 每遇到一个变量,就会经历一次标识符解析的过程,以决定在哪里获取和存储数据。在执行环境的作用域中,标识符所在的位置越深,读写速度也就越慢。因此函数中读写局部变量是最快的,读写全局变量是最慢的。

2. 由于对象成员可能包含其它成员,例如window.location.href。每次遇到点操作符,嵌套成员会导致JavaScript引擎搜索全部对象成员。对象成员嵌套越深,读取速度越慢location.href就比window.location.href快。

3)第五章 字符串与正则表达式

str = str + "one";//性能高
str = "one" + str;//性能差

1. 除IE外,浏览器会简单的将第二个字符串拷贝到第一个的后面,如果变量str很大的话,就会出现性能损耗(内存占用)就会很高。

2. 正则优化包括:减少分支数量,缩小分支范围;使用非捕获数组;只捕获感兴趣的文本以减少后期处理;使用合适的量词;化繁为简,分解复杂的正则;

4)第六章 快速响应的用户界面

使用定时器让出时间片段,分割大型任务,在文章《JavaScript定时器分析》中有具体分析。

5)第七章 Ajax

Mutipart XHR允许客户端只用一个HTTP请求就可以从服务器向客户端传送多个资源。

将资源文件(CSS、HTML、JavaScript、Base64编码图片)打包成一个由双方约定的字符串分隔符,发送到客户端。

然后用JavaScript代码处理这个字符串,根据“mime-type”类型和传入的头信息解析每个资源。

6)第九章 构建并部署高性能JavaScript应用

1. 合并JavaScript文件以减少HTTP请求数。

2. 压缩JavaScript文件。

3. 在服务器端压缩JavaScript文件(Gzip编码)。

4. 正确设置HTTP响应头来缓存JavaScript文件,通过向文件名增加时间戳避免缓存问题。

5. 使用CDN(Content Delivery Network)提供JavaScript文件。

第八章 编程实践内容比较多,单独令出来作为一节。

五、第八章 编程实践

1)使用Object/Array直接量

代码例下:

var myObject = {
  name: "pwstrick",
  age: 29
};
var myArr = ["pwstrick", 29];

2)避免重复工作

也就是惰性模式。减少每次代码执行时的重复性分支判断,通过对对象重定义来屏蔽原对象中的分支判断。

惰性模式分为两种:第一种文件加载后立即执行对象方法来重定义,第二种是当第一次使用方法对象时来重定义。可参考在线demo代码

在文章《JavaScript设计模式》中有更多的设计模式介绍。

3)位运算

1. 用位运算取代纯数学操作,比如对2取模digit%2可以判断偶数与奇数。

2. 位掩码技术,使用单个数字的每一位来判断选项是否成立。掩码中每个选项的值都是2的幂。例如:

var OPTION_A = 1, OPTION_B = 2, OPTION_C = 4, OPTION_D = 8, OPTION_E = 16;
//用按位或运算创建一个数字来包含多个设置选项
var options = OPTION_A | OPTION_C | OPTION_D;
//接下来可以用按位与操作来判断给定的选项是否可用
//选项A是否在列表中
if(options & OPTION_A) {
  //...
}

3. 用按位左移(<<)做乘法,用按位右移做除法(>>),例如digit*2可以替换成digit<<2

4)原生方法

无论你的代码如何优化,都比不上JavaScript引擎提供的原生方法快。

1. 数学运算用内置的Math对象中提供的方法。

2. 用原生的CSS选择器查找DOM节点,querySelectorquerySelectorAll

参考资料:

高性能JavaScript

利用jsPerf优化Web应用的性能

高性能JavaScript DOM编程

读《高性能javascript》笔记(一)

高性能JavaScript 重排与重绘

JavaScript性能优化 DOM编程的更多相关文章

  1. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  2. javascript性能优化-repaint和reflow

    repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...

  3. 摘:JavaScript性能优化小知识总结

    原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...

  4. Javascript 性能优化的一点技巧

    把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.

  5. JavaScript 性能优化技巧分享

    JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上 ...

  6. javascript性能优化总结二(转载)

    上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理.松散耦合.性能方面的一些小知识.为避免错误应该注意的点 内存管理 1.循环引用 如果循环引用中包含 ...

  7. JavaScript之优化DOM

    优化DOM得从重绘和重排讲起,long long ago... 1.重绘和重排 1.1 重绘和重排是什么 重绘是指一些样式的修改,元素的位置和大小都没有改变: 重排是指元素的位置或尺寸发生了变化,浏览 ...

  8. DOM性能瓶颈与Javascript性能优化

    这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(<JS特性性能缺陷及JIT的解决方案>,<Javascript垃圾回收浅析>),主要描述了untyped,GC带来的问题 ...

  9. javascript性能优化:创建javascript无阻塞脚本

    javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使 ...

随机推荐

  1. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...

  2. Netty里的设计模式

    最近在撸 Netty 源码,发现了一些模式,顺手做个笔记. 分析版本是4.0 1. 构造器模式 ServerBootstrap 和 Bootstrap 的构建 2. 责任链设计模式 pipeline ...

  3. 代理模式及jdk动态代理原理

    代理模式 :为其它对象提供代理,以控制对这个对象的访问. 代理模式的特征:代理类(proxyClass)与委托类(realClass)有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转 ...

  4. Hadoop基础知识

    摘要:Hadoop的安装目录了解.etc的核心配置项.hadoop的启动.HDFS文件的block块级副本的存放策略.checkpoint触发设置. 1.hadoop目录了解 bin:可执行文件,命令 ...

  5. bzoj4402: Claris的剑

    首先,对于本质相同的构造,我们只计算字典序最小的序列 假设序列中最大的元素为top 我们很容易发现这样的序列一定是1,2,..,1,2,3,2,3,...,2,3,4,3,4.........,top ...

  6. EmguCV 如何从数组中创建出IntPtr

    需要添加引用:System.Runtime.InteropServices 举例如下: float[] priors={1,10}; IntPtr intPtrSet = new IntPtr(); ...

  7. 详解 ManualResetEvent

    今天详细说一下ManualResetEvent 它可以通知一个或多个正在等待的线程已发生事件,允许线程通过发信号互相通信,来控制线程是否可心访问资源 当一个线程开始一个活动(此活动必须完成后,其他线程 ...

  8. Hubilder用git插件安装使用

    打开Hbuilder,工具->插件安装(git分布式版本管理插件) 打开https://www.github.com,注册.登录.创建仓库 在Hbuilder中新建项目→然后右键→Team→共享 ...

  9. codeforces 300E Empire Strikes Back 数论+二分查找

    题意:给定N个数a1,a2,a3...aN,现在要求最小的n满足 n!/(a1!*a2!*...*aN!) 是一个正整数的最小的n. 分析:这题的想法很明确,就是分解a1!*a2!*...*aN!,把 ...

  10. 【Avalon】获取隐藏元素的尺寸

    保存原来的属性 设置成显示的属性 获取尺寸 设置回原来的属性 var cssShow = { position: "absolute", visibility: "hid ...