JavaScript 코드를 최적화하는 8가지 방법

JS 코드에서 동일한 효과를 작성하는 방법은 여러 가지가 있습니다. 결과는 동일하지만 단계가 다른 예가 많이 있습니다. 그러나 효과를 작성했지만 페이지 성능이 크게 저하되었습니다. 현재 개발에서는 스크립트 성능이 점점 더 중요해지고 있습니다. 이 글은 주로 JavaScript 코드 최적화에 대한 8가지 요약을 공유합니다. 이것이 도움이 되기를 바랍니다.

이 기사에서는 JS 프로그래밍 스타일의 몇 가지 핵심 사항을 자세히 소개합니다.

느슨한 결합

다른 구성 요소를 변경하지 않고 한 구성 요소만 수정하면 느슨한 결합이 이루어집니다

1. CSS를 사용하지 마세요. 표현

//不好的做法
.box{width: expression(document.body.offsetWidth + 'px')}

2. JS에서 CSS 스타일 분리: JS를 통해 CSS 스타일을 수정할 때 스타일을 하나씩 수정하는 대신 className 또는 classList를 사용하세요.

//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';

.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');

3. JS 추출 HTML에서: JS 파일을 외부 파일에 넣습니다

4. JS에서 HTML 추출: innerHTML에 DOM 구조를 연결하지 말고 핸들바와 같은 문자열 템플릿을 사용하세요.

전역 변수

전역 변수를 만드는 것은 나쁜 것으로 간주됩니다. 특히 팀 개발의 맥락에서 이는 특히 문제가 됩니다. 코드의 양이 증가함에 따라 전역 변수는 매우 중요한 유지 관리 문제를 일으킬 수 있습니다. 전역 변수가 많을수록 오류가 발생할 가능성이 높아집니다. 일반적으로 다음과 같은 세 가지 해결 방법이 있습니다. 1. 전역 변수 없음

구현 방법 즉시 호출 기능 IIFE를 사용하고 그 안에 모든 스크립트를 배치하는 것입니다

(function(){
 var doc = win.document;
})(window);

이 모드는 코드가 다른 코드에 종속되어야 하거나 지속적으로 실행되어야 하는 한 사용 시나리오가 제한되어 있습니다. 확장되거나 수정된 ​​경우에는 이 방법을 사용할 수 없습니다

2. 단일 전역 변수 및 네임스페이스

가능한 적은 전역 변수를 사용합니다. 즉, 전역 변수를 하나만 만들고 YUI 또는 jQuery

와 같은 단일 변수 모드를 사용합니다. 하나의 글로벌 변수, 즉 생성된 고유한 글로벌 개체 이름은 고유하며 모든 기능 코드는 이 글로벌 개체에 마운트됩니다. 따라서 가능한 모든 전역 변수는 고유한 전역 변수의 속성이 되므로 여러 전역 변수가 생성되지 않습니다. 네임스페이스는 단순히 전역 개체의 단일 속성으로 표시되는 기능적 그룹입니다. 예를 들어 Y.DOM 아래의 모든 메서드는 DOM 작업과 관련되고, Y.Event 아래의 모든 메서드는 이벤트와 관련됩니다. 일반적인 규칙은 각 파일이 새로운 전역 개체를 통해 자체 네임스페이스를 선언한다는 것입니다

3. 모듈 사용

모듈은 새로운 전역 변수나 네임스페이스를 생성하지 않는 일반적인 기능적 조각입니다. 대신 이 모든 코드는 작업을 수행하거나 인터페이스를 게시하는 단일 함수에 저장됩니다. 이름을 사용하여 이 모듈을 나타낼 수 있으며 이 모듈은 다른 모듈에 의존할 수도 있습니다

이벤트 처리

이벤트 처리 관련 코드와 이벤트 환경을 결합하여 유지 관리성이 떨어집니다

1. 애플리케이션 로직을 격리합니다

. 모든 이벤트 핸들러에서 애플리케이션 로직을 분리하는 것이 가장 좋습니다. 애플리케이션 로직과 이벤트 처리 코드

