이 페이지는 Cloud Translation API를 통해 번역되었습니다.

document.write()에 대한 개입

Paul Kinlan

최근 개발자 콘솔의 어떤 기능일지 궁금하셨나요?

(index):34 A Parser-blocking, cross-origin script,
https://paul.kinlan.me/ad-inject.js, is invoked via document.write().
This may be blocked by the browser if the device has poor network connectivity.

작성 가능성은 웹의 큰 장점 중 하나이므로 타사에서 빌드한 서비스와 통합하여 멋진 새 제품을 만들 수 있습니다. 1개 구성 가능성의 단점은 공동의 책임을 공유한다는 의미이고 여러 가지 방법이 있습니다. 통합이 최적화되지 않으면 사용자 환경이 부정적인 영향을 받게 됩니다

성능 저하의 알려진 원인 중 하나는 페이지 내부에서 document.write()를 사용하는 것입니다. 특히 스크립트를 삽입하는 사용 사례입니다. 다음의 모습만큼이나 무해하지만, 사용자에게 실질적인 문제를 일으킬 수 있습니다

document.write('<script src="https://example.com/ad-inject.js"></script>');

브라우저가 페이지를 렌더링하려면 먼저 HTML 마크업을 파싱하여 DOM 트리를 빌드해야 합니다. 파서가 스크립트를 발견할 때마다 계속 진행하기 전에 스크립트를 중지하고 실행해야 합니다. 할 수 있습니다. 스크립트가 다른 스크립트를 동적으로 삽입하면 파서가 강제로 대기합니다. 리소스를 다운로드하는 데 더 오래 걸릴 수 있고, 이로 인해 하나 이상의 네트워크 왕복이 발생할 수 있고 페이지의 첫 렌더링 시간 지연

2G와 같이 연결이 느린 사용자의 경우 동적으로 외부 스크립트를 document.write()를 통해 삽입된 경우 다음 시간 동안 기본 페이지 콘텐츠 표시가 지연될 수 있습니다. 페이지가 로드되지 않거나 시간이 너무 오래 걸려서 사용자가 그냥 포기합니다. Chrome의 계측을 기반으로 document.write()을(를) 통해 삽입된 타사 스크립트가 포함된 페이지는 일반적으로 2G의 다른 페이지보다 로드 속도가 두 배 느립니다.

Google은 1% 의 Chrome에 대한 28일 필드 트라이얼을 통해 데이터를 수집했습니다. 안정적인 사용자에게만 제공됩니다. 전체 페이지 로드의 7.6% 가 크로스 사이트 파서 차단 스크립트가 하나 이상 포함되어 있어서 최상위 문서의 document.write()를 통해 삽입됩니다. 차단된 결과 스크립트의 로드는 다음과 같이 개선되었습니다.

페이지 로드 10% 증가 콘텐츠가 포함된 첫 페인트 (페이지가 효과적으로 로드되고 있음을 사용자에게 시각적으로 확인) 완전히 파싱된 상태에 도달하는 페이지 로드가 25% 증가, 새로고침이 10% 감소 사용자의 불만을 줄일 것을 제안합니다.
다음 시점까지 평균 시간 21% 감소 (1초 이상 단축) 콘텐츠가 포함된 첫 페인트
페이지 파싱에 걸리는 평균 시간이 38% 단축되었으며 거의 6초나 개선되어 시간을 절약할 수 있습니다.

이 데이터를 염두에 두고 Chrome은 버전 55부터 개입합니다. document.write()가 Chrome에서 처리됩니다 (Chrome 상태 참고). 특히 Chrome은 다음을 통해 삽입된 <script> 요소를 실행하지 않습니다. 다음 조건이 모두 충족되는 경우 document.write():

사용자의 연결이 느린 경우, 특히 2G에 연결되어 있을 때 ( 이 변경사항은 연결 속도가 느린 다른 사용자에게도 적용될 수 있습니다. 인터넷 연결이 느린 경우 등).
document.write()는 최상위 문서에 있습니다. 개입을 통해 iframe 내 document.Write 스크립트에 적용됩니다. 기본 페이지의 렌더링입니다.
document.write()의 스크립트가 파서를 차단합니다. 다음 항목이 포함된 스크립트 'async' 또는 'defer' 속성은 계속 실행됩니다
스크립트가 동일한 사이트에서 호스팅되지 않았습니다. 즉, Chrome은 일치하는 eTLD+1이 있는 스크립트 (예: www.example.org에 삽입된 js.example.org).
스크립트가 아직 브라우저 HTTP 캐시에 없습니다. 캐시의 스크립트 네트워크 지연이 발생하지 않으며 계속 실행됩니다.
페이지 요청은 새로고침이 아닙니다. 사용자의 요청에 따라 사용자가 새로고침을 트리거하고 페이지를 정상적으로 실행합니다.

