성능에 심각한 영향을 미치는 일반적인 Javascript 실수? [닫은]

최근에 참석 한 UI / UX MeetUp에서 상호 작용 및 UI에 Javascript (jQuery)를 사용하는 웹 사이트에 대한 피드백을 제공했습니다. 이는 매우 간단한 애니메이션 및 조작이지만 괜찮은 컴퓨터의 성능은 끔찍했습니다.

실제로 특정 문제가 성능을 절대적으로 파괴하는 동일한 문제로 본 많은 사이트 / 프로그램을 생각 나게했습니다. Javascript가 Flash 대체품으로 거의 사용되는 상황이 대부분입니다. 이것은 훨씬 더 많은 자바 스크립트와 기능을 가지고 있지만 매우 매끄럽게 실행되는 일부 웹 응용 프로그램과는 완전히 대조적입니다 (IBM의 COGNOS는 제가 생각할 수있는 것입니다).

JS를 개발할 때 고려되지 않은 일반적인 문제 중 일부를 알고 싶습니다. 사이트 성능을 저하시킵니다.

일반적인 성능 킬러는 루프 .length내에서 HTMLCollection을 호출 for합니다.

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

안티 패턴은 루프를 통과 할 때마다 컬렉션의 크기가 계산되도록합니다. 더 나은 방법은 루프 외부의 길이를 계산하는 것입니다.

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

아니요, 플래시 교체로 사용 된 JS에서 문제가 발생하지 않습니다. 당신이 그것을 확신하지 못하면, 액션 스크립트에 대해 당신 자신을 문서화하십시오 : 그것은 JS에 매우 가깝습니다.

퍼포먼스 킬러로서 몇 가지 나쁜 습관을 찾을 수 있습니다.

• 스크롤, 마우스 이동 또는 이와 유사한 것들과 같은 연속 이벤트에 이벤트 핸들러를 연결하십시오. 이벤트가 충분히 트리거되지 않으면 응용 프로그램이 반응하지 않습니다. 너무 많이 트리거되면 아무것도 CPU 부하가 커집니다.
• 동기식 AJAX 호출 자바 스크립트는 멀티 스레딩되지 않으므로 JS의 일부가 무언가를 기다리는 경우 애플리케이션이 정지됩니다. 비동기 AJAX 호출을 사용하는 것이 좋으며 setTimeout / setInterval을 사용하여 긴 계산 단계를 분할하고 응용 프로그램을 반응 적으로 유지하는 것과 같은 방법입니다.
• 다른 언어와 마찬가지로 알고리즘 복잡성이 높습니다.

상호 작용과 UI에 Javascript (jQuery)를 사용하는 웹 사이트에 대한 피드백을 제공했습니다. 상당히 간단한 애니메이션과 조작 이었지만 괜찮은 컴퓨터의 성능은 끔찍했습니다.

성능의 가장 큰 문제는 기본 DOM 모델과 CSS3 애니메이션 모델 (또는 캔버스 또는 svg)을 이해하지 않고 높은 수준의 추상화 (예 : jQuery)를 사용하는 것입니다.

당신이하지 않으면 알 추상적 개념없이 그것을 수행하는 방법 당신은 절대이 제로의 기술이 빠르게 또는 느리게 무엇인지에 대한 지식을.

JavaScript를 배우고 DOM을 배우십시오. 이 두 가지를 알고 추상화가 무엇을하는지 알면 효율적으로 사용할 수 있습니다. 물론 추상화를 깨닫는 대부분의 시간은 라이브러리없이 느리게하고 수동으로 수행하는 것입니다.

Javascript의 장점과 단점은 매우 유연하다는 것입니다. 즉, 실제로는 많은 경우에해서는 안되는 일을 할 수 있습니다.

내가 참여한 코드 검토에서 주요 관심사는 CSS 렌더링과 관련이있는 경향이 있습니다. 새로운 JS 개발자에게는 전역 범위에서 너무 많은 변수가 사용되는 경향이 있습니다.

또한 제대로 닫히지 않으면 메모리 누수가 발생할 수 있습니다. 그러나 대부분의 최신 Javascript 프레임 워크는 코드가 프레임 워크를 따르는 한 이러한 종류의 문제를 방지합니다.

더 나은 jquery 코드 작성에 대해 1 년 전에 찾은 빠른 링크는 다음과 같습니다. http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

성능을 저하시키는 동료 코드에서 내가 찾은 것 중 하나는 캐시 할 필요가없는 데이터를 캐싱하는 것입니다.

예:

var table = $("#data").dataTable(.....);

DataTables 는 멋진 그리드를 만드는 데 사용하는 jQuery 플러그인입니다. 어쨌든, 테이블에는 거의 5k 개의 행이있어 DataTables 플러그인을 적용한 다음 테이블 변수에 저장하면 실제로 FireFox와 IE는 스크립트가 너무 오래 걸렸다 고 경고했습니다. 이야기의 도덕은 필요한 경우에만 데이터를 캐시합니다.

내가 들었던 것에서 for루프는 jQuery보다 계산 속도가 빠릅니다 $.each().