2012-11-24 2 views
5

저는 자바 스크립트 기능을 별도의 .js 파일에 작성했습니다. 내 마지막 프로젝트에서는 javascript 파일 수가 더 많아서 요청 수가 더 많았 기 때문에 페이지 로딩 속도가 느려졌습니다. 그래서 실험적인 목적으로 .php 확장자를 가진 몇 개의 .js 파일을 변환하고 include 문과 함께 추가했습니다. 이렇게하면 로딩 시간 성능이 향상되었습니다. .php 파일에 자바 스크립트를 작성하면 많은 장점이 있습니다. PHP 변수에 액세스하여 쉽게 자바 스크립트에 전달할 수 있습니다.확장자가 .php 인 자바 스크립트 파일 만들기

여기 내 의심은 .php 파일에 자바 스크립트를 작성한 다음 그 파일을 포함하는 데있어 단점이 있습니까?

내가 이해하는 것은 페이지가로드 될 때 자바 스크립트 파일을 호출하고 PHP 부분을 병렬로 실행한다는 것입니다. 그래서 우리는 onload 함수를 작성합니다.

답변

3

대부분의 브라우저는 2 개 이상의 동시 연결을 사용하여 리소스를로드 할 수 있습니다. 그래서 별도의 파일에 자바 스크립트를 유지 브라우저가 완전히 모든 연결을 활용할 수 있습니다. 가능한 한 HTML의 <script> 태그를 포함 시켜서 JS가로드되기 전에 페이지의 내용이 작성되도록해야합니다.

PHP를 사용하는 한 가지 이점은 JS 파일의 크기를 줄이기 위해 gzip을 사용하는 것입니다.

자바 스크립트 파일의 크기가 작은 경우 (예 : < 100KB), 하나의 PHP 스크립트에 여러 개의 파일을 포함하는 것이 더 빠를 수도 있습니다. 그러나 자바 스크립트 파일이 500KB와 같이 더 큰 경우 별도로 유지하는 것이 더 빠를 수 있습니다.

실험 및 조정을 통해 답을 찾을 수 있습니다. 보편적 진리는 여기에 없습니다. 당신이 PHP와 서버 측에서 하나에 여러 개의 자바 스크립트 파일을 컴파일하려는 경우

+0

핵심 빠르게로드 여기 실험하는 것입니다.파일을 하나의 파일로 제공하는 것과 비교하여 파일을 병렬로 다운로드하는 것의 이점은 파일 크기에 따라 다릅니다. – Brad

+0

귀하의 주장에 동의하십시오. 이에 대한 구체적인 해결책은 없습니다. gzip은 좋은 접근 방식입니다. 나는 동시 접속을 제공하는 브라우저에 대해 몰랐다. 감사. +1 –

7

, 당신은 같은 것을 할 수 있습니다

<?php 
// script.js 
header('Content-Type: text/javascript'); // Tell browser to treat file as Javascript 

$files = array(
    'script-1.js', 
    'script-2.js', 
    'script-3.js' 
); 

foreach($files as $file){ 
    // Import each file 
    echo file_get_contents($file).PHP_EOL; 
} 

그런 다음 페이지에, 그냥 것처럼 그 파일을 참조 자바 스크립트 파일을했다 : PHP에서로드 JS 파일의

... 
<script src="script.php"></script> 
... 
+0

감사합니다. @Adam. 파일을 결합하고 사용하는 좋은 방법입니다. +1 –

1

문제가 있기 때문에 페이지가 브라우저에 천천히 렌더링 그 응답의 크기를 증가하고있다. 다른면에서 브라우저가 js 파일을로드하는 경우 브라우저는 js 파일에 대한 다른 요청을 보내므로 초기 페이지로드가 느려지 길 원하지 않으면 js를 PHP에 넣지 마십시오.

당신이 당신의 js 파일의 로딩 속도를하려면

할 CDN 지원이 다음 사항

  1. 스크립트의 축소 모두 다른 서버에이 축소 된 파일을 넣어 javascriptCompressor 또는 jsmini
  2. 같은 도구를 사용하여 파일을 JS , 무료 CDN에서 무료로 파일을 호스팅 할 수 있습니다. CDN에서 로딩은 항상 더 빠르며 브라우저는 한 번에 여러 파일을 다운로드 할 수 있습니다.

  3. jquery 또는 google cdn url의 다른 라이브러리와 같은 파일로드 또는 당신이이 기술을 따르는 경우에 매우

요청이에로드되지 않도록, 오랜 시간 동안 당신의 js 파일을 유지하기 위해 브라우저를셔서 각각의 사이트 사용 만료 헤더 페이지가

관련 문제