JS로 성능 향상

Question

개발시 javascript를 사용하는 동안 폴더에서 모든 이미지를 검색하고 모든 고유 한 방식으로 표시하거나 Ajax 호출을 통해 서버에서 데이터를 검색하고 모든 스타일 및 (즉, 수백 줄이나 심지어 수천에 이르는 js 코드를 강타하는 것을 포함하는) 논리에 적용되는 경우, JS 개발자가 코드를 성능 측면에서보다 효율적으로 만드는 데 집중하는 모든 영역은 무엇입니까?

예를 들어 우리는 많은 온라인 갤러리를 방문합니다. 그의 서버에서 웹 사이트로 50 개의 이미지를로드해야한다면 js 개발자의 관심사가 될 첫 번째 것이 무엇일까요? JS 코드의 인스턴스가 데이터 양을 상당히 처리해야하는 경우를 위해이 작업을 수행 중입니다.

내가 찾고있는 것은 현재 JS 개발에 관여하고 있으며 중간 (또는 큰) js 응용 프로그램을 작성할 때 성능 향상을 위해 무엇을 집중해야합니까?

1. 메모리 사용 측면에서?
2. 루프를 효율적으로 만드는 측면에서?
3. Jquery 또는 Dojo와 같은 타사 프레임 워크를 사용하는 것과 관련하여? 사용 된 디자인과 너 한테의 측면에서
4. 큰 도움이 될 것입니다보다 효율적인 JS 코드를 작성에서

어떤 제안 (I 오픈이 옵션은 항상 것 같다).

Answer 1

성능 튜닝은 매우 특정 용도에만 적용됩니다. 도널드 크 누스 says로서

이 가 우리는 작은 효율성에 대해 잊지한다

은, 시간의 약 97 %를 말 : 조기 최적화는 일반적으로 모든 악의

의 루트, 최고의 아이디어는 응용 프로그램을 작성하는 것입니다 당신이가는 동안 당신이 최적화 할 필요가있는 것을 알아 내십시오. 응용 프로그램을로드하는 데 너무 오래 걸립니까? minifier를 사용하고 무거운 리소스 (예 : 이미지)의로드를 지연하십시오. CPU 사용량이 너무 많습니까? 어쩌면 당신은 배치 대신에 DOM을 너무 자주 업데이트 할 것입니다. 작동하는 샘플을 얻을 때까지 알지 못한다.

타사 라이브러리는 프로토 타입을 가져 와서 빠르게 작업하기위한 훌륭한 도구입니다. 단점은 일반적으로 1) 그들의 페이로드가 크고로드 시간이 길어 지지만 (CDN/캐싱을 사용하여 완화 될 수 있지만), 2) 너무 많이 숨겨지기 때문에 CPU 집중적 인 작업을 훨씬 쉽게 수행 할 수 있습니다 무슨 일이 일어나고 있는지. 어쨌든 CPU 문제가있는 경우에만 문제가 될 수 있습니다 (항상 프로파일 링하지 않고 사전에 알기가 어렵습니다).

DOM을 수정할 때마다 브라우저가 리플 로우되어 변경 사항과 함께 페이지를 렌더링하는 방법을 파악해야합니다.따라서 CSS 클래스를 사용하여 스타일을 수정/변경하는 것이 좋습니다. 한 번에 변경할 수 있기 때문에 스태킹 스타일 변경은 변경하려는 모든 속성에 대한 리플 로우를 의미합니다.

많은 JS 성능 팁이 떠 다니고 있습니다. 이 모든 것들은 사용자 경험뿐만 아니라 프로파일 러 (예 : Chrome 개발 도구에서 제공되는 도구)를 기반으로 실제 작업 예제에서 보여주고있는 것입니다.

Answer 2

성능 병목 현상이 어디에서 발생하는지 측정 한 다음 수행 할 수있는 작업을 확인하려면 profiler을 사용하십시오.