//不好的做法
function handleClick(event){
 var popup = document.getElementById('popup');
 popup.style.left = event.clientX + 'px';
 popup.style.top = event.clientY + 'px';
 popup.className = 'reveal';
}
addListener(element,'click',handleClick);
//好的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event);
 },
 showPopup: function(event){
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

2. 이벤트 객체를 배포하지 마세요

애플리케이션 로직은 기능을 올바르게 완료하기 위해 이벤트 객체에 의존해서는 안 됩니다. , 메소드 인터페이스는 어떤 데이터가 필요한지 나타내야 합니다. 명확하지 않은 코드는 버그로 이어질 수 있습니다. 가장 좋은 방법은 이벤트 핸들러가 이벤트 개체를 사용하여 이벤트를 처리하도록 한 다음 필요한 모든 데이터를 가져와 애플리케이션 로직에 전달하는 것입니다

//改进的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

이벤트를 처리할 때 이벤트 프로그램이 이벤트 객체에 노출되는 유일한 기능입니다. 이벤트 핸들러는 이벤트 핸들러에 직접 포함되어야 하는 이벤트 버블링 방지를 포함하여 애플리케이션 로직을 입력하기 전에 이벤트 개체에 대해 필요한 작업을 수행해야 합니다

//改进的做法
var MyApplication = {
 handleClick: function(event){
  event.preventDefault();
  event.stopPropagation();
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

구성 데이터

코드는 정의에 지나지 않습니다. 일부 지침 컴퓨터에서 실행할 실행 파일 모음입니다. 우리는 종종 데이터를 컴퓨터에 전달하고, 명령에 따라 데이터를 조작하고, 최종적으로 결과를 생성합니다. 데이터를 수정해야 하는 경우 불필요한 위험이 발생할 수 있습니다. 핵심 데이터는 코드에서 추출되어야 합니다

구성 데이터는 애플리케이션에 하드 코딩된 값이며 향후 수정될 수 있으며 다음 내용을 포함합니다

1、URL
2、需要展现给用户的字符串
3、重复的值
4、配置项
5、任何可能发生变更的值

다음은 처리되지 않은 구성을 처리하는 방법입니다. data

//不好的做法
function validate(value){
 if(!value){
  alert('Invalid value');
  location.href="/errors/invalid.php" rel="external nofollow" ;
 }
}
function toggleSelected(element){
 if(hasClass(element,'selected')){
  removeClass(element,'selected');
 }else{
  addClass(element,'selected');
 }
}

다음 코드는 구성 개체에 구성 데이터를 저장합니다. 구성 개체의 각 속성은 데이터 조각을 저장합니다. 각 속성 이름에는 데이터 유형을 나타내는 접두사가 있습니다. MSG는 다음에 제공되는 표시 정보를 의미합니다. 사용자, URL은 네트워크 주소를 나타내고 CSS는 이것이 className임을 나타냅니다. 물론 전체 구성 개체를 별도의 파일에 넣을 수도 있으므로 구성 데이터에 대한 수정 사항이 이 데이터를 사용하는 코드에서 완전히 격리될 수 있습니다

//好的做法
var config = {
 MSG_INVALID_VALUE: 'Invalid value',
 URL_INVALID:'/errors/invalid.php',
 CSS_SELECTED:'selected'
}
function validate(value){
 if(!value){
  alert(config.MSG_INVALID_VALUE);
  location.href=config.URL_INVALID;
 }
}
function toggleSelected(element){
 if(hasClass(element,config.CSS_SELECTED)){
  removeClass(element,config.CSS_SELECTED);
 }else{
  addClass(element,config.CSS_SELECTED);
 }
}

선택기 최적화

선택기를 요소로 선택하세요 객체의 정적 속성이 중앙 집중화되어 한 곳에서 관리되므로

initializeElements: function() {
  var eles = app.Eles;
  for (var name in eles) {
    if (eles.hasOwnProperty(name)) {
      this[name] = $(eles[name]);
    }
  }
}

다음은 예시입니다

//好的做法app.Eles = {
  widgetp: ".left-widget p",
  inputResize: '.input-resize',
  hr: '.hr',
  txt: '.input-group-btn button',
  cus: '#paper-type-cus',
  hid: '#hidden',
  mainCon: '#mainCon',
  rulerX: '.ruler-x',
  rulerY: '.ruler-y',
};

기능 최적화

【세련된 기능】

在javascript开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构

如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点

1、避免出现超大函数

2、独立出来的函数有助于代码复用

3、独立出来的函数更容易被覆写

4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用

比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息有关的log，那么打印log的语句就可以被封装在一个独立的函数里：

var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
  });
};
//改成：
var getUserInfo = function(){
  ajax( 'http:// xxx.com/userInfo', function( data ){
    printDetails( data );
  });
};
var printDetails = function( data ){
  console.log( 'userId: ' + data.userId );
  console.log( 'userName: ' + data.userName );
  console.log( 'nickName: ' + data.nickName );
};

