답변:
JS 코드를 테스트하고 개발하기 쉽기 때문에 별도의 파일에 JS 코드를 넣어야합니다. 코드를 제공하는 방법에 대한 질문은 다른 문제입니다.
HTML과 JS를 별도로 제공하면 클라이언트가 JS를 캐시 할 수 있다는 이점이 있습니다. 이를 위해서는 클라이언트가 매번 새로운 요청을하지 않도록 적절한 헤더를 보내야합니다. 업데이트를 수행하여 클라이언트 캐시를 무효화하려는 경우 캐싱에 문제가 있습니다. 한 가지 방법은 파일 이름에 버전 번호를 포함시키는 것입니다 (예 :) /static/mylibrary-1.12.2.js.
JS가 별도의 파일에있는 경우 해당 파일에 대한 액세스를 제한 할 수 없습니다. HTML 파일에서 JS 파일을 참조했거나 누군가 다운로드하려고했기 때문에 JS 파일에 대한 요청이 이루어 졌는지 알기가 어렵습니다 (기술적으로는 불가능합니다). 직접. 그러나 쿠키를 사용하고 특정 쿠키를 전송하지 않는 (그러나 어리석은) 클라이언트의 서비스를 거부 할 수 있습니다.
HTML 내에서 JS를 제공하면 각 페이지의 크기가 커지지 만 클라이언트가 여러 페이지를 볼 가능성이없는 경우에도 괜찮습니다. 클라이언트는 JS에 대해 별도의 요청을 발행하지 않기 때문에이 전략은 페이지를 더 빨리로드합니다. 적어도 처음에는 캐싱이 더 나은 손익 분기점이 있습니다. PHP를 통해 JS를 포함시킬 수 있습니다.
여기서 클라이언트는 JS 파일에 대한 별도의 액세스가 필요하지 않으며 원하는 경우 숨길 수 있습니다. 그러나 누구나 HTML 내부에서 JS 코드를 볼 수 있습니다.
로드 시간을 최소화하는 다른 전략은 다음과 같습니다.
제공하는 JS 파일의 크기를 줄이는 JS 축소 . 축소는 코드를 배포 할 때 한 번만 발생하므로 바이트를 저장하는 매우 효율적인 방법입니다. OTOH 이것은 관심있는 방문자가 코드를 이해하기 어렵게 만듭니다.
축소와 관련하여 모든 JS 파일을 단일 파일로 결합하는 방법이 있습니다. 필요한 요청 수가 줄어 듭니다.
압축-클라이언트와 서버 모두에서 각 요청에 대한 계산 오버 헤드를 추가합니다. 그러나 (압축 해제) 소요 시간은 일반적으로 압축되지 않은 데이터를 전송하는 시간보다 짧습니다. 압축은 일반적으로 서버 소프트웨어에서 투명하게 처리됩니다.
이러한 기술은 이미지와 같은 다른 리소스에도 적용됩니다.
한 페이지 웹 사이트를 디자인하고 있습니다
말 그대로 하나의 페이지 만 있으면 예 (성능 관점에서) 하나의 파일 (스타일 시트, JavaScript 및 이미지 (데이터 URI로 인라인 된 작은 이미지 ))의 모든 것을 제공하는 것이 좋습니다. 이는 상대적으로 느린 외부 리소스를 검색하는 데 필요한 추가 HTTP 요청을 제거합니다.
결과 파일은 제공하기 전에 압축해야 전체 텍스트 응답의 크기가 크게 줄어 듭니다.
데이터 URI 및 브라우저 호환성의 크기에는 제한이 있으므로 페이지 외부에 큰 이미지를 사용하는 것을 고려해야합니다. (예 : IE8은 32KB로 제한되며 base64 인코딩의 특성으로 인해 실제 파일 크기는 약 23KB입니다.)
코드에 대한 사용자 요청을 거부하는 권한을 변경할 수 있지만 html 페이지는 여전히 코드를 호출 할 수 있습니까?
아닙니다. 기꺼이 관찰자로부터 코드를 "숨기기"위해 코드를 난독 처리 할 수 있지만 실제적인 보호 기능은 없습니다.
클라이언트 쪽 JS 코드는 브라우저에서 볼 수 있어야합니다 (즉, 페이지에서 JS를 직접 사용해야하는 경우). 즉 브라우저에서 다운로드해야합니다.
브라우저가 JS를 다운로드 할 수없는 경우 페이지에서 JS를 사용하도록 할 수 없습니다.
그런 점에서 JS를 인라인하거나 파일에 넣으면 차이가 발생하지 않지만 일반적인 방법은 JS 파일을 사용하는 것입니다 (문제에 대한 분리).
브라우저에 노출시키지 않으려는 코드가있는 경우 서버 측 코드 (예 : node.js, php, perl, asp.net, jsp-너무 많은 옵션이 있음)를 사용하고 상호 작용해야합니다 브라우저에서 – 초기 페이지로드 또는 AJAX 사용 .
코드의 양과 프로그래머 / 소프트웨어 엔지니어가 아닌 코더가 얼마나 심각한 지에 따라 다릅니다. 나는 짧은 코드 조각을 HTML에 직접 넣은 많은 디자이너들과 함께 일했고, 내가 울부 짖는 동안 실제로 작동했다.
그것은 내가 할 일이 아니지만 소프트웨어 개발의 모범 사례를 알고 싶다면 모든 것을 외부 *.js파일에 넣고 <script>태그 를 통해로드하는 것이 좋습니다.
두 번째 요점과 관련하여 사용자 또는 브라우저가 코드를 보는 것을 거부 할 수는 없습니다. obfuscation코드를 읽기가 어렵지만 성능이 저하됩니다.
내 JS 코드에 대한 외부 파일을 작성하거나 html 코드에 넣는 것이 더 낫습니까?
JS 코드 용 외부 파일을 작성하는 것이 좋습니다. 또한 클라이언트에 제공하는 하나 또는 두 개의 파일을 갖는 것이 좋습니다. 하지만, 그건 또한 유지 보수 문제에 대해 배수 파일에서 당신의 JS 코드 분할을하는 것이 좋습니다. 이를 위해 다음과 같은 전처리기를 사용할 수 있습니다 위해 다른 JS 파일을 하나의 파일로 결합하는 Gulp .
클라이언트가 처리 할 HTTP 요청이 적으므로 파일을 적게 제공하는 것이 좋습니다.
페이지에 빠르게로드 하는가?
예, HTML에 대해 하나의 요청 만 수행하기 때문에 더 빠르며 JS 코드를 외부로 사용하여 많은 요청 (최소 2 회)을 수행 할 수 있습니다. 이것은 JS 코드가 양쪽에서 축소되지 않은 경우에만 해당되며 코드가 모두 단일 HTML 페이지에있는 경우 코드를 유지 관리하는 것이 얼마나 어려운지를 고려하지 않습니다.
코드에 대한 사용자 요청을 거부하는 권한을 변경할 수 있지만 html 페이지는 여전히 코드를 호출 할 수 있습니까?
아뇨. CSS 코드 및 HTML 코드와 같은 JS 코드는 정적 컨텐츠입니다. 즉, 브라우저에 들어가면 클라이언트가 해당 컨텐츠와 컨텐츠를 완전히 다운로드 할 수 있습니다. 모든 단일 파일, 이미지, 스크립트가 열려 열려 다운로드됩니다. 하지만 , 할 수 있습니다 작게하다 / 추하게 코드가 있도록 그것을 사용되는 인간에 대한 더 어렵다. 이는 성능을 위해 먼저 만들어진 혐오의 결과 일뿐 입니다.
html 및 javascript 컨텐츠를 별도의 파일로 분리하면 많은 이점이 있습니다.