인라인 대 외부 JavaScript는 언제 사용해야합니까?
https://stackoverflow.com/questions/138884
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
성능과 유지 보수의 용이성 측면에서 외부 스크립트를 포함 시키거나 HTML 코드와 함께 인라인을 작성 해야하는시기를 알고 싶습니다.
이것에 대한 일반적인 관행은 무엇입니까?
Real-World-Scenario- 클라이언트 측 양식 검증이 필요한 여러 HTML 페이지가 있습니다. 이를 위해이 모든 페이지에 포함 된 jQuery 플러그인을 사용합니다. 그러나 문제는 다음과 같습니다.
- 이 스크립트를 인라인으로 구성하는 코드 비트를 작성 하시겠습니까?
- 이 모든 HTML 페이지 중 하나를 공유하는 하나의 파일에 모든 비트를 포함시킬 수 있습니까?
- 각 HTML 페이지마다 하나씩 별도의 외부 파일에 각 비트를 포함시겠습니까?
감사.
해결책
이 답변이 원래 게시되었을 때 (2008), 규칙은 간단했습니다. 모든 스크립트는 외부이어야합니다. 유지 보수 및 성능 모두.
(왜 성능? 코드가 분리되면 브라우저로 더 쉽게 캐시 할 수 있기 때문입니다.)
JavaScript는 HTML 코드에 속하지 않으며 특수 문자가 포함 된 경우 (예 : <, >) 심지어 문제가 발생합니다.
요즘 웹 확장 성이 바뀌 었습니다. 여러 HTTP 요청을하는 대기 시간으로 인해 요청 수를 줄이는 것이 유효한 고려 사항이되었습니다. 이것은 대답을 더욱 복잡하게 만듭니다. 대부분의 경우 JavaScript 외부가있는 것은 아직 추천. 그러나 어떤 경우에는, 특히 매우 작은 코드 조각이 사이트의 HTML에 inlining하는 것이 의미가 있습니다.
다른 팁
유지 가능성은 분명히 외부를 유지 해야하는 이유이지만 구성이 1 라이너 (또는 일반적으로 HTTP 오버 헤드보다 짧은 경우 해당 파일을 외부로 만들 수 있음) 인 경우 성능을 유지하는 것이 더 좋습니다. 각 HTTP 요청은 실행 시간과 트래픽 측면에서 약간의 오버 헤드를 생성한다는 것을 항상 기억하십시오.
당연히이 모든 것은 코드가 몇 줄보다 길고 실제로 하나의 단일 페이지에 구체적이지 않은 순간 관련이 없습니다. 해당 코드를 재사용 할 수있는 순간, 외부로 만드십시오. 그렇지 않으면 그 크기를보고 결정하십시오.
외부화 JavaScript는 Yahoo Performance 규칙 중 하나입니다.http://developer.yahoo.com/performance/rules.html#external
스크립트를 항상 외부화해야한다는 단단하고 빠른 규칙은 일반적으로 좋은 내기가 될 것입니다. 어떤 경우에는 일부 스크립트와 스타일을 인화하고 싶을 수도 있습니다. 그러나 당신은 당신이 알고있는 것만 인라인으로 만 성능을 향상시켜야합니다 (이것을 측정했기 때문에).
성능에만 관심이 있다면,이 스레드의 대부분의 조언은 잘못된 것이 잘못되었으며 스파 시대에 점점 더 잘못되고 있습니다. 여기서 우리는 JS 코드없이 페이지가 쓸모 없다고 가정 할 수 있습니다. 스파 페이지로드 시간을 최적화하고 다른 브라우저로 이러한 결과를 확인하는 수많은 시간을 보냈습니다. 전반적으로 HTML을 재구성함으로써 성능 증가는 매우 극적 일 수 있습니다.
최고의 성능을 얻으려면 페이지를 2 단계 로켓으로 생각해야합니다. 이 두 단계는 대략적으로 일치합니다 <head> 그리고 <body> 단계적이지만 대신 생각하십시오 <static> 그리고 <dynamic>. 정적 부분은 기본적으로 가능한 한 빨리 응답 파이프를 밀어내는 문자열 상수입니다. 쿠키를 설정하는 많은 미들웨어를 사용하는 경우 (HTTP 컨텐츠를 보내기 전에 설정해야 함) 원칙적으로 일부 템플릿 코드 (Razor, PHP, PHP, PHP, 서버에서 등. 이것은 어려울 수 있지만, 나는 단지 사소한 일이기 때문에 잘못 설명하고 있습니다. 당신이 추측 한 바와 같이,이 정적 부분에는 모든 JavaScript가 내려되고 미니딩되어 있어야합니다. 그것은 같은 것처럼 보일 것입니다
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
이 부분을 와이어로 보내는 데 비용이 들지 않기 때문에 클라이언트가 서버에 연결 한 후 약 5ms + 대기 시간에이를 수신하기 시작할 것으로 예상 할 수 있습니다. 서버가 합리적으로 가깝다고 가정하면이 대기 시간은 20ms에서 60ms 사이 일 수 있습니다. 브라우저는이 섹션을 얻는 즉시이 섹션을 처리하기 시작하며 처리 시간은 일반적으로 계수 20 이상 전송 시간을 지배합니다. 이는 이제 서버 측 처리를위한 상각 된 창입니다. <dynamic> 부분.
인라인 jQuery + Signalr + NG Animate + NG Touch + NG Routes + Lodash를 처리하려면 브라우저 (크롬, 휴식 20% 느리게)의 경우 약 50ms가 소요됩니다. 그것은 그 자체로 꽤 놀랍습니다. 대부분의 웹 앱은 인기있는 라이브러리보다 코드가 적은 것보다 코드가 적지 만, 당신이 많은 것을 가지고 있다고 가정 해 봅시다. 그래서 우리는 클라이언트에서 대기 시간+100ms의 처리를 받게 될 것입니다 (이 대기 시간 승리는 두 번째 전송 청크에서 비롯됩니다). 두 번째 청크가 도착하자마자 모든 JS 코드와 템플릿을 처리했으며 DOM 변환 실행을 시작할 수 있습니다.
이 방법은 인라인 개념에 직교적이지만 그렇지 않다고 반대 할 수 있습니다. Inlining 대신 CDN 또는 자신의 서버에 링크하는 경우 브라우저는 다른 연결을 열고 실행을 지연시켜야합니다. 이 실행은 기본적으로 자유롭기 때문에 (서버 측이 데이터베이스와 대화하고 있기 때문에) 이러한 모든 점프는 전혀 점프를하지 않는 것보다 더 많은 비용이들 것입니다. 외부 JS가 더 빨리 실행되는 브라우저 퀴크가 있다면 어떤 요인이 지배하는지 측정 할 수 있습니다. 내 측정에 따르면 추가 요청 이이 단계에서 성능이 사멸된다는 것을 나타냅니다.
나는 스파 앱의 최적화로 많은 일을합니다. 사람들이 데이터 볼륨이 큰 문제라고 생각하는 것이 일반적이며, 사실 대기 시간과 실행은 종종 지배적입니다. 내가 나열한 미니딩 된 라이브러리는 최대 300kb의 데이터를 추가하며, 68kb Gzipped 또는 2mbit 3g/4g 전화로 200ms 다운로드에 불과합니다. 이는 동일한 데이터가 동일한 데이터를 확인하기 위해 동일한 전화기에서 사용되는 대기 시간입니다. 모바일 대기 시간 세금 (전화 대 타워 랜시시)이 여전히 적용되기 때문에 대리 캐시 된 경우에도 이미 캐시에서 캐시에서 이미 캐시에서 캐시에 있습니다. 한편, 첫 홉 지연 시간이 낮은 데스크탑 연결은 일반적으로 대역폭이 더 높습니다.
요컨대, 지금 (2014)는 모든 스크립트, 스타일 및 템플릿을 인화하는 것이 가장 좋습니다.
편집 (2016 년 5 월)
JS 애플리케이션이 계속 커지고 일부 페이로드가 이제 최대 3 메가 바이트의 최소화 된 코드를 쌓아 올리면서 최소한의 가장 일반적인 라이브러리가 더 이상 감소되어서는 안된다는 것이 분명 해지고 있습니다.
제 생각에는 한 페이지, 짧은 스크립트 케이스에 특화되어 있습니다 인라인 스크립트의 경우 (전용) 방어 가능한 사례입니다
실제로 인라인 JavaScript를 사용하기위한 매우 견고한 사례가 있습니다. JS가 충분히 작다면 (원-라이너), 나는 두 가지 요소로 인해 JavaScript 인라인을 선호하는 경향이 있습니다.
항상 외부 스크립트를 사용해야하는 또 다른 이유는 컨텐츠 보안 정책 (CSP). CSP 기본값은 모든 인라인 스크립트를 금지하여 사이트가 XSS 공격에 더 저항력을 갖도록합니다.
필요한 코드를 살펴보고 필요한만큼 별도의 파일로 나눕니다. 모든 JS 파일은 하나의 "논리적 세트"기능 등을 보유합니다. 예를 들어. 모든 로그인 관련 기능에 대한 하나의 파일.
그런 다음 각 HTML 페이지에서 사이트 개발 중에 필요한 페이지 만 포함합니다. 사이트와 함께 라이브로 이동하면 모든 JS 파일을 하나의 파일로 결합하여 최적화 할 수 있습니다.
인라인 Javascipt에 대해 제공 할 수있는 유일한 방어는 .NET MVC와 함께 강력하게 입력 된 뷰를 사용할 때 유용한 자바 스크립트 중간에 C# 변수를 참조 할 수 있다는 것입니다.
세 가지 고려 사항 :
- 얼마나 많은 코드가 필요합니까 (때로는 도서관은 일류 소비자입니다)?
- 특이성 :이 코드는이 특정 문서 또는 요소의 맥락에서만 기능합니까?
- 문서 내부의 모든 코드는 더 길고 느리게 만드는 경향이 있습니다. 그 SEO 고려 사항 외에도 내부 스크립팅을 최소화한다는 사실을 분명히 알 수 있습니다.
외부 스크립트는 Firebug를 사용하여 디버그하기가 더 쉽습니다. 나는 내 JavaScript를 테스트하고 모든 외부 도움을받는 것을 좋아합니다. 나는 PHP 코드에서 JavaScript와 HTML을보고 싶지 않습니다. 그것은 나에게 큰 혼란처럼 보입니다.
JavaScript를 외부로 유지하는 시점 :
ASP.NET 3.5SP1은 최근 복합 스크립트 리소스를 만들기 위해 기능을 도입했습니다 (많은 JS 파일을 하나로 병합). 이에 대한 또 다른 이점은 Webserver 압축이 켜지면서 약간 더 큰 파일을 다운로드하면 많은 작은 파일 (HTTP 오버 헤드, 왕복 등)이 더 나은 압축 비율이 더 좋을 것입니다. 이것이 초기 페이지로드를 절약 한 다음 위에서 언급 한 바와 같이 브라우저 캐싱이 차기를 저장한다고 생각합니다.
ASP.NET을 제외 하고이 스크린 캐스트는 다음과 같은 이점을 자세히 설명합니다.http://www.asp.net/learn/3.5-p1/video-296.aspx
외부 스크립트의 또 다른 숨겨진 이점은 구문 검사기를 통해 쉽게 실행할 수 있다는 것입니다. jslint. 이로 인해 많은 가슴 아프고 찾기 어려운 IE6 버그에서 벗어날 수 있습니다.
시나리오에서는 페이지간에 공유 된 한 파일로 외부 재료를 작성하는 것이 좋습니다. 나는 위에서 말한 모든 것에 동의합니다.
초기 프로토 타이핑 중에 빠른 반복의 이점을 위해 코드를 인라인으로 유지하지만 생산에 도달 할 때까지 모든 외부로 만들어야합니다.
나는 당신이 당신의 모든 JavaScript를 외부 적으로 배치 할 수 없다면, 당신은 당신의 손 아래에 나쁜 디자인을 가지고 있으며, 당신은 당신의 데이터와 스크립트를 리팩터링해야한다고 말할 것입니다.
Google은 페이지 순위 측정에로드 시간을 포함 시켰습니다. 많은 인라인으로 인라인이라면 Spiders가 페이지를 통해 기어 다니는 데 시간이 더 걸리면 많은 포함시켜야하는 경우 페이지 순위에 영향을 줄 수 있습니다. 어쨌든 다른 전략은 순위에 영향을 줄 수 있습니다.
스크립트로 단일 페이지 웹 사이트를 만들 때 인라인을 사용해야한다고 생각합니다. 여러 페이지에서 스크립트를 공유 할 필요가 없습니다.
인라인 JS가 항상 유지하기가 어렵 기 때문에 항상 외부 JS를 사용하십시오.
또한, 대부분의 개발자는 JS를 외부로 사용하는 것이 좋습니다.
나는 나 자신이 외부 JS를 사용한다.
