高性能Javascript总结

1、加载和运行

Javascript代码执行会阻塞其余浏览器处理过程、充分利用webpack或gulp工具对文件打包压缩，减小js文件的数量，从而减小http请求的次数，以提升网页应用的实际性能。

2、数据访问

       经典计算机科学的一个问题是肯定数据应当存放在什么地方、以实现最佳的读写效率。数据存储在哪里会关系到代码运行期间数据被检索到的速度。

JS中的四种基本的数据存储位置：直接量（字符串、数字、布尔值、对象、数组、函数、正则、null、undefind）、变量、数组项、对象成员。

每一种数据存储位置都具备特定的读写操做负担。直接量和局部变量的访问速度要快于数组项和对象成员的访问速度。所以尽可能使用直接量和局部变量，限制数组项和对象成员的使用。

对全部的浏览器来讲，一个标识符所处的位置越深，读写它的速度就越慢。在函数体内中，若是对于使用多于一次的变量值，就尽可能用局部变量存储本地范围以外的变量值。

局部变量比域外变量快，是由于他位于做用域链的第一个对象中。变量在做用域链的位置越深，访问的实际就越长。全局变量老是最慢的，由于它们老是位于做用域链的最后一环。

嵌套对象成员会形成重大性能影响，应尽可能少用。

3、DOM编程

文档对象模型（DOM）是一个独立于语言的，使用XML和HTML文档操做的应用程序接口。DOM和JS（ECMAScript）相互独立并以功能接口链接，所以每次经过js访问或修改DOM就会带来性能损耗。

通常而言，对于任何类型的DOM访问，假如同一个DOM属性或方法被访问一次以上，最好使用一个局部变量缓存此DOM成员。

        重绘和重排：当DOM改变影响到元素的几何属性（宽高）或其内部内容时，浏览器须要从新计算元素的几何属性，并且其余元素的几何属性和位置也会所以改变受到影响。浏览器使渲染树上受到的部分失效，而后重构渲染树。这个过程被称做重排。重排版完成时，浏览器会在一个重绘进程中从新绘制屏幕上受影响的部分。

引起重排的几个缘由：

         一、添加或删除可见的DOM元素

         二、元素位置改变

         三、元素尺寸改变（盒子模型）

         四、内容改变

         五、最初的页面渲染

         六、浏览器窗口尺寸的改变

 针对重排和重绘引起的性能问题能够经过批量修改、离线操做DOM树、缓存并减小对布局信息的访问来下降其带来的影响。

 事件托管技术能够最小化事件句柄数量。

4、算法和流程控制

JS中的for-in循环可枚举任何对象的命名属性（包括对象的实例属性和继承而来的属性），通常不推荐使用。

JavaScript引擎所支持的递归数量与JavaScript调用栈的大小直接相关。

5、响应接口

大多数浏览器有一个单独的处理进程，它由两个任务所共享：JavaScript任何和用户界面更新任务（UI线程）。

一个单一的JavaScript操做应当使用的总时间（最大）是100毫秒。

当多个重复的定时器被同事建立会产生性能问题。由于只有一个UI线程，全部定时器竞争运行时间。

6、Ajax  异步JavaScript和XML

ajax是一种与服务器通信而不重载当前页面的方法。

Beacons（灯标）：JS用于建立一个新的Image对象，将src设置为服务器上一个脚本文件的url，该url包含但愿经过get格式传回的键值对数据。

做为数据格式，纯文本和HTML是高度限制的，但其能够节省客户端的CPU周期。XML应用普遍但很是冗长且解析缓慢。json是轻量级、解析迅速，交互性和XML至关。自定义格式很是轻量。总而言之，越轻量级的格式越好，最好是json和字符分割的自定义格式。

7、编程实践

 eval()、Function()构造器、定时器（setTimeout()和setInterval()）四种函数能够容许在程序中获取一个包含代码的字符串而后运行它。但此时会付出二次评估的代价，与直接包含相应代码相比将占用更长的时间。

定时器建议第一个参数传入一个函数而不是一个字符串，不然会形成内存泄漏。

JS的原生部分通常是用低级语言写的，如C++，因此不管怎样优化JS代码，永远不会比JS引擎提供的原生方法更快，好比内置的Math对象提供的诸多方法。