인라인 JavaScript가 좋거나 나쁩니 까?

현재 WordPress에서 Yii 프레임 워크 로 전환했으며 외부 개발자가 내 사이트를 다시 작성하고 있습니다.

내가 아는 한 가지는 그가 AJAX / jQuery를 Yii 방식으로 호출 할 때마다 웹 페이지에 JavaScript를 인라인 으로 삽입 한다는 것 입니다. JavaScript 코드가 바닥 글 아래에있는 것처럼 보이지만 여전히 인라인입니다.

일반적으로 JavaScript 코드가 웹 페이지에 더 자주 삽입되는 것 같습니다. 저는 항상 JavaScript 스크립트를 가능한 한 JavaScript 파일에 배치해야한다고 생각했습니다. 이것이 다가오는 "새로운"트렌드입니까? 아니면 여전히 JavaScript 코드를 별도의 파일로 유지해야합니까?

인라인 JavaScript는 페이지의 다운로드 시간을 늘려서 좋지 않습니다. .js파일을 호출하면 적어도 병렬 호출이 될 수 있으며 컨텐츠 다운로드 시간이 줄어 듭니다. 예, JavaScript를 HTML 코드에 직접 넣는 것이 좋은 경우가 있지만 가능한 한 많이 오프로드하는 것이 좋습니다.

페이지 다운로드 시간 (즉, HTML)은 모든 리소스 호출이 순위에 영향을 미치는 메트릭에 영향을 미치지는 않습니다 (PageRank 또는 SERP에서는 중요하지 않음). 요점은 SEO의 사이트 성능에 영향을 미치지 만 명백합니다.

통화 변환 사이트에서 대부분의 세션은 단일 페이지 조회수입니다. 사용자가 방문 페이지에서 직접 통화 계산을 수행 할 수 있기 때문입니다 (모든 계산은 클라이언트 측에서 JavaScript로 처리됨).

내 페이지는 모든 리소스 (css, js 및 심지어 images )가 페이지에 인라인 될 때 약 절반의 시간 안에 다운로드 및 렌더링됩니다 . 소수의 사용자가 여러 페이지를 볼 수 있기 때문에 이러한 리소스 중 일부는 페이지 뷰간에 캐시되는 이점이 없습니다.

내 사이트는 일반적이지 않습니다. 대부분의 사이트에는 세션 당 여러 페이지와 큰 이미지가있어 내 기술을 적용하기가 쉽지 않습니다. 이 질문에 대한 올바른 해결책은 없습니다. 사이트에 따라 다릅니다. 사용자 의 일반적인 동작을 기반으로 직접 측정 해야합니다.

HTML 파일 내에 JavaScript가있는 것이 반드시 나쁘지는 않지만 판단해야합니다.

그것은 이다 당신이 자바 스크립트의 많은 양의 여러 페이지에 걸쳐 사용되고있는 경우 나쁜. 이 경우, JavaScript는 외부, 압축 및 캐싱 가능 파일에 있어야하며 사이트에 트래픽이 많은 경우 CDN을 사용해야합니다.

그러나 소량의 JavaScript가있는 경우 외부 파일에 저장하는 경우 저장을 위해 추가 HTTP 요청을해야한다는 사실 때문에 외부 파일에 저장하지 않아도됩니다. 이 경우 페이지에 JavaScript를 유지하는 것이 더 효율적입니다.

그런 다음이 동일한 작은 JavaScript 스 니펫이 여러 페이지에 사용되는 경우 캐싱을 활용하기 위해 외부 파일에 배치하는 것이 좋습니다.

궁극적으로 추가 HTTP 요청의 오버 헤드에 대비하여 JavaScript 크기를 측정해야합니다. 대부분의 경우 '평균'사이트의 경우 외부 파일에 넣는 것만으로도 큰 차이가 없을 것입니다.

나는 Yii 개발자이고 Yii는 이것과 아무 관련이 없다고 말할 수 있습니다 . 그것은는 개발자 측에서 완전히 그 또는 그녀가 별도의 파일에 자바 스크립트 코드를 넣어와 HTML (보기) 페이지에 등록 여부, CClientScript::registerScriptFile방법 또는보기에 직접 (HTML) 코드를 넣고 사용하여 등록 CClientScript::registerScript방법.

귀하의 답변에 따르면, 대부분 (전문가입니까?) Yii 개발자는 첫 번째 접근 방식에 강력하게 투표합니다. 그래서,이 가장 확실히 하지 코딩의 새로운 트렌드, 오히려 나쁜 개발자 연습. 적어도 그것이 Yii 커뮤니티에서 보이는 방식입니다.

편집 : 실제로, 나는 가장 중요한 논쟁에 대해 잊었다. Yii (및 대부분의 다른 전문 PHP 프레임 워크)는 MVC 디자인 패턴 (실제로는 건축 패턴)을 기반으로합니다. HTML 코드는 모델 (데이터), CSS는 뷰 (데코레이터), Javascript는 컨트롤러입니다. 그들 모두 넣어 별도의 파일로 , .js그리고 .css, 축소 된 obsfucated 최상의 시나리오에서 gzip으로 압축 - 파일.

