JavaScript 性能提升之路(推荐)

在平时工作做项目的过程中我们有时候会遇到页面加载很久才加载出来的情况,这样严重影响了用户的体验效果。虽然说有时候可能是因为网络问题,但有些时候确实是前端代码没有足够优化导致的。所以通过查阅相关资料并实践后,总结出如下知识点来提升性能。有什么写得不对的地方还希望各路大神指出并加以指点。

1、数据访问

1、将所有script标签放在尽可能接近body标签底部的位置,尽可能减少对整个页面下载的影响。

2、尽量少用全局变量。因为变量在作用域链中的位置越深,访问的时间就越长。局部变量位于作用域链中的第一个对象中,全局变量总是位于作用域链的最后一环,所以全局变量总是最慢的。

3、避免全局查询,如果一定要用到全局变量时,并且需要在某个函数中多次用到该全局变量时,可以定义一个局部变量指向全局变量,来缩短在作用域链中的查询深度。

 function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (trackNode[j]["userId"] == allChildrenNode[i]) {
          trackNode[j]["isOnMap"] = true;
        }
      }
    }
  }

上面代码可以改写为如下所示

  function addTotrackData(){
  	var allChildrenNode=getAllChildrenDepartmentNodes();
  	var track=trackNode;
  	for (var i = 0; i < allChildrenNode.length; i++) {
      for (var j=0,len=track.length;j<len;j++) {
        if (track[j]["userId"] == allChildrenNode[i]) {
          track[j]["isOnMap"] = true;
        }
      }
    }
  }

4、将集合的length属性用一个局部变量来保存,在迭代中使用该变量。

 for (var j=0,len=track.length;j<len;j++) 

5、避免使用with表达式,因为它增加作用域链的长度。而且应当小心的对待try-catch的catch子句,它具有同样效果。

6、一个属性或方法在原型链中的位置越深,它的访问速度就越慢。

7、声明变量时,多个变量合并声明,可以减少内存消耗。

 var a;
  var b;
  var c;
  //推荐
  var a,b,c

2、Dom操作

Dom(文档对象模型)是一个独立于语言的,使用xml和html文档操作的应用程序接口。在浏览器中的接口却是以javascript来实现的。Dom和javascript看成两座岛,两者之间通过一座收费的桥连接。一般建议尽量留在javascript岛上。

1、用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

 //dom方式
  var str=""
  var dom=document.getElementById("test");
  var start1=new Date();
  for(var j=0;j<100000;j++){
  	var div=document.createElement("div");
  	div.innerText="test";
  	dom.append(div);
  }
  var end1=new Date();
  console.log("dom方式:"+(end1-start1));//dom方式:356

  //inerHTML方式
  var content="";
  var start=new Date();
  for(var i=0;i<10000;i++){
    content=content+"<div>test</div>";
  }
  document.getElementById("test").innerHTML=content;
  var end=new Date();
  console.log("innerHTML方式:"+(end-start));//innerHTML方式:35

2、如果统一个Dom元素或集合被访问一次以上,最好使用一个局部变量来缓存此Dom成员,在循环中使用局部变量缓存集合引用和集合元素会提升速度。

3、遍历children比childNodes更快。children不区分(包括)注释节点和空文本节点,所以快一些。

4、使用element.cloneNode(bool)复制节点,bool为false表示浅复制,只复制当前节点,bool为true时,表示深复制,还会复制其子节点。这种方式比document.createElement()速度要快一些。

5、使用document.querySelector和document.querySelectorAll("div.warning,div.notice")来快速查找。因为它们返回一个NodeList——由符合条件的节点构成的类数组对象,而不是HTML集合(总是表现出存在性),避免了它所固有的性能问题(以及存在的逻辑问题)。querySelectorAll("div.warning,div.notice")还可以进行联合查询。

6、修改样式时,可以使用div.style.cssText来一起修改样式,或者使用类来修改(便于维护)。

var el = document.getElementById('mydiv');
   //修改3次Dom
  el.style.borderLeft = '1px';
  el.style.borderRight = '2px';
  el.style.padding = '5px';
  //推荐只需要修改1次Dom
  el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;'

