태그 보관물: http

http

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

나는이 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 로딩에 시간이 더 걸립니다.

답변