앞의 글에서[링크] HTML import는 랜더링을 막기 때문에 지연되지 않기 위해 스크립트로 만들어서 사용했다.

근데 알고보니 HTML import는 기본적으로 랜더링을 막지 않는다.[링크] 앞에서 HTML import가 랜더링이 멈췄던 이유는 사실 스크립트 태그 때문이였다.


HTML import은 스크립트 태그를 만나기 전까지는 계속해서 랜더링을 하다가 스크립트 태그를 만나면 랜더링을 멈춘다.

예를들면 아래처럼 script태그가 나오기 전인 #ad_area까지 랜더링을 하다가 script태그를 만나면 멈추고 로딩이 끝나면 이어서 랜더링이 된다. 

<link rel="import" href="ad.html">

<div id="ad_area"> 앞 </div>

<script>
//script...
</script>

<div id="ad_area2"> 뒤 </div>

즉, 앞의 글에서 말한 HTML import는 랜더링을 막으면 안된다는 얘기는 상관이 없다.


그렇다고해서 무조건 랜더링을 막지 않는것이 좋은 것만은 아니다.

import는 Web Components을 사용할 때 사용하는 태그인데 사용하려고 하는 커스텀 엘리먼트가 import보다 먼저 랜더링되면 처음에는 모르는 태그라 넘어가다가 import가 완료가 되면 바로 적용이 된다.[링크]

이렇게 적용되면 FOCU[링크]와 같이 화면이 이상하게 보이는데 이런 문제를 해결하려면 적절하게 보이도록 만들거나[링크] 앞에서 본것처럼 아예 script을 커스텀 태그 앞에 넣어 멈추는 방법[링크]을 사용해야한다.

둘 다 매끄럽지 않기 때문에 현재 import을 적용할 때 element속성을 추가하여 element 속성에 설정한 엘리먼트들을 만나면 랜더링을 멈추는 스팩을 제안했고 여러 각도로 이슈를 해결하기 위해 토론되고 있다.[링크]

물론. 비슷한 이슈가 이미 논의가 됬고 :unresolved라는 가상 선택자[링크]를 만들어서 제공했지만, 크기를 가지는 엘리먼트의 경우 꿀렁거리는 이슈는 여전히 해결이 안된다. (참고로 angularjs의 ngCloak도 비슷한 용도이다.[링크])


대충 의미만 전달하기 위해 적었는데 좀 더 자세한 내용은 원문을 참고하길 바란다.[링크]


관련글

HTML import을 이용하여 document.write 개선하기.

Posted by 전용우
,