에도 좋은 프로그래머는 잘못되고 결국 성능 인수를 구성하는 매우 좋은, 그래서 최고의 프로그래머는 추측 프로파일 및 테스트 케이스를 선호합니다. - Martin Fowler

Answer 3

교수님은 "좋은 알고리즘, 마이크로 최적화가 필요하지 않습니다"라고 말합니다.

question이있었습니다. JavaScript의 문제점은 웹 페이지에만 혼자 존재하지 않는다는 것입니다. HTML (DOM)과 CSS가 있습니다.

1. 사용 된 메모리 정보 - 이것은 근본적인 질문입니다. 더 많은 속도를 원하면 더 많은 메모리가 필요합니다. 이는 ^wikipedia과의 절충안입니다. 어떤 종류의 균형을 정의해야합니다. 개인적인 견해 (예 : here)에서는 복제가없는 변수 (객체)가 적어지고 코드가 깨끗 해지고 HTML이보다 깨끗해질 것입니다. DOM 콜렉션의 참조를 보유하는 변수를 제한하십시오.

2. 루프 정보 - 루프 자체는 문제가 아닙니다. 루프 내부에 문제가 있습니다. 반복해서 무언가를 확인하지 마십시오. 메모 사용 ^wikipedia. DOM 컬렉션에 대한 반복에주의하십시오. 시간이 지남에 동적으로 많은 요소가 추가되면 느려질 수 있습니다. 변수를 사용하여 현재 상태를 캐시하거나 위치를 지정합니다 (여기서는 오!).

3. jQuery와 같은 타사 라이브러리는 모든 브라우저에서 동일한 작업을 수행 할 수있는 통일 된 방법을 제시하므로 실제로 도움이됩니다. 그러나 jQueryUI와 마찬가지로 일부 모듈을 사용합니다. 많은 경우 나는 sizzle이라는 또 다른 lib 안에있는 셀렉터 만 jQuery에 포함시켜야한다. 그러나 그럼에도 불구하고 나는 그들의 지배력에 반대하는 입장을 가지고있다. HTML5가 퍼져 나간다면 기본 기능이 제공됩니다.

4. 알고리즘 정보 - 디자인 패턴을 사용하십시오. 그것들은 수년 동안 진화 된 기술이며, 검증되고 입증되었습니다. 코드

   • YUI compressor의
     • 축약 : 클로저를 사용하는 것처럼, 이름 자체는 같은 다른 유용한 트릭이있는 등 글로벌 변수를 방지 기능, ...

     물론

을 실행 Google Closure compiler, 대역폭을 절약합니다.

좋은 알고리즘의 obfuscaters 및 packers도 있습니다. 이 도움이 될 수 있지만 때로는 오류가 발생할 수 있습니다.;

일부 페이지에 var doc = document;과 같은 것을 보았을 수도 있습니다. 단축 번호는 document입니다.

CDN을 사용하여 - Google 또는 ASP 호스트 중 하나;

이미지 최적화 - JPG can be optimized은 크기가 작습니다 (갤러리 정보).

다른 호스트에서 JavaScript 및 CSS와 같은 정적 컨텐트를 내보내 쿠키 데이터를 반복해서 보내지 않도록합니다. (여기에 또 다른 부작용은 단지 HTTP 서버가 필요한 설치 될 서버 측 언어를 필요가 없다는 것입니다) 잘 알고 사용하면 수 또는하지 않을 수 있습니다 도구로서

:

• JsLint - JavaScript 코드 오류를 검사합니다.
• JsonLint - json 데이터의 오류를 검사합니다.
• JsPerf - 스크립트의 성능을 테스트하고 비교하기위한 것입니다. 다른 사용자가 고안 한 테스트 목록도 포함되어 있습니다.
• regexpal - 정규식 도우미;
• "붙여 넣기 & 공유"사이트 jsfiddle, pastebin 등이 많이 있습니다.