不知道大家有没有看过高性能JavaScript,这个书是一本好书,推荐有JavaScript的基础的同学可以看一看这本书. 下面是我根据这本书整理出来的知识:

1、将经常使用的对象成员、数组项、和域外变量存入局部变量

原因:数据存储位置对大地代码整体性能会产生重要的影响,直接变量和局部变量的访问速度快于数组和对象成员。因为局部变量位于作用域链的第一个对象中,全局变量位于作用域链的最后一环。变量在作用域链的位置越深,访问的时间就越长。

var doc = document;
var db = doc.body;
var odiv = doc.getElementById('div1');

2、避免使用with表达式,因为他改变了运行期上下文的作用域链。

3、同理with,也要注意使用try-catch,因为catch也会改变运行期上下文的作用域链。

4、嵌套成员变量会造成重大的性能影响,尽量少用。

5、DOM操作量化问题:

// 在循坏中更新页面,问题所在:每次循环都对DOM元素访问了两次
// 一次是读取document.getElementById('here').innerHTML的内容
// 一次是修改它。
function changeDOM() {
for (var i=0; i < 15000; i++) {
document.getElementById('here').innerHTML += 'a';
}

}
// 改变方法,使用局部变量存好改变量,在循环结束时一并修改
function changeDOM() {
var content ='';
for (var i=0; i < 15000; i++) {
content += 'a';
}
document.getElementById('here').innerHTML += content;
}
// 关于js字符串拼接的性能优化问题
// js的处理机制是:新建一个临时字符串,将新字符串赋值为 content + 'a'
// 然后返回这个新字符串并同时销毁原始字符串
// 导致字符串的连接效率较低的重要原因不仅在于对于新的临时变量的不断创建
// 还有js的垃圾回收机制下不断在对象创建期间回收,导致的效率低下
// 提高效率的办法是用数组的join函数:
function changeDOM() {
var content =[];
for (var i=0; i < 15000; i++) {
content.push('a');
}
document.getElementById('here').innerHTML += content.join('');
}
// 但是同时也要注意,后来的大部分浏览器都对“+”的连接字符串做了优化
// 由于SpiderMonkey等引擎对字符串的“+”运算做了优化,结果使用Array.join的效率反而不如直接用"+"!
// 因此建议是:在IE7以下,使用join,在新浏览器下,除了变量缓存外,不需要做别的优化

6、克隆已有的DOM元素,即element.cloneNode(),比起新建节点来说,即element.createElement(),会快一点,但是性能提高不是很大。

7、遍历数组明显快于同样大小和内容的HTML集合

8、 for循环时,HTML某元素集合的长度不建议直接作为循环终止条件,最好将集合的长度赋给一个变量,然后使用变量作为循环终止条件;

原因:当每次迭代过程访问集合的length时,它导致集合器更新,在所有的浏览器上都会产生明显的性能损失。

9、需要考虑实际情况的优化,根据7,可以将集合中的元素通过for循坏赋值到数组中,访问数组的数组快于集合。但是要注意对于复制的开销是否值得。

function toArray(collection) {
var arr = [];
var clen = collection.length;
for (var i= 0; i < clen; i++) {
arr[i] = collection[i];
}
}

10、获取DOM节点,使用nextSibling方式与childNodes方式,在不同的浏览器中,这两种方法的时间基本相等。但是在IE中,nextSibling比childNodes好,IE6下,nextSibling比对手快16倍,在IE7下,快105倍。因此,在老的IE中性能严苛的使用条件下,用nextSibling较好。

11、querySelectorAll()可以联合查询,即querySelectorAll(‘div .warning,div .notice’),在各大浏览器中支持也挺好的,还可以过滤很多非元素节点;

这个网站是:canIuse,可以检查HTML、CSS元素在各大浏览器的兼容情况,一个很有用的网站!

12、重绘和重排版;

重绘:不需要改变元素的长度和宽度,不影响DOM的几何属性;

重排版:影响了几何属性,需要重新计算元素的几何属性,而且其他元素的几何属性有可能也会受影响。浏览器会在重排版过程中,重新绘制屏幕上受影响的部分。

获取布局信息的操作将导致刷新队列的动作,如使用:offsetTopoffsetLeftoffsetWidthoffsetHeightscrollTopscrollLeftscrollWidthclientTopclientLeftclientHeightgeteComputedStyle()(在IE中此函数成为currentStyle);浏览器此时不得不进行渲染队列中带改变的项目,并重新排版以返回正确值。

解决办法:

  • 通过延迟访问布局信息避免重排版。

  • 整体修改cssText的css代码,而不是分开访问,修改cssText的属性

// 访问了4次DOM,第二次开始重排列并强迫渲染队列执行
var el = document.getElementById('div1');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
// 改进:改变合并,通过cssText实现
var el = document.getElementById('div1');
el.cssText += 'border-left = 1px; border-right = 2px; padding = 5px;';
  • 改变css类名来实现样式改变

  • 当对DOM元素进行多次修改时,可以通过以下的步骤减少重绘和重排版的次数:

