utterances-bot commented 4 years ago

되돌아보는 index.html - Part 1 | SOSOLOG

React, Vue, Angular 같은 Library 혹은 Framework로 개발할 경우 빌드 결과물인 index.html은 자동으로 생성되기 때문에 직접 볼 필요가 없을 수도 있습니다. 하지만, 최종 html의 구성 요소를 잘 파악하고 있다면 성능 개선이나 디버깅하는 상황에서 용이하게 활용할 수 있습니다. Parts 1편: link, script tag 2편: meta tag(Open Graph), lang 등 TL;DR link tag preload…

https://so-so.dev/web/index-html-1/?fbclid=IwAR1L72yBAdl4h5NzJasaDtP5IKfApfvWgm6kuDc474BFaQ1BKlqaVvwLGGM

livelikeabel commented 4 years ago

크 포스팅 좋네요 :)

jeongtae commented 2 years ago

정리가 깔끔하고 좋네요! 하나 덧붙이자면 defer, type="module" 스크립트는 로드 시간을 줄일 수 있는 작은 장점도 있지만, 웹페이지에 defer, module, async 스크립트만 존재한다면, 스크립트가 CSS 파싱을 기다리지 않고 병렬로 진행될 수 있게 되는 특징도 있습니다. CSS가 무거운 경우에 유용할 수 있는 특징입니다.

하지만 페이지에 일반 동기 스크립트가 하나라도 존재한다면, CSS 파싱이 동기 스크립트 실행을 지연시키는 특성으로 인해서 그런 특징은 사라지게 되죠. 극한의 최적화를 꾀한다면 페이지 내 모든 스크립트를 defer, type="module", async만을 사용해서 구성하는 것도 방법인듯 합니다.

단, 스크립트 내에서 스타일시트 접근을 해야 하는 경우, 스타일시트 파싱 완료 여부에 따라 제대로된 결과를 못 얻게 된다는 단점 또한 있습니다.

SoYoung210 / SOSO

web/index-html-1/ #37

되돌아보는 index.html - Part 1 | SOSOLOG