Yii 애플리케이션을 빌드 할 때 MVC 패턴을 중단하고 모든 것을 동일한 파일에 유지할 수 있습니다. 문제는-그렇게하는 것이 가치가 있는가, 이점은 무엇인가 (없음?) 그리고 어디로 이끌 것인가? JS 코드를 인라인으로 유지할지 여부를 물을 때 동일한 인수를 사용할 수 있습니까?

실제로 개발중인 웹 페이지의 목적에 따라 다릅니다.

소량의 인라인 JavaScript를 사용하는 반면 외부 JavaScript 파일이 큰 경우에는 외부 JavaScript 파일을 선호합니다.

어느 쪽이든, 페이지가 JavaScript를로드 할 때 먼저 실행되어야합니다. 가장 좋은 방법은 외부 JavaScript를 사용하여 페이지 내용을 늘리지 않는 것입니다. 또한 디버깅이 쉬워집니다.

대답은 실제로 수행중인 작업에 따라 다릅니다.

웹 사이트 전체에서 사용되는 인라인 JavaScript (예 : 웹 사이트의 모든 페이지에서 헤더 안에 표시되는 위젯)가있는 경우이를 "공통"JavaScript 파일로 이동하는 것이 좋습니다.

사실, 단일 페이지에서 사용 되더라도 가능한 많은 JavaScript를 공통 JavaScript 파일로 이동합니다. JavaScript 파일에 대해 강력한 캐싱 및 압축 헤더를 보내도록 서버를 구성합니다. 페이지 크기는 줄이지 ​​만 JavaScript 파일 크기는 크게 늘리지 않습니다.

반면에 JavaScript가 단순히 여러 구성 옵션 / 초기화 인 경우 :

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

어떤 이유로 든 코드를 외부 JavaScript 파일로 이동할 수 없었습니다 (예 : 이미지 매개 변수가 데이터베이스에서 오는 경우) 인라인으로 유지합니다. 내가 말했듯이, 나는 "명백하지 않은"제 3의 플러그인을 선택할 것이다.

이 답변은 마크를 그리워합니다. 인라인 캐싱을 살펴보십시오 .

Yii는 PHP로 코딩되어 있기 때문에 개발자가 흔히 볼 수있는 (또는 드물게) PHP 패턴은 개발자가 서버에서 알려진 상태, 조건 또는 값을 기반으로 서버에서 Javascript 코드를 동적으로 생성하기 위해 PHP 코드를 작성하는 경우가 있습니다. 클라이언트가 함수를 실행하고 서버가 이미 수행 한 일부 계산을 건너 뛸 수 있도록 모든 배치를 한 번에 클라이언트에 보냅니다.

데이터 (서버에있을 수 있고 왕복이 필요할 수있는 데이터)가 제공 될 때까지 컨텍스트가없는 클라이언트에 .js 파일의 일반 Javascript 함수 전체를 전송하는 대신 "베이크 인"할 수 있습니다. 자바 스크립트 함수의 일부로 컨텍스트 / 데이터. 기능 / 데이터를 함께 전송하고 첫 페이지로드시 전체 앱을 전송하는 대신 클라이언트가 필요로 할 수있는 기능 / 데이터 만 전송한다는 것을 의미하기 때문에 이는 무섭습니다. 또한 각 개별 클라이언트가 필요로하는 기능의 일부만 주입하기 때문에 전체 페이지를 첫 페이지로드시 쉽게 다운로드하고 리버스 엔지니어링 할 필요가 없습니다. 그것이 SEO에 얼마나 좋은지 잘 모르겠지만, 그에 따라 최적화 할 수 있다고 확신합니다.

최종 사용자가 WYSIWYG 편집기를 사용하여 일부 CMS 소프트웨어에서 페이지를 작성하는 경우를 고려하십시오. 이 사용자가 서버의 소스 .js 파일에 액세스 할 수없는 경우 어떻게 페이지에 새로운 기능을 추가합니까? HTML 탭으로 전환하고 인라인 Javascript를 사용합니다.

모든 인라인 자바 스크립트가 나쁜 것은 아닙니다. 때로는 onclick도 괜찮습니다. 일반적인 권장 사항으로 인라인 Javascript를 작성하지 마십시오. 좋은 습관을 길러 나갈 수 있습니다.

참고 문헌 :

• 인라인 캐싱
• 인라인 캐시로 동적 JavaScript 최적화
• JavaScript로 JavaScript VM 설명-인라인 캐시
• 인라인 스크립팅을 피해야하는 이유는 무엇입니까? (MainMa 및 user1389596의 답변 참조)

다른 사람들이 내 앞에서 말했듯이 일반적으로 인라인 JS 코드는 좋지 않습니다.

그러나 인라인 JS가 더 나은 유스 케이스를 생각 합니다.

JS 구동 갤러리를 삽입하는 CMS를 생각해보십시오. 갤러리는 jQuery에서 수행 될 수 있습니다. 이는 페이지에서 고유 할뿐만 아니라 전체 사이트에서 고유 한 id 속성으로 식별됩니다. JS 코드가 한 페이지에서만 사용되고 HTTP 오버 헤드가 없기 때문에이 경우 — 인라인 JS가 더 좋습니다.