-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
선생님 질문이 하나 있는데요~~
22.03.21 22:30 작성 조회수 226
1
강의 잘 보고 있습니다!
혹시 @font-face {} 가 들어있는 css를 link ref="preload"하면 해당 css를 미리 불러오면서 폰트도 사전로드 되는걸까요 ?
아니면 폰트 사전로드는 무조건 link로 걸어줘야될까요 ?
답변을 작성해보세요.
3
유동균
지식공유자2022.03.21
안녕하세요, jjongrrr님,
font의 preload 방식에 대해서 질문의 주셨는데요,
감사하게도 위에 마토님이 친절하게 답변을 달아주셨네요. :)
추가로 답변을 드리면,
font가 포함된 css를 preload로 걸어서 사용하실 수 있습니다.
정확한 타이밍은 테스트를 해봐야 알겠지만, 당연히 css가 빠르게 로드 될거고 그에 맞춰서 font도 로드가 될겁니다.
다만, 주의해야할 점은 font가 로드 되려면 css 먼저 로드가 되어야 한다는 점입니다.
강의에서는 font를 직접 preload 했는데요, 이렇게하면 css의 로드와 상관없이 font가 우선 로드됩니다.
<link rel="preload" href="{CSS}"> : CSS 로드 -> font 로드
<link rel="preload" href="{font}"> : font 바로 로드
직접 설정을 해보고 비교해보시면 더 정확히 파악이 될 것 같습니다. ㅎ
그럼 답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
참고: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
2
깨끗한 도미
2022.03.21
일단 link rel = "preload" 는 브라우저의 호환성을 고려하셔야 합니다.
해당 css를 미리 불러오면서 폰트도 사전로드 되는겁니다. preload형식을 사용하게 되면, 페이지가 렌더링 되기 이전에(보여지기 이전) 페이지 로딩에 필요한 리소스(css)를 지정하게 되는겁니다. 이러한 점은 C,C++의 포인터와 좀 비슷한 점이 있습니다. 페이지 로딩에 필요한 리소스를 먼저 가져오게 됨으로써 일찍 사용할수 있으며, 페이지의 렌더링을 차단할 가능성이 낮아서 성능이 향상됩니다.
형식은 이와 같습니다.
<head>
<link rel = "preload" href = "style.css" as="style">
</head>
질문자님이 폰트 사전로드는 무조건 링크로 걸어줘야 할까요? 라고 질문을 주셨는데 너무 질문이 애매모호해서 잘 이해를 못하겠습니다만, html과 css상에서는 형식을 지정해줘야 한다고 알고 있습니다.
<form action = "" method ="post"></form> 이것과 비슷한 계열이라고 전 생각합니다.
왜냐하면 method형식이 기능을 가진 형식이기 때문에 선언을 반드시 해주셔야 합니다.
또하나 주의할점은, 너무 난발해선 안된다는것입니다. 오래걸리거나, 용량이 크거나, 필수로 로딩해야되는것들 위주로 몇개만 쓰셔야 성능 향상 효과를 누리실수 있습니다. 남발시 초반 로딩속도가 길어질수 있습니다. 참고해주시길 바랍니다.
답변 2