【尽量减少参数数量】

如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、heigth以及square：

var draw = function(width,height,square){};

但实际上正方形的面积是可以通过width和height计算出来的，于是我们可以把参数square从draw函数中去掉：

var draw = function( width, height ){
  var square = width * height;
};

假设以后这个draw函数开始支持绘制圆形，需要把参数width和height换成半径radius，但图形的面积square始终不应该由客户传入，而是应该在draw函数内部，由传入的参数加上一定的规则计算得来。此时，可以使用策略模式，让draw函数成为一个支持绘制多种图形的函数

【传递对象参数代替过长的参数列表】

有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果想在第3个参数和第4个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：

var setUserInfo = function( id, name, address, sex, mobile, qq ){
  console.log( 'id= ' + id );
  console.log( 'name= ' +name );
  console.log( 'address= ' + address );
  console.log( 'sex= ' + sex );
  console.log( 'mobile= ' + mobile );
  console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 );

这时可以把参数都放入一个对象内，然后把该对象传入setUserInfo函数，setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序，只要保证参数对应的key值不变就可以了：

var setUserInfo = function( obj ){
    console.log( 'id= ' + obj.id );
    console.log( 'name= ' + obj.name );
    console.log( 'address= ' + obj.address );
    console.log( 'sex= ' + obj.sex );
    console.log( 'mobile= ' + obj.mobile );
    console.log( 'qq= ' + obj.qq );
  };
  setUserInfo({
    id: 1314,
    name: 'xiaohuochai',
    address: 'beijing',
    sex: 'male',
    mobile: '150********',
    qq: 121631835
  });

条件优化

【合并条件片段】

如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。假如有一个分页函数paging，该函数接收一个参数currPage，currPage表示即将跳转的页码。在跳转之前，为防止currPage传入过小或者过大的数字，要手动对它的值进行修正，详见如下伪代码：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
    jump( currPage ); // 跳转
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
    jump( currPage ); // 跳转
  }else{
    jump( currPage ); // 跳转
  }
};

可以看到，负责跳转的代码jump(currPage)在每个条件分支内都出现了，所以完全可以把这句代码独立出来：

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
  }
  jump( currPage ); // 把jump 函数独立出来
};

【把条件分支语句提炼成函数】

在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。假设现在有一个需求是编写一个计算商品价格的getPrice函数，商品的计算只有一个规则：如果当前正处于夏季，那么全部商品将以8折出售。代码如下：

var getPrice = function( price ){
  var date = new Date();
  if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
    return price * 0.8;
  }
  return price;
};

观察这句代码：

date.getMonth()>=6&&date.getMonth()<=9

这句代码要表达的意思很简单，就是判断当前是否正处于夏天（7~10月）。尽管这句代码很短小，但代码表达的意图和代码自身还存在一些距离，阅读代码的人必须要多花一些精力才能明白它传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确地表达代码的意思，函数名本身又能起到注释的作用。代码如下：

