JS 코드 최적화 기술의 인기 버전(js 크기 감소)_javascript 기술

WBOY
풀어 주다: 2016-05-16 17:57:51
원래의
1079명이 탐색했습니다.

이 글을 주의 깊게 읽으면 대부분의 JS 최적화 방법을 이 세 가지 방법과 분리할 수 없습니다.

JS代码优化技巧之通俗版

(웹페이지 전체 크기는 155.k이고, JS는 100.3K를 차지합니다.)

JS를 최적화할 때입니다

JS 최적화에 관한 기사는 이미 많이 있는데, 그 중 대부분은 변수, 문자열, 유형 등 매우 기술적이므로 소개할 필요도 없습니다. .알면 소용없습니다. 대부분의 웹마스터는 "그것을 사용하고 있습니다". 나는 JS에게 그것을 거기에 넣고 삭제하는 방법을 알려주기만 하면 됩니다.

오늘날의 웹사이트에는 통계 코드, 공유 도구, 댓글 목록, 관련 기사 플러그인 및 기타 도구가 갖추어져 있습니다. 강력한 기능을 얻으려면 JS 파일을 사용해야 합니다. 웹사이트. 는 웹사이트 속도에도 영향을 미칩니다.

가장 일반적으로 사용되는 JS 최적화 방법

블로그의 JS 호출로 판단하면 현재 속도에 가장 큰 영향을 미치는 것은 Wumi 플러그인(952ms)과 Nafoneng Ads(434ms)입니다. 정말 사용하고 싶다면 공식 교과서에 따라 적절하게 최적화하여 보관하면 됩니다. 아래에서는 Lu Songsong이 가장 일반적으로 사용되는 JS 최적화 방법 중 일부를 소개합니다.

방법 1: 중요하지 않은 JS는 페이지 하단에 넣기

이것은 가장 간단하고 효과적인 최적화 방법입니다. 페이지 하단에 본문 위의 모든 중요하지 않은 JS를 배치하여 비동기 로딩을 구현합니다. 즉, 웹페이지가 로드될 때까지 기다린 후 마지막으로 중요하지 않은 JS 파일을 로드합니다. .JS이므로 웹 페이지 속도에 영향을 미치지 않습니다.

예를 들어, 은근하고 멋진 템플릿에 있는 util.js 공개 파일의 기본 효과는 웹페이지를 탐색할 때 "맨 위로 돌아가 댓글 쓰기"라는 특수 효과가 웹페이지에 나타나는 것입니다. . 이제 wumii(Wumi 플러그인 JS) 및 jiathis(공유 도구 JS)가 util.js 파일에 통합되었습니다.

JS代码优化技巧之通俗版

(중요하지 않은 JS는 페이지 하단에 배치했습니다)

물론 다른 웹사이트에서도 이 작업을 수행해야 합니다. 중요하지 않은 JS는 모두 페이지 하단에 배치하세요.

방법 2: JS 파일 병합

JS 병합은 프로세스 속도를 높이기 위해 HTTP 요청을 줄이고 서버에 대한 요청을 줄이는 것을 의미합니다. 원래 독립된 두 JS를 병합하려면 약간의 기술이 필요하지만 가장 간단한 방법을 알려드리겠습니다. :

어쨌든 먼저 A 파일을 B 파일에 직접 붙여넣으세요. 병합 후 웹 페이지에서 A 파일을 삭제하세요. 웹 페이지가 정상적으로 실행되면 일부 특수 효과가 실패해도 괜찮습니다. C 파일을 교체하십시오. 충돌하지 않는 JS 파일은 항상 두 개 있습니다.

예를 들어 내 블로그의 Baidu Ad Manager에는 기본적으로 6개의 HTTP 요청이 필요합니다. 타사 JS이므로 요청에 가장 빠른 시간은 234ms가 걸리고 6개의 요청에는 2가 걸립니다. 즉, 이 광고 관리자로 인해 웹페이지를 여는 데 2초가 추가로 소요됩니다.

JS代码优化技巧之通俗版

(JS의 두 번째 부분은 6개의 요청을 1로 바꿉니다)

공식 튜토리얼에 따라 JS를 병합한 후 6개의 광고 슬롯에 대한 광고 요청이 하나의 요청으로 병합되어 JS 요청 수가 크게 줄어들고 페이지 렌더링 차단이 효과적으로 줄어들며 광고 로딩 속도가 향상됩니다.

방법 3: JS 파일의 무게 감량

삼항 연산자, 개체 검색 감소 또는 JS를 간결하게 만드는 방법에 대해서는 "JS 체중 감량 도구"를 사용하지 않습니다. 일반적으로 이러한 도구는 JS 파일의 수백 줄의 코드를 한 줄로 압축하여 크기를 더 작게 만듭니다. 권장 도구: http://javascriptcompressor.com/ 또는 소프트웨어 버전(좋은 내결함성 효과)

빈 줄과 같은 문제로 인해 이러한 도구를 사용하면 JS 기능이 무효화되는 경우가 있습니다. 가장 쉬운 방법은 Dreamweaver를 사용하여 압축된 JS를 DW에 넣으면 자동으로 오류가 있다는 메시지가 표시됩니다. 오류가 발생한 줄을 바꾸거나 복원하세요.

마지막으로 네티즌의 개인적인 경험을 말씀드리겠습니다.

JS代码优化技巧之通俗版

시간이 지남에 따라 사이트가 천천히 성장하면 많은 문제를 발견하게 되는데, 그 중 하나는 사이트가 점점 더 부풀어 오르게 되어 실행 속도도 느려진다는 것입니다. 사이트를 최적화하기 위해 최선을 다하는 최적화가 매우 중요해졌습니다.

이러한 방법은 이해하기 쉽고 모든 사람에게 유용하길 바랍니다!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