高性能Javascript总结

Posted 2020-11-04 jiangcheng-langzi

一、加载和运行

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

二、数据访问

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

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

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

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

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

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

三、DOM编程

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

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

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

引发重排的几个原因：

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

         2、元素位置改变

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

         4、内容改变

         5、最初的页面渲染

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

 针对重排和重绘引发的性能问题可以通过批量修改、离线操作DOM树、缓存并减少对布局信息的访问来降低其带来的影响。

 事件托管技术可以最小化事件句柄数量。

四、算法和流程控制

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

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

五、响应接口

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

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

当多个重复的定时器被同事创建会产生性能问题。因为只有一个UI线程，所有定时器竞争运行时间。

六、Ajax  异步JavaScript和XML

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

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

作为数据格式，纯文本和HTML是高度限制的，但其可以节省客户端的CPU周期。XML应用广泛但非常冗长且解析缓慢。json是轻量级、解析迅速，交互性和XML相当。自定义格式非常轻量。总而言之，越轻量级的格式越好，最好是json和字符分割的自定义格式。

七、编程实践

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

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

JS的原生部分一般是用低级语言写的，如C++，所以无论怎样优化JS代码，永远不会比JS引擎提供的原生方法更快，比如内置的Math对象提供的诸多方法。