document.write() 사용

document.write()를 사용하면 페이지 콘텐츠 표시가 수십 초 지연될 수 있으며 연결 속도가 느린 사용자에게 특히 문제가 됩니다. 그러므로 Chrome은document.write()의 실행을 차단합니다. 따라서 이에 의존해서는 안 됩니다.

document.write()를 사용할 때 Chrome DevTools 콘솔에 다음 메시지가 표시됩니다.

[Violation] Avoid using document.write().

Firefox DevTools 콘솔에 다음 메시지가 표시됩니다.

An unbalanced tree was written using document.write() causing
data from the network to be reparsed.

# Lighthouse document.write() 감사가 실패하는 이유

Lighthouse는 Chrome에서 차단하지 않은 document.write() 호출에 플래그를 지정합니다.

가장 문제가 되는 사용의 경우 Chrome은 document.write() 호출을 차단하거나 이에 대한 콘솔 경고를 표시합니다. 어느 쪽이든 영향을 받는 호출은 DevTools 콘솔에 나타납니다. 자세한 내용은 Google의 document.write()에 대한 개입 문서를 참조하세요.

Lighthouse는 사용 방식에 상관없이 성능에 부정적인 영향을 미치고 더 나은 대안이 있기 때문에 document.write()에 대한 나머지 호출을 보고합니다.

# document.write() 피하기

코드에서 document.write()을 모두 제거하십시오. 타사 스크립트를 삽입하는 데 사용되는 경우 대신 비동기식 로딩을 사용해 보세요.

타사 코드가 document.write()를 사용하는 경우 공급자에게 비동기 로드를 지원하도록 요청하세요.

# 참고자료

• document.write()를 사용합니다 감사를 위한 소스 코드
• document.write()에 대한 개입
• 파서 차단과 비동기 자바스크립트 비교
• 추측 파싱