[웹폰트] 2개이상의 웹폰트 사용시에 Reflow현상에 대응 하기

 

두가지 이상의 웹폰트(각각의 font-family 다를 경우), Reflow현상이 일어나게 된다. 

우리가 흔하게 브라우져 랜더링에서, Repaint 현상과 Reflow 현상 두가지 경우가 일어나게 된다.

 

 

 

---

 

Repaint 현상 

엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 유발된다. (visibility, outline, background-color 등이 포함) Opera에 따르면 Repaint는 해당 행위가 발생하는 순간, 문서내 DOM tree의 다른 노드들의 스킨까지도 검증해야 하므로 비용이 높다고 함.

 

Replow 현상 

문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 뿌려주므로 Repaint보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스이다. 특정 엘리먼트에 대한 Reflow 발생 시, 페이지에서의 해당 요소는 즉시 Reflow State가 되며 해당 엘리먼트의 자식요소와 부모/조상 요소역시 레이아웃 계산을 진행한다. (결국은 페이지 전체를 다시 훑는 것이나 마찬가지) Opera에 의하면, 대부분의 리플로우는 페이지 전체의 렌더링을 다시 일으킨다고 한다.

 

 

---

 

Reflow 현상이 일어날 경우에는 포인트 폰트로 제공 하는 부분을 sessionStorage / localStorage로 제어하게 된다.

 

<script src="webfont.js" async></script>
<link rel="preconnect" href="font.css" crossorigin>
<script>
	var css_href = 'font.css';
	var style = document.createElement('style');
	var req = new XMLHttpRequest();
	if (window.localStorage && window.localStorage.fonts) {
	   document.documentElement.classList.add('wf-active');
	   style.innerHTML = localStorage.fonts;
	   document.getElementsByTagName('head')[0].appendChild(style);
	 }
	 window.fonts = function () {
	   req.addEventListener("DOMContentLoaded", function () {
	     window.localStorage.fonts = this.responseText;
	   });
	   req.open('GET', css_href, true);
	   req.send();
	    
	 };	
 	WebFontConfig = {
        custom: {
            families: ["KHNPHD"],
	        urls: ["font.css"]
        },
        active: function () {
            sessionStorage.fonts = true;
        },
        loading: window.fonts,
        timeout: 2000
    };
   
    (function () {
        if (sessionStorage.fonts) {
            document.documentElement.classList.add('wf-active');
        } else {
        }
    })();
    </script>

 

위와 같이 스크립트를 사용하여, Reflow 현상을 최소화 하게끔 처리를 하면 된다.

하지만, 자주 사용 하게 되면, 로딩 속도에 좋지 않으며,

위와 같은 방법은 사용을 권하지 않는다.