通过编码规范优化JavaScript性能

蔚落 2021-07-26 19:09 424阅读 0赞

@\[TOC\]通过编码规范优化JavaScript性能

# 通过编码规范优化JavaScript性能 #

## 避免全局查找 ##

如果在一个函数中多次访问一个全局变量，应将其保存为函数内部的局部变量，以减少全局查找。

## 避免使用with ##

with语句会创建自己的作用域，增加执行代码的作用域长度，造成额外的作用域查找。

## 优化循环 ##

*  简化循环体
 *  简化终止条件，提前跳出循环
 *  优先计算循环次数（当我们需要对数组进行循环时，应在循环开始前优先计算出数组长度，而不是在循环体了计算数组长度）即采用

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

而避免使用

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

## switch比if-else语句更快 ##

switch语句比if-else语句执行速度快，还可以通过将case语句按照发生可能性从高到低的顺序排列，实现进一步优化。但是不要忘了break。

## 最小化语句数 ##

*  合并变量声明  
    将`let a = 1;let b = 2; let c = 3;`等语句合并成`let a =1,b = 2, c = 3;`
 *  使用字面量创建数组和对象,不要使用构造函数

let arr = [1,2,3];
    let obj = { name:"gmy"}

## 优化DOM操作 ##

尽可能少的操作DOM 能最大的提示js的性能

*  通过创建文档片段来收集dom更新然后使用appendChild等方法一次性更新DOM
 *  innerHTML操作DOM的效率比appendCHild()、createElemnt()等方法效率高  
    因为innerHTML是内部方法是编译好的不需要解释执行。
 *  使用事件代理减少事件监听程序的注册  
    利用事件冒泡的原理实现事件代理，即通过在父级元素上绑定事件处理程序监听所有子元素的事件。  
    比如在UL上监听每个li的点击事件。
 *  最小化访问HTMLCollection  
    多次使用应保存为局部变量

## 部署压缩 ##

*  将读个js文件打包成一个js或更少数量的js文件。  
    js文件是数量会阻塞http请求
 *  代码压缩  
    删除额外的空白、删除所有的 注释、缩短变量名（借助第三方工具实现压缩）
 *  http压缩  
    借助浏览器和服务器的压缩功能

## 结语 ##

以上内容是对js优化的一个便于记忆的总结，更多更详细的内容需要读者再进一步扩展

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python编码规范与代码优化

> 博主：[命运之光][Link 1] > > 专栏：[Python程序设计][Python] Python编码规范 Python的程序由包、模块（即一个Python

怼烎@/ 2023年10月16日 16:26/ 0 赞/ 19 阅读

相关 javaScript性能优化

javaScript性能优化 1.内存管理 function fn(){ arrList=[] arrList[10000000]="

短命女/ 2022年12月29日 14:05/ 0 赞/ 293 阅读

相关前端编码风格规范之 JavaScript 规范

JavaScript 规范 -------------------- 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Inv

冷不防/ 2022年08月06日 11:09/ 0 赞/ 291 阅读

相关 Android编码规范及性能优化整理

最近看到新人的android代码实在问题太多，一些基本的地方都有问题，于是重新培训了下代码规范，希望后面能慢慢好起来。一、Android编码规范 1.java代码中不出现

痛定思痛。/ 2022年08月06日 08:22/ 0 赞/ 273 阅读

相关通过GZIP优化性能

原创文章，转载请注明 gzip为一种压缩技术，在网络http传输中得到应用。gzip需要web容器，浏览器的支持。

墨蓝/ 2022年07月16日 15:18/ 0 赞/ 197 阅读

相关 javascript 性能优化

看了比较多的文章顺便把这些东西归纳一下。各位看客，如果发现错误请指正......... 1.尽量用全局变量代替局部变量以前看道这句话的时候以为是用巧妙的方

女爷i/ 2022年07月13日 12:09/ 0 赞/ 241 阅读

相关 JavaScript性能优化

1. 代码简洁 x=x+1；在不影响功能的情况下可以简写成x++； 2. 变量名和方法名在不影响寓意的情况下简单（可以选用首字母命名）定义数组的长度可以取名为

深藏阁楼爱情的钟/ 2022年06月09日 23:22/ 0 赞/ 262 阅读

相关 JavaScript 编码规范

> 注：此规范来自 Airbnb JavaScript Style Guide \[ 用更合理的方式写 JavaScript \] 目录

一时失言乱红尘/ 2022年05月23日 12:10/ 0 赞/ 284 阅读

相关 MySQL规范与性能优化

1、写完SQL先explain查看执行计划（SQL性能优化）日常开发写SQL的时候，尽量养成这个好习惯呀：写完SQL后，用explain分析一下，尤其注意走不走索引。 2

傷城~/ 2021年09月03日 06:14/ 0 赞/ 545 阅读

相关通过编码规范优化JavaScript性能

@\[TOC\]通过编码规范优化JavaScript性能通过编码规范优化JavaScript性能避免全局查找如果在一个函数中多次访问一个全局变量，应将其保存

蔚落/ 2021年07月26日 19:09/ 0 赞/ 425 阅读