티스토리 뷰
발생일: 2016.10.12
키워드: document.write, chrome, script, 스크립트 태크
문제:
잘 동작하던 사이트에서 어느 시점에서부터 아래 워닝이 뜬다.
A Parser-blocking, cross-origin script, http://example.com/example.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.
해결책:
document.write()로 스크립트 태그를 삽입할 때 발생하는 워닝이고, 확인해보니 크롬 53버전부터 나오는 것이라 한다.
스크립트 태그가 들어가면 페이지가 블럭킹 된다.
스크립트 태그에서 불러오는 리소스의 크기가 크다면, 2G 사용자처럼 네트워크가 느릴 때엔 큰 이슈가 될 수 있기 때문에 넣은 워닝이라고 한다.
현재 시점까지는 워닝 메시지만 보여주고, 10월 중순부턴 2G 사용자를 대상으로는 직접 개입할 예정이라고 한다.
우리 서비스에서 문제가 되었던 코드는, 템플릿을 읽어서 document.write() 하는 부분이었다.
템플릿 내에 스크립트 태그도 포함되어 있었는데, 이 부분은 document ready 시점에 엘리먼트로 추가하는 방식으로 변경할 예정이다.
참고:
반응형
댓글
공지사항