은 참조 :Google에서 "Render-Blocking JavaScript"라는 용어를 사용하는 이유는 무엇입니까?
https://developers.google.com/speed/docs/insights/BlockingJS
구글은 그러나 용어는 잘못된 혼란과 오해의 소지가 내 의견으로는 "자바 스크립트를-차단 렌더"에 대해이 얘기입니다. 그것은 거의 "구글"이 그것을 이해하지 못하는 것처럼 보입니다.
이 점은 자바 스크립트 실행이 항상 렌더링을 일시 중지/차단하고 항상 "HTML 구문 분석기"를 일시 중지/차단한다는 것입니다 (적어도 Chrome 및 Firefox에서는). 비동기 스크립트 태그와 함께 외부 js 파일의 경우에도 차단됩니다.
예를 들어 async를 사용하여 "render-blocking Javascript"를 제거하는 것은 비 차단 자바 스크립트가 있거나 "async Javascript execution"이 렌더링을 차단하지 않는다는 것을 의미하지만 사실이 아닙니다!
올바른 용어는 "Render-Blocking Download (s)"입니다. async를 사용하면 js 파일을 다운로드해도 렌더링이 일시 중지되거나 차단되지 않습니다. 그러나 실행은 여전히 렌더링을 차단합니다.
Google이 "이해하고 있지 않다"는 것을 확인하는 또 다른 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
Some HTML line and this is above the fold
<script>
// Synchronous delay of 5 seconds
var timeWhile = new Date().getTime();
while(new Date().getTime() - timeWhile < 5000);
</script>
</body>
</html>
나는 파이어 폭스와 크롬에서 테스트 그리고 그들은 (렌더링) 보여주고있다 : "일부 HTML 라인이이 배 이상"오초 후하지 오초 내 !!!! 구글은 그런 경우 자바 스크립트가 렌더링을 차단하지 않을 것이라고 생각하지만, 이론적으로 예상대로 차단 될 것으로 보인다. js 실행이 시작되기 전에 모든 HTML은 이미 DOM (execept end body/html 태그)에 있지만 렌더링이 아직 완료되지 않고 일시 중지됩니다. 그래서 구글이 이것을 정말로 알고 있다면, 크롬은 자바 스크립트의 실행으로 시작하기 전에 렌더링을 끝낼 것입니다.
당신은 위의 예를 가지고가는 경우에 당신이 사용하고 있습니다 :
<script src="delay.js" async></script>
또는 대신 내부 자바 스크립트의
<script src="delay.js"></script>
- "HTML 파서"가 자바 스크립트 부분에 오기 전에 프리 로더 (이미 다운로드 할 파일 검색)에서 "delay.js"를 이미 다운로드 한 경우입니다.
- 일반적으로 Google, Facebook 등의 외부 파일은 이미 캐시에 저장되어 있으므로 다운로드가 없으며 캐시에서 파일을 가져옵니다.
그런 경우 (비동기로도) 위의 예와 같은 결과가됩니다 (적어도 많은 경우). 추가 다운로드 시간이 없으면 앞선 html 렌더링이 끝나기 전에 "자바 스크립트 실행"이 이미 시작됩니다.
그렇다면 delay.js (또는 추가 지연 시간)에 "no-cache"/ "no-store"를 넣어 페이지를 더 빨리 렌더링 할 수도 있습니다. 다운로드 (또는 추가 지연)를 강요하면 Javascript 렌더링 차단을 실행하기 전에 브라우저가 이전 html의 렌더링을 끝내는 데 약간의 추가 시간을줍니다.
Google (및 다른 사람들)이 "Render-Blocking JavaScript"라는 용어를 사용하는 이유를 이해하지 못하고 이론 및 실제 생활에서 볼 때 잘못된 용어 및 잘못된 생각처럼 보입니다. 나는 이것에 대해 인터넷에서 이야기하는 사람이 아무도 없기 때문에 이해하지 못한다. 나는 f ** king 지능형 (j/k) 인 것을 알고 있지만 위의 생각을 가진 유일한 사람이되도록 이상하게 보입니다.
링크 된 페이지에서 : *** 인라인 스크립트는 실행을 연기하기 위해 추가 코드를 작성하지 않는 한 항상 파서 차단 **입니다. * –
@JoshLee하지만 그건 사실이 아닙니다. Javascript 실행은 항상 파서를 차단합니다. 그리고 그것이 async/sync/defer인지는 중요하지 않습니다. 이것이 바로 Google이 사람들을 정보와 혼동하고 귀하가 볼 수있는 것처럼, 이제는 정보로 인해 잘못된 생각을하고 있습니다. 지연 및 캐싱의 경우 (다운로드 시간이 아님) 외부 스크립트 태그를 사용하여 테스트를 수행 할 수 있습니다. j가 실행되는 동안 렌더링이 차단되기 때문에 5 초 후에 "일부 HTML 행 및 이것이 스크롤없이 볼 수있는 부분 위에 표시됩니다"가 다시 표시됩니다. ! –