7、尽量避免写在HTML标签中写Style属性,使用外联样式便于维护和修改。

8、避免图片和iFrame等的空Src。空Src会重新加载当前页面,影响速度和效率。

9、采用事件委托。元素连接事件句柄会影响页面性能,采用委托利用事件冒泡的性能减少元素连接事件。(事件挂接过程都是发生在onload或DOMContentReady)事件中。

3、循环

1、for-in是四种循环方法中速度最慢的一种,一般用于循环对象(需要查找自身属性还是原型属性)。不建议循环数组。除非要迭代遍历一个属性未知的对象,否则一般不用for-in。

2、改变循环条件的顺序来提高循环性能。

 //推荐
  for(var i=items.length;i--;){
    //todo
  }
  //不推荐
  for(var i=0,len=items.length;i<len;i++){
    //todo
  }

3、通过减少循环体来优化性能。

以上所述是小编给大家介绍的JavaScript性能提升详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 编写高性能Javascript代码的N条建议

    多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执行效率影响不明显.但在某些情况下,不优化的Javascript代码必然会影响用户的体验.因此,即使在当前硬件性能已经大大提升的时代,在编写Javascript代码时,若能遵循Javascript规范和注意一些性能方面的知识,对于提升代码的可维护性和优化性能将大有好处. 下面给出编写高性能的Javas

  • JavaScript 总结几个提高性能知识点(推荐)

    前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了,总归是要学到些什么的.说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,也可能是自身水平有限,未能体会到其中真意).看这本书的过程中也是写了挺多代码用以测试的,并且对本

  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

  • 13 个JavaScript 性能提升技巧分享

    Daniel Clifford 在 Google I/O 2012 上做了一个精彩的演讲"Breaking the JavaScript Speed Limit with V8".在演讲中,他深入解释了13个简单的代码优化方法,可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速.在演讲中,他解释了怎么优化,并且解释了原因.下面简明的列出了优化的要点: 1. 在构造函数中初始化所有的对象 2. 始终用相同的顺序初始化对象

  • JavaScript执行效率与性能提升方案

    如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • JavaScript性能优化之小知识总结

    随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas

  • JavaScript 性能提升之路(推荐)

    在平时工作做项目的过程中我们有时候会遇到页面加载很久才加载出来的情况,这样严重影响了用户的体验效果.虽然说有时候可能是因为网络问题,但有些时候确实是前端代码没有足够优化导致的.所以通过查阅相关资料并实践后,总结出如下知识点来提升性能.有什么写得不对的地方还希望各路大神指出并加以指点. 1.数据访问 1.将所有script标签放在尽可能接近body标签底部的位置,尽可能减少对整个页面下载的影响. 2.尽量少用全局变量.因为变量在作用域链中的位置越深,访问的时间就越长.局部变量位于作用域链中的第一个

  • Web性能优化系列 10个提升JavaScript性能的技巧

    Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当

  • javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

  • web性能优化之javascript性能调优

    JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

  • JavaScript 性能优化小结

    随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 在J2EE编程中,我们接触最多的脚本语言还是JavaScript.在使用JavaScr

  • Javascript字符串拼接小技巧(推荐)

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

  • JavaScript性能优化总结之加载与执行

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(),例如清单 1 清单 1 JavaScript 代码内嵌示例 <html> <head> <title

  • Nginx开启一个参数就能让你的WEB性能提升3倍的方法

    一.遇到的一些问题 记得 2008 年做性能测试的时候,新进7台 lenovo 4核4G 服务器用于性能测试. 当时资源紧张,这7台服务器都装了双系统(Win2003/CentOS5)空闲时用于做测试机(压测的Agent). 当时给Nginx做了一系列测试,印象很深的是:在这批机器上,Nginx状态页面的压测. 短连接的话最佳QPS约4万,长连接的话最高QPS约13万. 大概3年后,那批 lenovo 服务器已经没人瞧得上了,只能做肉鸡. 然而,一次不经意的测试,发现再牛的服务器,短连接最佳QP

随机推荐