성능 향상을위한 6 가지 jQuery 모범 사례

jQuery는 다음 중 하나입니다. 그만큼 오늘날 가장 인기있는 JavaScript 라이브러리. API는 매우 사용하기 쉽기 때문에 가파른 학습 곡선이 아닙니다. 많은 프로젝트에서 바닐라 JavaScript를 직접 사용하지 않고 동적 기능을 가져 오는 대신 jQuery 코드를 사용합니다..

그러나 jQuery의 단점도 있습니다.. 부주의하게 사용하면 성능 문제가 발생할 수 있습니다. 그 언어를 기반으로합니다. 이 글에서는 성능 문제를 피할 수있게 해주는 jQuery 사용에 대한 모범 사례를 소개합니다..

1. 필요한 경우 지연로드 스크립트

브라우저는 DOM 트리를 만들고 화면에 픽셀을 페인팅하기 전에 JavaScript를 실행합니다. 스크립트는 페이지에 새로운 요소를 추가하거나 일부 DOM 노드의 레이아웃이나 스타일을 변경할 수 있기 때문입니다. 그래서, 브라우저에 페이지로드 중에 실행할 스크립트를 줄입니다., 우리는 할 수있다. 소요 시간 단축 최종 DOM 트리 생성 및 페인팅을 수행 한 후 사용자는 페이지를 볼 수있다..

jQuery에서이 작업을 수행하는 한 가지 방법은 $ .getScript 페이지로드 중이 아닌 필요시 스크립트 파일을로드하는 방법.

$ .getScript ( "scripts / gallery.js", 콜백);

원하는 경우 단일 스크립트 파일을 가져 오는 아약스 함수이지만 가져온 파일은 캐시되지 않습니다. 캐싱을 활성화하려면 getScript 모든 ajax 요청에 대해 동일한 값을 설정해야합니다. 아래 코드를 사용하여 그렇게 할 수 있습니다.

$ .ajaxSetup (cache : true);

2. 피하십시오 `$ (window) .load ()` 스크립트가 페이지의 하위 리소스를 필요로하지 않는 경우

그만큼 $ (document) .ready () 같음 DOMContentLoaded (어디에 DOMContentLoaded 사용할 수 있음) 및 $ (window) .load () 에 하중. 첫 번째 것은 페이지 자체 DOM이로드 될 때 시작되지만 이미지 및 스타일 시트와 같은 외부 애셋은로드되지 않습니다. 두 번째 페이지는 자체 콘텐츠를 포함하여 모든 페이지가 구성되고 하위 리소스가로드되면 시작됩니다..

따라서 페이지의 하위 리소스에 의존하는 스크립트를 작성하는 경우 div 외부 스타일 시트로 스타일을 지정하는 것이 가장 좋습니다. $ (window) .load ().

하지만 그렇지 않은 경우에는 $ (document) .ready () 왜냐하면 jQuery는 준비된 사용하는 이벤트 핸들러 $ (document) .ready () 그렇지 않으면 할 수있을 때 사용하십시오..

3. 사용 `떼다` DOM에서 변경해야하는 요소를 제거하는 방법.

“리플 로우” 는 웹 페이지의 레이아웃 변경을 나타내는 용어로, 브라우저가 페이지 요소를 재 배열하여 요소를 변경하거나 요소의 구조적 변경 사항을 조정하거나, 요소가 남긴 간격을 채우거나, 페이지의 레이아웃 변경. 리플 로우는 비싼 브라우저 프로세스.

우리는 아니오를 줄일 수 있습니다. 변경 사항을 수행하여 요소의 구조적 변경으로 인한 리플 로우 후 페이지 플로우에서 빼내다. 과 끝나면 다시 돌려 놓는다.. 하나의 테이블에 여러 행을 추가하는 경우 리플 로우가 많이 발생합니다. 그래서 테이블을 DOM 트리 밖으로 가져 와서 행을 DOM에 다시 넣는다.; 이렇게하면 리플 로우가 줄어 듭니다..

jQuery 떼다() 페이지에서 요소를 제거 할 수있게 해줍니다., 그것은 풀다() 나중에 요소를 페이지에 추가해야하는 경우 요소와 관련된 데이터를 저장하기 때문입니다. 분리 된 요소는 수정되었을 때 다시 페이지로 되돌릴 수 있습니다..

4. 사용 `CSS ()` 높이 또는 너비를 설정하는 대신 `신장()` 과 `폭()`

jQuery에서 요소의 높이 또는 너비를 설정하는 경우에는 CSS () 함수를 사용하여 신장() 과 폭() 함수의 일부 레이아웃 속성에 액세스 할 때 추가 리플 로우가 발생합니다. computeStyleTests jQuery에서 (최신 버전에서 테스트 됨).

코드 p.height ( "300px"); 여기 리플 로우가 있습니다..

에 대한 p.css ( "height": "300px");

computeStyleTests 일부 지원 테스트를 수행하는 데 사용됩니다. 또한라고도합니다. 점점 높이 및 너비를 사용하여 양자 모두 CSS () 과 높이 너비() , 이 아니라면 환경 그것은 단지 요구된다. 높이 너비() 필요하지 않을 수도 있으므로 사용하십시오 CSS () 대신에.

5. 불필요하게 레이아웃 속성에 액세스하지 마십시오.

높이, 너비, 여백 등과 같은 레이아웃 속성에 액세스하면 페이지에서 리플 로우가 트리거됩니다. 브라우저에 레이아웃 속성을 요청할 때마다 그 이유는 업데이트 된 가치를 얻도록하십시오. (이전에 가치가 무효화 된 경우) 값 재 계산 및 레이아웃 변경 적용.

따라서 jQuery 또는 바닐라 자바 스크립트를 사용하는지 여부, 불필요하게 레이아웃 속성에 액세스하는 것에주의하십시오. 특히 루프 또는 결과적으로 스타일을 변경 한 후에.

6. 당신이 할 수있는 곳에 캐싱을 사용하십시오.

jQuery의 일부 기능은 캐싱 메커니즘이 잘 사용된다. Ajax 요청은 자원을 캐시하지만, 사용할 수 없다. 스크립트 과 jsonp, 따라서 모든 아약스 요청에 대해 캐싱을 원한다면 세계적으로 설정하다 아래처럼.

또한 다음을 사용하여 리소스를 가져 오는 경우 우편 위의 설정으로 캐싱을 사용하더라도 캐시되지 않습니다..

전에 언급 한 것처럼, 떼다() 제거 될 요소와 관련된 데이터를 캐시합니다 풀다();숨는 장소() 초기 CSS를 캐시합니다. 디스플레이 데이터를 잃지 않고 나중에 복원 할 수 있도록 숨기기 전에 요소의 값.

결론

요구 사항에 가장 효과적인 jQuery 코드를 사용하고 있는지 확신 할 수있는 한 가지 방법은 실제로 코드를 실행하고 성능 문제가 있는지 여부를 알 때까지 기다리는 것입니다. 그렇다면 성능 및 디버거 도구를 사용하여 문제의 근본을 찾아 내다..

jQuery는 브라우저 호환성 및 기능을위한 추가 기능이 포함 된 자바 스크립트의 고치와 비슷하기 때문에 이러한 도구가 없으면 문제를 진단하기가 어려울 수 있습니다.