"JQuery 언제 써요!?"
"지금이지...?"
안녕하십니까? 저는 오솔길입니다.
그래서 이번부터는 jQuery에 주력하고 있습니다.
하지만 갑자기 뛰지 마라!
우선 창고를 의심하는 곳부터 시작하고 싶어요.
요즘, 우선 사이트에 jQuery를 가입합시다
로컬 JS가 쓸 수 있는 처리를 jQuery로 전문적으로 쓰는 개발자를 볼 수 있다.
제가 처음 말하는 것을 허락해 주십시오!
JS 라이브러리를 사용하는 장점과 단점을 강하게 깨닫자!
라이브러리를 사용하기 전에 모국어 JS를 먼저 쓰세요!
목록은 여기 있습니다.

jQuery란 무엇입니까?

여느 때처럼 공식 홈페이지에서 빌려 쓰고 의역하다.

빠르고 가볍고 풍부한 JavaScript 라이브러리입니다.

다양한 브라우저 환경에서 간단한 API를 통해 이벤트 처리, 애니메이션, Ajax를 잘 실현할 수 있다.

는 100만 명이 넘는 자바스크립트가 묘사한 풍부하고 확장된 세계를 바꾸었다.

허허.고속이라는 표어는 신경 쓰이지만 다른 창고와 비교해보자.
나는 학습과 조사를 할 때 아래의 공식 링크를 사용할 수 있다고 생각한다.

jQuery 학습 센터

API 문서

플러그인 레지스트리

jQuery의 노래

버전 1 과 2 는 다르다

현재 최신 버전은 2과 2.1.1, 1과 1.11.1이다.
브라우저 지원 페이지에 지원 환경 정보가 기재되어 있습니다.

2 시스템은 구식 브라우저 IE6-8을 지원하지 않습니다.IE6-8을 지원하는 경우 1 계열을 사용합니다.

Node.js, 브라우저 확장, 기타 브라우저 이외의 환경에서 2 계열의 규격을 지원합니다.

그렇군요. BtoC 사이트 등에서 1과를 사용하겠죠.

기본 코드와 비교할 때의 장점/단점

아래의 장점/단점을 깨닫는 것이 매우 중요하다.

이점

기술량을 줄일 수 있음

교차 브라우저를 의식하지 않고 쓸 수 있음

확장 플러그인을 사용하여 적은 설명으로 풍부한 처리 가능

결점

고속을 구가하지만 로컬 JS에 비해 상당히 느리다

뒷면을 대충 이해하지 못하면 부작용이 무섭다

엔지니어의 증식

성능 검증

jQuery 사용이 얼마나 느려지는지 검증해 봤습니다.
공평하게 하기 위해 3회 정도 집행하여 평균치를 기술하였다.

jQuery 로드 성능

우선 적재 시간을 측정하는 것부터 시작한다.
로컬 파일의 jQuery를 호출합니다.
　
1.11.1
2.1.1
1.11.1(min)
2.1.1(min)
FireFox
30ms
25ms
20ms
23ms
Chrome
55ms
50ms
33ms
40ms
물론 로컬 JS를 사용할 경우 로드 시간은 0입니다.
읽기만 할 뿐, 실행은 아무것도 하지 않은 상태지만, 20번 읽으면 1초가 걸린다고 가정하면
시간이 많이 걸린 거 알아요.
미니 불꽃 상태 퍼포먼스가 좋을 것 같은데.

선택기 처리 성능

이번에는 jQuery와 본 코드의 처리를 비교합니다.
상당한 DOM 요소를 추출해 보십시오.브라우저는 Chrome을 사용합니다.
네이티브 측 실행 document.getElementById('hosomichi')jQuery 측면 실행$('#hosomichi').
　
만 번
십만 번
백만 번
1000만 회
로컬
3ms
13ms
70ms
580ms
jQuery
30ms
270ms
2800ms
27000ms
압도적인 차이가 있다는 것을 알았어!
"아니야, 아니야, 나는 이렇게 반복하지 않을 거야!"그런 의견도 있을 것 같아요.
나는 이 길에 각종 처리된 먼지가 가득 쌓일 것이라고 생각한다.
그나저나 예전에는 세부적으로 참여한 프로젝트에서 멤버들이 사이트의 느린 표시에 대해 골머리를 앓았다
단지 그에게 로컬 코드로 다시 쓰라고 말한 후에 매우 고마웠다.

총결산

그래서 이상하게 jQuery를 사용함으로써
jQuery를 사용할 때는 다음과 같은 요소에 대해 천평으로 최소한의 판단을 해야 한다.

사이트 성능

대량의 중복 처리가 가능합니까?

이미지 등만 해도 무거운 페이지 아닌가요?

개발자 기능

필요한 부분만 jQuery 코드를 사용할 수 있습니까?

디자이너가 설정한 jQuery를 조정할 수 있습니까?

플러그인 선택

성능이 좋습니까?

사용자 정의 가능합니까?(하고 싶은 일에 대해 "아쉽다"플러그인이 많음)

이번에는 여기까지 하겠습니다.
다음에는 원본 코드와 싸우는 준비편으로
Grunt 관리 jQuery 사용 이 TIPS의 물건.