모든 페이지에 주요 자바 스크립트를로드 하시겠습니까? 아니면 관련 페이지로 분류합니까? 환상은 때로는

나는이 700kb모든 페이지에로드 압축 JS 파일을. 12각 페이지에 자바 스크립트 파일이 있지만 http 요청을 줄이기 전에 파일을 모두 압축했습니다 1 file.

이 파일은 ~130kb gzipped이상 제공됩니다 gzip. 그러나 로컬 컴퓨터에서는 여전히 압축을 풀고 모든 페이지에로드합니다. 이것이 성능 문제입니까?

방화범 프로파일 러로 자바 스크립트를 프로파일 링했지만 문제가 발생하지 않았습니다. 내가 직면하고있는 문제 / 환상은 때로는 현재 페이지에서 사용되지 않는 jquery 라이브러리가 해당 파일에 압축되어 있다는 것입니다.

예를 들어 jquery datatables는 200kb 압축되어 있으며 내 웹 사이트 페이지 중 2 개에만로드됩니다. 또 다른 것은 jqplot또 다른 것 200kb입니다.

이제 페이지 400kb에서 실행되지 않는 초과 코드가 80%있습니다.

모든 것을 하나의 파일로 남겨 두어야합니까?

jquery 라이브러리를 꺼내고 현재 페이지에서 관련 JS 만로드해야합니까?

답변

requirejs 를 사용 하여 해당 페이지에만 필요한 라이브러리를 동적으로로드 할 수 있습니다 . 그런 다음 모든 페이지에 requirejs (약 14k) 만로드하면 약 385kb가 절약됩니다.

통합도 매우 쉽습니다. 필요한 코드를 “포장”하면 다음과 같습니다.

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

답변

프레임 워크 / CMS / 적절한 기능이있는 것이 있으면 @Michael이 제안한대로 추가 라이브러리없이 스크립팅을 조건부로 포함 할 수 있습니다.

예를 들어, WordPress는 다음과 같은 방법으로 상황을 처리 할 수 ​​있습니다.

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJS에는 아무런 문제가 없습니다. 추가 된 수준의 복잡성 (처음으로 그것을 사용하는 법을 배우는 것)이보다 쉽게 ​​사용할 수있는 도구가 할 수있는 일을 상쇄하는지 여부를 평가하면됩니다. 위에서 언급 한 두 가지 사례 만있는 경우이 방법이 더 좋습니다. 더 많은 일이 진행되고 있다면 RequireJS가 전체적으로 더 나은 접근법 일 수 있습니다.

답변

700kb의 JavaScript는 페이지로드 후 구문 분석해야하므로 성능 문제입니다. 이 때문에 필요한 스크립트 만로드되도록주의해야합니다. 탐색이 단일 페이지를 떠나지 않고 내부적으로 처리 될 때 GMail과 같은 전체 AJAX 사이트에서 하나의 큰 JavaScript가 정상일 수 있습니다. 그러나 전체 AJAX 사이트에서도 동적 JS로드를 수행하여 시작시 불필요한 JS를로드하지 못하도록합니다 (메모리 및 속도 문제).

당신은 당신이 http 트래픽을 줄이고 싶다고 말했다. HTTP 캐싱으로 플레이해야합니다 . 문제는 만료 시간을 너무 높게 설정하면 캐시가 만료 될 때까지 JS 변경 사항이 표시되지 않을 수 있다는 것입니다.

트릭은 참조하지 않습니다, 그러나,있다 myscript.js,하지만 myscript.js?version={myversion}. 응용 프로그램 업데이트 후를 변경하면 {myversion}JavaScript를 강제로 다시로드합니다.

답변

~ 700kb의 JavaScript는 성능 문제이며 압축 된 경우 코드를 최적화하는 동안 준수해야 할 규칙은 다음과 같습니다.

  1. 자바 스크립트 축소-코드를 줄이지 않은 압축 및 압축 해제 만하면됩니다. 우선 좋은 Minify JS 도구를 사용하고 코드를 축소하십시오. 당신은 12 개의 파일을 가지고 있으며, 최고의 성능을 위해 클럽 활동을하기 전에 각 파일이 분리 될 것입니다.

  2. 비동기 로딩을 사용하면 매우 빠른로드 시간과 페이지 렌더링으로 비동기 자바 스크립트 로딩을 사용할 수 있습니다. 우수한 비동기 로딩은 렌더링 프로세스를 차단하지 않으며 느낌이 많은 페이지 로딩 시간이 크게 줄어들 기 때문에 사용자 영향이 매우 강합니다. 자바 스크립트가로드되지 않은 이미지 및 기타 표시된 항목은 정기적으로 표시됩니다.

  3. JQUERY에 GOOGLE cdn을 사용하십시오 . JQUERY를 사용하고 자신의 웹 사이트에서로드하여 단점을 추가한다고 생각합니다. GOOGLE CDN ​​(무료)을 사용하여 JQUERY를로드하십시오. 거의 모든 세 번째 웹 사이트에서 사용되고 있으므로 캐시의 클라이언트 컴퓨터에서 이미 사용할 수 있습니다.

  4. Custom long Expires Headers : 로딩 시간 문제로 웹 사이트가로드되는 방법에 대해 매번 다운로드 할 수 없도록 HTTP JS 파일에 Long Expires를 제공해야하므로 두 번째 요청이 줄어 듭니다. 내 연구에 따르면, 두 번째 페이지에 걸리는 로딩 시간은 첫 페이지 방문에 비해 더 많은 이탈이 있습니다.

  5. 페이지 속도로 확인 : 때로는 다른 리소스가 페이지의 로딩 속도에 친절하게 영향을 미치고 다른 리소스도 최적화하려고 시도합니다. 모든 리소스에 약간의 단계를 밟으면 JS 로딩에 시간이 더 걸립니다.

답변