(注意:此过程引发两次重排版,第一次引发一次,第三次引发一次。如果没有此步骤的话,每次对第二步的改变都有可能带来重排版。)

从文档流中摘除该元素,摘除该元素的方法有: a、对其应用多重改变 b、将元素带回文档中 c、使其隐藏,进行修改后在显示 d、使用文档片段创建子树,在将他拷贝进文档

var doc = document;
// 创建文档子树
var frag = doc.createDocumentFragment();
// 自定义函数,将修改内容data赋给文档片段frag,具体过程忽略
appendDataToElement(frag,data);
// 注意:添加时实际添加的是文档片段的子节点群,而不是frag自己,只会引发一次重排版
doc.getElementById('div1').appendChild(frag);

创建一个节点的副本,在副本上进行修改,再让复制节点覆盖原先节点

// 创建一个节点的副本,在副本上进行修改,再让复制节点覆盖原先节点
var oldNode = document.getElementById('old');
var clone = old.cloneNode();
appendDataToElement(clone, data);
oldNode.replaceChild(clone, oldNode);

ps:推荐第二种,因为其涉及最少数量的操作和重排列。

14、减少对布局信息的查询次数,查询时将他赋值给局部变量参与计算。

例子,在元素网右下方不断平移时,在timeout中可以写:

var current = myElement.offsetLeft;
current++;
myElement.style.left = current + 'px';
myElement.style.top = current + 'px';
if (current > 500) {
// stop animation
}
// 拒绝下面的写法,每次移动都会查询一次偏移量,导致浏览器刷新渲染队列,非常耗时
myElement.style.left = myElement.offsetLeft + 'px';
myElement.style.top = myElement.offsetLeft + 'px';
if (myElement.offsetLeft > 500) {
// stop animation
}
 

15、大量的元素使用:hover之后,页面性能将降低,特别是IE8中。因此强烈建议,在数据量很大的表格中,减少鼠标在表上移动效果,减少高亮行的显示,使用高亮是个慢速过程CPU使用率会提高到80%-90%,尽量避免使用这种效果。

16、事件托管

讲到事件托管,首先我们来看一看冒泡机制:

DOM2级事件规定事件包括三个阶段: ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段

如下图的实验结果可以知道,当我们点击了inner之后,捕获和冒泡结果如上图的规律相同;

因此,因为每一个元素有一个或多个事件句柄与之相连时,可能会影响性能,毕竟连接每一个句柄都是有代价的,所以我们采用事件托管技术,在一个包装元素上挂接一个句柄,用于处理子元素发生的所有事件。

下面我们以如下的dom结构为例:

假如有一个ul,下面有很多个li:

<div>
<ul id="ulList">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>

当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法,是为每个Li都添加onClick的事件监听。

function addListenersLi(liNode) {
liNode.onclick = function clickHandler(){}
}

window.onload = function(){
var ulNode = document.getElementById("ulList");
var liNodes = ulNode.getElementByTagName("li");
for(var i=0, l = liNodes.length; i < l; i++){
addListeners4Li(liNodes[i]);
}
}

如果li足够多,或者对于li的操作特别频繁,为每一个li绑定一个点击事件将会特别影响性能,因为在此期间,你需要访问和修改更多的DOM节点,事件的绑定过程发生在onload事件中,绑定本身也非常耗时;同时,浏览器需要保存每个句柄的记录,很占用内存。重点是有些绑定了还不一定会用着,并不是100%的按钮或链接都会被点到的哟!

因此,采用事件托管更为高效,当事件被抛到更上层的父节点的时候,我们通过检查事件的目标对象(target)来判断并获取事件源Li。下面的代码可以完成我们想要的效果:

var oul = document.getElementById('ulList');
oul.addEventListener('click',function(e){
var e = e || window.event;
var target = e.target || e.srcElement; console.log(target.nodeName);
if (target.nodeName == 'LI') {
// 事件真正的处理程序
alert(target.id);
e.preventDefault();
e.stopPropagation();
}
else {
console.log(target.nodeName);
}

});

后续还会更新,可以给个关注不迷路哦

