性能(js)
- 1.避免全局查找:
<script type="text/javascript">
function updateUI(){
var imgs=document.getElementsByTagName("img");
for(var i=0,len=imgs.length;i<len;i++){
imgs[i].title=document.title+"image"+i;
}
var msg=document.getElementById("msg");
msg.innerHTML="updated!"
}
updateUI();
</script>
可能优化脚本性能最重要的就是:注意全局查找。使用全局变量和函数的开销比局部变量更大,因为涉及作用域链上的查找。以上例子包含了三个对全局document对象的引用。当图片特别多时,会造成对此作用域链上的查找。在这里,可以创建一个指向document对象的局部变量。来改进性能。如下:
1 <script type="text/javascript">
2 function updateUI(){
3 var doc=document;
4 var imgs=doc.getElementsByTagName("img");
5 for(var i=0,len=imgs.length;i<len;i++){
6 imgs[i].title=doc.title+"image"+i;
7 }
8 var msg=doc.getElementById("msg");
9 msg.innerHTML="updated!"
10 }
11 updateUI();
12 </script>
在这里,首先将document对象保存在本地的doc变量中,后边的引用均为该本地变量,现在函数只有一次全局查找,肯定更快。
- 2.避免with语句
和函数相同,with会创建自己的作用域。从而增加其中执行代码的作用域链长度。由于额外作用域的查找,在with语句中执行的代码肯定比外面执行的代码要慢。如下:
function updateBody(){
with(document.body){
alert(tagName);
innerHTML="hello world!";
}
}
updateBody();
改进:虽然使用with语句可以创建document.body的作用域,在内部直接调用它的方法和属性即可。但可以使用局部变量来达到相同的效果。
function updateBody(){
var body=document.body;
alert(body.tagName);
body.innerHTML="hello world!";
}
updateBody();
以上均为:需要不断查询作用域链,从而造成开销。可通过创建局部变量的方法。
- 选择正确方法
- 对象属性查找:使用变量和数组要比访问对象上的属性更高效。对象上的属性查找花费时间比较长,因需要在原型链中对该属性进行一次搜索。所以:一旦多次用到对象属性,应该将其存储在局部变量中。
- 优化循环: (1).减值迭代 (2)简化终止条件 (3)简化循环体 (4)使用后测试循环
(1):大多数循环使用从0开始、增加到某个特定值的迭代器。在很多情况下,从最大值开始,在循环中不断减值的迭代器更高效。
(2):由于每次循环都会计算终止条件,所以必须保证终止条件的简单,避免属性查找和其他操作。
(3):确保循环体的优化。
(4):使用后测试优化---最常使用for循环和while循环 都属于前测试循环。而do-while这种后测试循环,避免终止条件的计算,运算更快。
- 最小化语句数
- 多个变量声明:变量声明只用一个var语句,之后用逗号隔开。比单个变量分别声明要快很多。
- 插入迭代值 :当使用迭代值时(在不同位置进行增加和减少的值),尽可能合并语句。如:
var name=values[i];
i++; 更正为:
var name=values[i++]; 使用数组和对象字面量:
- 优化DOM交互
- 最小化现场更新:一旦访问的DOM部分是已经显示的页面的一部分,那么就要进行现场更新。即需要对页面对用户的显示进行更新。例如:
var list=document.getElementById("list");
for(var i=0;i<10;i++){
var item=document.createElement("li");
list.appendChild(item);
item.appendChild(document.createTextNode("item"+i));
}
因为每次添加项目时都要有两个现场更新,添加<li>元素和添加文本节点。
解决方法:第一种,将列表从页面移除,最后进行更新,最后将列表插入原位置。不理想:每次页面更新会有闪烁。
第二种,使用文档片段来构建DOM结构,接着将其添加到list元素。片段本身不会被添加,片段中的子节点会被添加到目标。
var list=document.getElementById("list"),
fragment=document.createDocumentFragment(),
item,
i;
for(i=0;i<10;i++){
item=document.createElement("li");
fragment.appendChild(item);
item.appendChild(document.createTextNode("item"+i));
}
list.appendChild(fragment);
2.使用innerHTML。创建一个字符串然后一次性调用innerHTML要比调用innerHTML多次快的多。
3.使用事件代理。页面上的事件处理程序的数量和页面响应用户交互的速度之间有个负相关,为了减少这种惩罚,最好事件代理:利用事件冒泡,任何可以冒泡的事件都不仅仅可以可以在事件目标上进行处理,目标的任何组件节点也能处理。
4.注意HTMLCollection。任何时候访问HTMLCollection,不管属性还是方法,都是在文档上进行查询,开销比较昂贵。。要尽量最小化访问。优化的重点部分是循环。如:
var image=document.getElementsByTagName("img"),
i,
len;
for(var i=0,len=image.length;i<len;i++){
//处理
}
优化的关键:长度length存入变量len,而不是每次都去访问HTMLCollection的length属性。在循环中使用HTMLCollection时,下一步应该是获取要使用项目的引用,避免在循环体内多次调用HTMLCollection。
var image=document.getElementsByTagName("img"),
i,
len;
for(var i=0,len=image.length;i<len;i++){
img=image[i];
}
这样,在循环中就没有理由再去访问image的HTMLCollection。
注意:在编写JavaScript时,要清楚何时返回HTMLCollection对象。这样就可以最小化的访问。以下情况下均返回HTMLCollection对象:
- 调用getElementsByTagName()
- 获得元素的childNodes属性。
- 获取元素的attributes属性。
- 访问特殊集合,如document.forms、document.images等。
性能(js)的更多相关文章
- 转:HTML5标准与性能之四:asm.js
HTML5标准与性能之四:asm.js Cong Liu (Intel) 于 星期五, 24/05/2013 - 01:13 提交 之前的几篇文章分别介绍了WebWorkers.Typed Array ...
- JavaScript代码规范和性能整理
性能 Js在性能方面有多要注意的地方: 避免全局查找 Js性能优化最重要的就是注意全局查找,因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域,所以全局作用域查找的性能消 ...
- ionic react-native和native开发移动app那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- 专题:点滴Javascript
JS#38: Javascript中递归造成的堆栈溢出及解决方案 JS#37: 使用console.time测试Javascript性能 JS#36: Javascript中判断两个日期相等 JS#3 ...
- ionic react-native和native开发移动app到底那个好
ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...
- 五年 Web 开发者 star 的 github 整理说明
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:樊东东 前端从业几年,积累了不少github开源库. 有时候想查阅以前star的库,但不好找,github大多库都是英文说明,对中文 ...
- ChakraCore/JSRT使用问题汇总
QQ交流群:523723780(ChakraCore) ChakraCore是什么? 一个微软开源的,用于Windows IE/Edge内核的高效JS脚本引擎. 前不久微软开源了ChakraCore, ...
- web优化 js性能高级篇
今天我们继续上一个阶段关于web的性能优化,如何对js高级进行优化 (1)闭包 何为闭包; 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 我认 ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
随机推荐
- 做好Unity4.x开发项目规划
1. 是否要用lua 2. (对于需操作的游戏)客户端游戏如何做战斗验证 下面列举小坑吧.不建议都绕开,毕竟没有那么多时间做前期调研的. 对应版本Unity4.x 1. 客户端程序层面 总的来说C#超 ...
- Windows Server 2008 R2微软官方下载
注意:Windows Server 2008 R2仅有64位版本. 以下下载地址为Windows Server 2008 R2 RTM Build 7600.16385的评估版本,此版本可免费试用18 ...
- List,Set,Map集合的遍历方法
List的三种实现:ArrayList(数组) LinkedList(链表) Vector(线程安全) List集合遍历方法: List<String> list = new Arra ...
- js 遍历行和列
]; //遍历列 ; i < table.rows[].cells.length; i++) { console.log(table.rows[].cells[i].innerText); ]. ...
- k近邻算法(KNN)
k近邻算法(KNN) 定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. from sklearn.model_selection ...
- 魅族手机USB调试无法打开、log无法打印
MEIZU 在打开usb调试允许时,总提示:because an app is oobscuring a premision request, Setting can't verify your re ...
- arachni安装使用
下载:http://www.arachni-scanner.com/download/#linux 解压到不是中文的目录下:tar -zxvf arachni-1.5.1-0.5.12-linux-i ...
- Python设计模式 - 总览(更新中...)
最近打算重构部分python项目,有道是"工欲善其事,必先利其器",所以有必要梳理一下相关设计模式.每次回顾基本概念或底层实现时都会有一些新的收获,希望这次也不例外. 本系列打算先 ...
- java面试:HR面
就算技术面全都答对了,有时也会因为HR面没有认真对待而拿不到offer. HR的想法 找工作难,招人也好难.HR想要招什么样的人? 稳定.如果你跳槽频繁,HR可能会担心你干了没一年就跑路了,她又得重新 ...
- gitlab-ce 安装、汉化与阿里邮箱配置(注意是CE)
环境准备 yum install curl openssh-server openssh-clients postfix cronie policycoreutils-python –y curl h ...