JavaScript 코드 사양 및 성능 마무리

1. 성능

Js의 성능 측면에서 주의해야 할 사항이 많이 있습니다.

• 전역 조회 방지

Js 성능을 최적화하기 위해 가장 중요한 것은 전역 검색에 주의하는 것입니다. 범위 검색은 먼저 로컬 범위를 검색한 다음 전역 범위를 찾을 수 없을 때까지 상위 범위로 이동하여 검색하므로 성능이 저하됩니다. 전역 범위 검색의 소비는 이 기능의 로컬 범위보다 높아야 합니다. 예를 들어:

으아악

​

이 코드는 루프에서 document.getElementByid("dom")를 호출하고 문서는 루프 외부에서 한 번만 실행되므로 문서를 로컬 변수에 할당할 필요가 없습니다. 로컬 변수이므로 루프할 때마다 다시 수행할 필요가 없습니다.

으아악

​

원칙은 전역 객체가 여러 번 호출될 때, 특히 루프에서 전역 객체가 최종적으로 지역 변수에 할당된다는 것입니다. 물론 수십 번의 호출 후에는 성능 차이가 분명하지 않을 것입니다. 성능 최적화된 쓰기는 가능한 한 많이 수행되어야 합니다.

• with 문을 피하세요.

이 표현은 요즘에는 거의 사용되지 않으므로 더 이상 언급하지 않겠습니다.

• 불필요한 속성 조회 방지

간단히 말하면, 변수는 값을 저장하는데 이 변수를 호출할 때의 성능 소모는 매우 적은 반면, 객체의 속성 값을 취하는 데에는 성능 소모가 상대적으로 높습니다. 예를 들어:

으아악

​

이 코드에는 특히 비효율적인 6개의 속성 검색이 있습니다. 이를 다음과 같이 변경하는 것이 가장 좋습니다.

으아악

​

이 최적화를 통해 효율성이 크게 향상됩니다.

• 최적화 루프

1) 반복 감소: 대부분의 루프는 0부터 시작하여 루프를 증가시키는 경우가 많으므로 루프를 최대값에서 감소시키는 것이 더 효율적입니다.

2) 종료 조건 단순화: 루프를 돌 때마다 종료 조건이 판단되므로 종료 조건을 단순화하면 루프 효율성도 향상될 수 있습니다.

3) 루프 본문 단순화: 루프 본문은 가장 많이 실행되므로 루프 본문의 최적화가 보장되어야 합니다.

• Js 코드 문자열을 구문 분석하지 마세요.

js 코드에서 js 코드 문자열을 파싱할 때 코드 파싱을 위해 파서를 다시 시작해야 하는데, 이는 상대적으로 성능 소모가 크기 때문에 js 코드 단어를 구성하는 eval, 함수 등의 함수는 피하는 것이 좋습니다.

setTimeout이 문자열을 전달할 때 문자열 함수.

• 기본 방법이 더 빠르므로 기본 방법을 사용해 보세요.

• Switch 문이 더 빠릅니다.

• 비트 연산자가 더 빠릅니다.

2. 코드 사양

• 코드 주석:

1) 함수 및 메소드: 각 함수 또는 메소드에는 함수, 함수의 입력 및 출력을 설명하는 주석이 포함되어야 합니다.

2) 복잡한 알고리즘: 복잡한 알고리즘에는 사람들이 알고리즘의 논리적 사고를 이해할 수 있도록 설명을 추가해야 합니다.

3) 해킹(Hack): 호환성 코드에도 주석을 추가해야 합니다.

4) 큰 코드 블록: 단일 작업을 완료하는 데 사용되는 여러 줄의 코드 앞에는 작업을 설명하는 주석이 와야 합니다.

• HTML/자바스크립트 분리

HTML은 구조이고 js는 본질적으로 상호 작용해야 합니다. 코드를 작성할 때 html과 js 사이의 상관 관계를 줄이려고 노력해야 합니다. html 페이지 script 태그에 js 코드를 선언하고, html 태그에 onclick 이벤트를 바인딩하고, js에서 html 코드를 다시 작성하면 HTML과 js가 너무 긴밀하게 결합됩니다.

HTML 렌더링은 가능한 js와 별도로 유지해야 하며, js를 사용하여 데이터를 삽입하는 경우에는 태그를 직접 삽입하지 마십시오. 일반적으로 페이지에 태그를 직접 포함하고 숨긴 다음 전체 페이지가 렌더링될 때까지 기다리면 됩니다. 를 사용한 다음 js를 사용하여 태그를 표시합니다.

将html和js解耦可以在调试过程中节省时间，更加容易确定错误的来源，也减轻维护难度。

• 解耦css/JavaScript

JavaScript和css也是非常紧密相关的，js经常对页面的样式做动态修改。为了让他们的耦合更松散，可以通过js修改对应的class样式类。

• 解耦应用逻辑/事件处理程序

在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中，例如：

function handleKeyPress(event){

   event=EventUtil.getTarget(event);   if(event.keyCode===13){var target=EventUtil.getTarget(event);var value=5*parseInt(target.value);if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一起，这样会让调试不好调试，维护难度变高，而且要是突然修改要新增加一个事件做同样类似的逻辑处理，那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

function validateValue(value){

 value=5*parseInt(value); if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}function handleKeyPress(event){

  event=EventUtil.getEvent(event);  if(event.keyCode===13){   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了，这样做有几个好处，可以让你更容易更改触发特定过程的事件，其次可以在不附加到事件的情况下测试代码，使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其他方法；只传来着event对象中所需要的数据；

2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。

3. 任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多创建一个全局变量。类似jQuery一样，所以方法属性都在$对象当中，避免对全局变量造成过多的污染。

• 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值

2. 用户界面字符串

3.  url

4. 任意可能会更改的值

• 其他优化

1. 多变量声明时用一条语句逗号隔开声明

2. 对dom的操作的优化

3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。

4. innerHTML的效率要比appendChild的效率高，以为innerHTML会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用，由于内部方法是编译好的而非解释执行，所以执行快的多。

5. 使用事件委托减少绑定的事件数量。

6. 尽量少用到返回HTMLCollection语句。