高性能的JavaScript,这是一个高级程序员必备的技能的更多相关文章

  1. 如何成为一个C++高级程序员

    C++这门语言从诞生到今天已经经历了将近30个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在C++的使用范围比以前已经少了很多,java.C#.python等 ...

  2. SqlServer注意事项总结,高级程序员必背!

    本篇文章主要介绍SqlServer使用时的注意事项. 想成为一个高级程序员,数据库的使用是必须要会的.而数据库的使用纯熟程度,也侧面反映了一个开发的水平. 下面介绍SqlServer在使用和设计的过程 ...

  3. 高级程序员与CTO技术总监首席架构师

    一.高级程序员 如果你是一个刚刚创业的公司,公司没有专职产品经理和项目经理,你就是公司的产品经理,你如果对你现在的开发员能力不满,那么你只需要的是一个高级程序员. 你定义功能.你做计划推进和管理,他可 ...

  4. PHP高级程序员必看知识点:目录大全(不定期更新)

    面试题系列: 分享一波腾讯PHP面试题 2019年PHP最新面试题(含答案) Redis 高级面试题 学会这些还怕进不了大厂? 阿里面试官三年经验PHP程序员知识点汇总,学会你就是下一个阿里人! ph ...

  5. 成为java高级程序员需要掌握哪些

    section 1 1.Core Java,就是Java基础.JDK的类库,很多童鞋都会说,JDK我懂,但是懂还不足够,知其然还要知其所以然,JDK的源代码写的非常好,要经常查看,对使用频繁的类,比如 ...

  6. php开发面试题---php高级程序员需要掌握的一些知识

    php开发面试题---php高级程序员需要掌握的一些知识 一.总结 一句话总结: 还是需要多多接触架构师的知识,比如这里说的微服务,还有需要php服务端的知识来解决web端的不足,比如Swoole 1 ...

  7. 做为一个Java程序员,你需要哪些傍身的技能?

    最近总有些断断续续的思考,想想从我入行以来,我到底学会了什么,做成过什么,以后要做什么,如何提升自己······· 工作3年了,常听人说3年,5年,10年是程序员的坎,每过一个都会有新的想法,新的改变 ...

  8. 一个JAVA程序员成长之路分享

    我搞JAVA也有些日子了, 因为我比较贪玩,上进心不那么强, 总是逼不得已为了高薪跳槽才去学习, 所以也没混成什么大牛, 但好在现在也已经成家立业, 小日子过的还算滋润, 起码顶得住一月近万元的吃喝拉 ...

  9. 一个java程序员的年终总结

    年底了,该给自己写点总结了! 从毕业到现在已经快4年啦,一直在Java的WEB开发行业混迹.我不是牛人,但是自我感觉还算是个合格的程序员,有必要写下自己将近4年来的经历,给自我以提示,给刚入行的朋友提 ...

随机推荐

  1. mabatis入门五 高级结果映射

    一.创建测试的表和数据 1.创建表 1CREATE TABLE items ( 2 id INT NOT NULL AUTO_INCREMENT, 3 itemsname VARCHAR(32) NO ...

  2. 基于STM32F030F4P9和STM32 CUBEMX 输出PWM波形

    STM32F030F4P9定时器功能比较丰富,在此记录项目中使用其自动输出PWM波形(频率:50HZ).CubeMX配置定时器如下图说明. 在此定时器基础时钟为48MHZ,配置中不做分频处理,预分频系 ...

  3. Python终端打印彩色文字

    终端彩色文字 class Color_f: black = 30 red = 31 green = 32 yellow= 33 blue = 34 fuchsia=35 cyan = 36 white ...

  4. Hystrix 使用手册 | 官方文档翻译

    由于时间关系可能还没有翻译全,但重要部分已基本包含 本人水平有限,如有翻译不当,请多多批评指出,我一定会修正,谢谢大家.有关 ObservableHystrixCommand 我有的部分选择性忽略了, ...

  5. web存储cookie会出现两个相同键值问题

    我使用js存储cookie,定义key值是menu,存储过程中出现了相同的menu键值而且有的时候有一个还是null,折腾了三四个小时不知道啥问题: 早上到公司后想着换换键值,就把键值换成了selec ...

  6. Java 连接数据库总是报错

    mysql账号密码是正确的,但是一直报账号密码错误. 报错信息: java.sql.SQLException: Access denied for user 'root'@'localhost' (u ...

  7. jenkins 脱机下 安装插件失败

    1.首次进入,提示离线 2.网上给出了绝大部分答案是进入Manage Plugins 中在高级下将升级站点的https换成http,但是都没解决我的问题  还是报错,用了大部分时间查阅 最终才发现问题 ...

  8. docker 容器容器之间网络通信 docker-compose.yaml 配置固定ip

    1.创建自己的桥接网络 $ docker network create --subnet=172.18.0.0/16 mynetwork 2.docker-compose.yaml 文件格式demo ...

  9. go语言goroutine

    Go语言goroutine 在别的语言里想要在一个程序中实现多任务,如python,python实现多任务可以使用多进程.多线程.携程.但多进程占用资源,多线程无法发挥多核的优势(GIL),pytho ...

  10. (js描述的)数据结构[哈希表1.3](10)

    1.哈希表的完善 1.容量质数(limit):需要恒为质数,来确保元素的均匀分布. 1)普通算法: 判断一个数是否为质数 function isPrime(num) { for (var i = 2; ...