서드 파티 스니펫이 스크립트를 로드하는 데 document.write()를 사용하는 경우가 있습니다. 다행히 대부분의 서드 파티는 비동기 로딩 대안을 설명하며 나머지 스크립트의 표시를 차단하지 않고 서드 파티 스크립트가 로드되도록 영향을 주지 않습니다.

이 문제를 해결하려면 어떻게 해야 하나요?

이 간단한 답변은 document.write()를 사용하여 스크립트를 삽입하지 않는 것입니다. 비동기 로더 지원을 위해 알려진 서비스 집합을 유지합니다. 확인하시기 바랍니다.

제공업체가 목록에 없고 비동기 스크립트 로드를 지원하는 경우 그런 다음 Google에 알려 주시면 페이지를 업데이트하여 모든 사용자를 지원하겠습니다.

제공업체가 스크립트를 비동기식으로 로드하는 기능을 지원하지 않는 경우 페이지에 삽입했다면 해당 업체에 연락하여 알려주세요 영향을 줄 수 있습니다

제공업체가 document.write()를 포함하는 스니펫을 제공하는 경우 스크립트 요소에 async 속성을 추가할 수 있습니다. 또는 를 사용하면 document.appendChild()와 같은 DOM API를 사용하여 스크립트 요소를 추가할 수 있습니다. 또는 parentNode.insertBefore().

사이트가 영향을 받는 경우 감지하는 방법

제한이 시행되는지 여부를 결정하는 기준은 매우 많습니다. 피해를 입었는지 어떻게 알 수 있을까요?

사용자의 2G 연결 감지

이 변경사항이 미칠 수 있는 영향을 파악하려면 먼저 얼마나 많은 사용자가 2G를 사용하는지를 알 수 있습니다. 사용자의 현재 네트워크 유형을 감지할 수 있습니다. Network Information API를 사용하여 Chrome에서 사용할 수 있으며 분석 또는 실제 사용자 측정항목에 대한 헤드업을 자동화합니다

if(navigator.connection &&
    navigator.connection.type === 'cellular' &&
    navigator.connection.downlinkMax <= 0.115) {
    // Notify your service to indicate that you might be affected by this restriction.
}

Chrome DevTools에서 경고 포착

Chrome 53부터 DevTools에서 문제가 있는 document.write()에 대한 경고를 표시합니다. 합니다. 특히 document.write() 요청이 2~5의 기준을 충족하는 경우 (이 경고를 보낼 때 Chrome은 연결 기준을 무시함) 다음과 같이 표시됩니다.

Chrome DevTools에 경고가 표시되는 것은 좋지만, 어떻게 해야 할까요? HTTP 헤더를 확인하여 개입의 영향을 받습니다

참고: '2G'를 사용 설정할 수 있습니다. Chrome DevTools에서는 작동하지만 Chrome 55에서는 제대로 작동하지 않습니다. 개입을 트리거할 수 있습니다 최선의 옵션은 이 개입을 사용 설정하는 것입니다. chrome://flags/#disallow-doc-written-script-loads 사용

참고: 이 개입에서 사용하는 휴리스틱 중 하나는 파일이 사용자의 캐시를 클릭합니다. DevTools를 사용하면 캐시를 사용 중지할 수 있지만 onerror 이벤트는 표시되지 않습니다. 트리거되고 있는 스크립트 요소에서 트리거되지만 사용하지 않을 때는 DevTools를 사용할 수 있습니다. 이 문제는 Chrome 56에서 해결되었습니다.

스크립트 리소스에서 HTTP 헤더 확인

document.write를 통해 삽입된 스크립트가 차단되면 Chrome에서 다음 헤더를 요청된 리소스에 추가합니다.

Intervention: <https://shorturl/relevant/spec>;

document.write를 통해 삽입된 스크립트가 발견되어 다음에서 차단될 수 있는 경우 Chrome에서 다음 정보를 전송할 수 있습니다.

Intervention: <https://shorturl/relevant/spec>; level="warning"

개입 헤더는 스크립트에 대한 GET 요청의 일부로 전송됩니다. (실제 개입이 발생하는 경우 비동기식으로)

미래에는 어떤 일이 일어날까?

초기 계획은 기준을 감지할 때 이 개입을 실행하는 것입니다. 있습니다. 먼저 Chrome 53의 개발자 콘솔에서 경고만 표시했습니다. (베타는 2016년 7월이었습니다. 안정화 버전은 다음 국가의 모든 사용자에게 제공될 예정입니다. 2016년 9월)

Google은 2G 사용자에 대해 삽입된 스크립트를 차단하기 위해 잠정적으로 Chrome 54는 2016년 10월 중순에 출시되었습니다. 자세한 내용은 Chrome 상태 항목 에서 확인하세요.

시간이 지남에 따라 인터넷 연결이 느린 사용자의 경우 (예: 3G 또는 Wi-Fi 속도 저하) Chrome 상태 항목을 따르세요.

자세한 내용이 궁금하신가요?

자세한 내용은 다음 추가 리소스를 참고하세요.