Frontend2

• 

  Defer vs Async HTML에서 외부 스크립트를 로드하는 데 사용하는 defer 속성과 async 속성에 대해 알아보겠습니다. 두 속성은 외부 스크립트의 로드와 실행 방식을 결정합니다. 아래 코드 블럭에서 볼 수 있듯이 HTML 파일의 head 태그 안에 있는 script 태그의 속성으로 defer 또는 async를 부여할 수 있습니다. 해당 태그는 Boolean 타입인데, 디폴트가 True여서 defer 또는 async 라고 명시하기만 하면 속성이 적용됩니다. async async 속성이 적용된 스크립트는 HTML 구문 분석과 동시에 로드됩니다. 로드되는 동안에는 파싱이 그대로 진행되지만 다 받아지면 파싱을 중단하고 스크립트를 실행합니다. 스크립트가 여러개인 경우 위와 같이 스크립트 여러개를 모두 async 속성으로 불러.. Frontend 2023. 3. 17.

• 렌더링(Rendering) 렌더링은 크롬, 파이어폭스 등과 같은 브라우저가 서버에서 파일을 받아서 렌더링 엔진을 통해 화면에 나타내는 과정입니다. 크롬과 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 엔진이 서버에서 받은 HTML, CSS, JavaScript 파일을 렌더링할 때, 사용하는 절차가 있는데 이를 CRP(Critical Rendering Path) 라고 합니다. 앞으로 파싱이라는 용어를 많이 사용하게 되는데, 파싱은 렌더링 엔진이 코드를 사용할 수 있는 구조, 보통 문서 구조를 나타내는 노드 트리로 변환하는 것을 뜻합니다. 이 노드 트리는 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고도 불립니다. CRP 브라우저의 HTML 요청 → 서버의.. Frontend 2023. 2. 15.