브라우저 기초 지식

[2021-03-18]

브라우저 기초 지식

추가 공부해야할 것react를 렌더링 부분을 보고 있으니 브라우저 기초지식이 부족하다고 느꼈습니다. 각 브라우저의 구조와 브라우저 렌더링 엔진이 어떻게 작동하는지, 각 브라우저의 호환성에 관해 설명하였습니다.

1. 브라우저 기본 구조

• 사용자 인터페이스 : 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.
• 렌더링 엔진 : 요청한 콘텐츠를 표시.  예시) HTML과 CSS를 파싱하여 화면에 표시함.
• 통신 : 네트워크 호출에 사용됨, 플랫폼과 독립적인 인터페이스며 하부에서 실행됨.
• UI백엔드 : 

• 콤보 박스와 창 같은 기본적인 장치를 그림. 
• OS 사용자 인터페이스 체계를 사용.
• 플랫폼에서 명시하지 않은 일반적인 인터페이스

      -   자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행함.

      -   자료 저장소 : 자료를 저장하는 계층. 모든 종류의 자원을 HDD에 저장 할 수 있음. - - - - 하드디스크에 저장하는 이유 (출처)

    - 오프라인 시 동작 가능 :  네트워크가 연결되면 동기화 할 수 있음.

    - 성능향상 : 일종의 캐시 역할을 함.

• 

 

2. 렌더링 엔진

렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시한다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시 할 수 있다. 

(확장 플러그인을 통해 PDF와 같은 다른 유형도 표시 가능) 

 

• 동작과정 

 

3. 브라우저 호환성

특정 CSS가 IE에서는 작동하지 않지만 Chrome에서는 동작하는 경험을 해보셨을 겁니다.

CSS 호환성 확인 할 때 주로 쓰는 사이트입니다. (https://caniuse.com/)

https://d2.naver.com/helloworld/59361