var isSummer = function(){
  var date = new Date();
  return date.getMonth() >= 6 && date.getMonth() <= 9;
};
var getPrice = function( price ){
  if ( isSummer() ){ // 夏天
    return price * 0.8;
  }
  return price;
};

【提前让函数退出代替嵌套条件分支】

许多程序员都有这样一种观念：“每个函数只能有一个入口和一个出口。”现代编程语言都会限制函数只有一个入口。但关于“函数只有一个出口”，往往会有一些不同的看法。下面这段伪代码是遵守“函数只有一个出口的”的典型代码：

var del = function( obj ){
  var ret;
  if ( !obj.isReadOnly ){ // 不为只读的才能被删除
    if ( obj.isFolder ){ // 如果是文件夹
      ret = deleteFolder( obj );
    }else if ( obj.isFile ){ // 如果是文件
      ret = deleteFile( obj );
    }
  }
  return ret;
};

嵌套的条件分支语句绝对是代码维护者的噩梦，对于阅读代码的人来说，嵌套的if、else语句相比平铺的if、else，在阅读和理解上更加困难。嵌套的条件分支往往是由一些深信“每个函数只能有一个出口的”程序员写出的。但实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出。引导阅读者去看一些没有用的else片段，只会妨碍他们对程序的理解

于是可以挑选一些条件分支，在进入这些条件分支之后，就立即让这个函数退出。要做到这一点，有一个常见的技巧，即在面对一个嵌套的if分支时，可以把外层if表达式进行反转。重构后的del函数如下：

var del = function( obj ){
  if ( obj.isReadOnly ){ // 反转if 表达式
    return;
  }
  if ( obj.isFolder ){
    return deleteFolder( obj );
  }
  if ( obj.isFile ){
    return deleteFile( obj );
  }
};

循环优化

【合理使用循环】

在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。下面有一段创建XHR对象的代码，为了简化示例，只考虑版本9以下的IE浏览器，代码如下：

var createXHR = function(){
  var xhr;
  try{
    xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
  }catch(e){
    try{
      xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
    }catch(e){
      xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
    }
  }
  return xhr;
};
var xhr = createXHR();

下面灵活地运用循环，可以得到跟上面代码一样的效果：

//下面我们灵活地运用循环，可以得到跟上面代码一样的效果：
var createXHR = function(){
  var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
  for ( var i = 0, version; version = versions[ i++ ]; ){
    try{
      return new ActiveXObject( version );
    }catch(e){
    }
  }
};
var xhr = createXHR();

【用return退出多重循环】

假设在函数体内有一个两重循环语句，需要在内层循环中判断，当达到某个临界条件时退出外层的循环。大多数时候会引入一个控制标记变量：

var func = function(){
  var flag = false;
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        flag = true;
        break;
      }
    }
    if ( flag === true ){
      break;
    }
  }
};

第二种做法是设置循环标记：

var func = function(){
  outerloop:
  for ( var i = 0; i < 10; i++ ){
    innerloop:
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        break outerloop;
      }
    }
  }
};

这两种做法无疑都让人头晕目眩，更简单的做法是在需要中止循环的时候直接退出整个方法：

var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return;
      }
    }
  }
};

当然用return直接退出方法会带来一个问题，如果在循环之后还有一些将被执行的代码呢？如果提前退出了整个方法，这些代码就得不到被执行的机会：

var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return;
      }
    }
  }
  console.log( i ); // 这句代码没有机会被执行
};

为了解决这个问题，可以把循环后面的代码放到return后面，如果代码比较多，就应该把它们提炼成一个单独的函数：

var print = function( i ){
  console.log( i );
};
var func = function(){
  for ( var i = 0; i < 10; i++ ){
    for ( var j = 0; j < 10; j++ ){
      if ( i * j >30 ){
        return print( i );
      }
    }
  }
};func();

 相关推荐：

怎样优化自己的JavaScript代码

JavaScript代码分享：tab标签的切换

如何用JavaScript代码获取left和top值的方法详解