JavaScript 性能

Web性能是客观的衡量指标，也是加载时间和运行时用户的感知和体验。

Web性能是网站加载，交互和响应所需的时间，以及用户交互过程中内容的平滑程度。

许多功能会影响性能，包括延迟，应用程序大小，DOM节点数，发出的资源请求数，JavaScript性能，CPU负载等。

如何提升Web性能？

减少循环活动

可以放在循环外部的语句 或 赋值将使循环运行更快。

在下面的示例中，每次循环时，我们都访问数组的length属性：

for (let i = 0; i < arr.length; i++) {

在下面的示例中，我们在循环外部访问length属性，并使循环运行更快：

let size = arr.length;
for (let i = 0; i < size; i++) {

提高DOM访问效率

与其他JavaScript语句相比，访问HTML DOM的速度非常慢。

如果需要多次访问DOM元素，请访问一次，并将其用作局部变量。

将JavaScript放在页面底部

将脚本放在页面正文的底部，使浏览器可以首先加载页面。

在下载脚本时，浏览器将不会启动任何其他下载，并且所有解析和渲染活动都可能被阻止。

一种代替方法是在脚本标记中使用defer="true"。该延迟该脚本应的页面后执行属性指定已完成解析，但它仅适用于外部脚本。

不要使用“with”关键字

with关键字被认为是“鸡肋”，因为它存在一些非常令人沮丧的缺陷。

尽管 with简化了处理本地属性的过程，但是使用with会增加在其他作用域中查找变量的开销。

with严格模式下不允许使用关键字。

最少的HTTP请求

通过组合外部文件并将JavaScript直接包含在HTML页面中，从而最小化呈现页面的HTTP请求。

每次唯一的HTTP访问服务器时，都会导致大量延迟。

不要两次使用相同的脚本

重复的脚本将对性能产生重大影响。重复的脚本将在HTTP上创建不必要的请求，尤其是在IE浏览器中。

不要使用eval()

尽管该eval()函数是运行任意代码的好方法，但是传递给eval函数的每个字符串都必须即时进行解析和执行。每次执行到达eval函数调用时，都产生开销。