728x90
  • 모던 웹 브라우저(크롬, 사파리, 엣지 등)에서 크로스 브라우징이 가능해야 한다.

크로스 브라우징이란?

- 어떤 환경에서 접근하여도 동등하게 작동되는것을 의미.

  - 브라우저나 OS마다 보여지는 모습이 다른 경우가 많은데, 여러 환경에 호환성을 유지할 수 있도록 한다.

 

크로스 브라우징 작업이 필요한 원인은 무엇일까?

- 브라우저마다 랜더링 엔진이 다르기 때문

  - 작동되지 않는 HTML5, Javascript 코드가 존재

  - 해석하지 못하는 CSS 코드 존재

  - 브라우저 버그들이 존재

  - 브라우저마다 자체적인 CSS 스타일

 

크로스 브라우징을 하는 방법

- 수동

- 크로스 브라우징을 하는 방법으로 가장 좋은 방법으로는 각 브라우저를 직접 들어가는 방법이다.

- 체크목록

  - 크롬

  - 웨일

  - IE

  - FireFox

  - Edge

  - Opera

  - Safari

-자동

- 셀레니엄 같은 자동화 도구를 사용하여 전문 QA가 작성한 스크립트로 다양한 브라우저에서 테스트 시나리오를 실행할 수 있다.

 

 

바벨 (for script)

- 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다.

 

'browser' 카테고리의 다른 글

자바스크립트 엔진(인터프리터)  (0) 2021.07.14
브라우저 렌더링  (0) 2021.07.14
Local Storage vs Session Storage vs Cookies  (0) 2020.11.24
728x90

자바스크립트 엔진이란

자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

브라우저와 같이 자바스크립트를 실행해야하는 곳에 설치가 되어 있어 쉽게 접할 수 있다.

엔진의 종류

  • SpiderMonkey : 파이어폭스
  • V8 : 크롬, Node.js
  • Webkit : 사파리
  • Chakra : 엣지

엔진의 구성요소

자바스크립트 엔진

  • 메모리 힙 : 변수와 객체의 메모리 할당이 이뤄지는 곳
  • 콜 스택 : 코드가 실행됨에 따라 호출 스택이 쌓이는 곳

런타임

예시

사용자의 액션에 따라 Web APIs에 있는 setTimeout(또는 XMLHttpRequest)가 실행된다

setTimeout은 콜백 큐(또는 태스크 큐)에 밀어 넣어진다.

이벤트 루프는 콜 스택과 콜백 큐를 감시하면서, 콜스택이 비워지게 되면 콜백 큐에 대기 중인 항목이 있는지 확인하고, 있으면 스택에 올린다.

 

싱글스레드

자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 자바스크립트 엔진에는 콜 스택이 한개만 존재한다.

이로 인해 자바사크립트 엔진은 한번에 한개의 태스크만 처리가 가능하다.

 

그렇다면 브라우저는 어떻게 우리 눈에 여러 일이 동시에 일어나는 것처럼(애니메이션,request handling,...) 보이게 하는걸까?

그리고 호출스택에 처리 시간이 어마어마하게 오래걸리는 함수가 있으면 브라우저는 페이지를 그리지도 못하고 어느 코드도 실행을 못하게 될텐데 브라우저는 이런 상황을 어떻게 대비를 하고 있을까?

이런화면이 뜰것이다.

이는 바로 자바스크립트의 동시성(Concurrency) 과 이벤트 루프(Event loop)를 통해 해결된다..

즉 비동기 콜백을 활용하는 것이다.

자세한 처리로직은 상단의 그림으로 이해할 수 있을것이다.

논외

js파일 html에 넣을 때

 

브라우저는 렌더링 도중 자바스크립트와 만나게 되면 이에 대한 해석과 실행이 완료될때까지 렌더링을 멈춘다.

그렇기때문에 렌더링이 끝난 후 실행하기 위해 바디 하단에 스크립트를 두는것이 안정적이다.

  1. head에 삽입되는 경우
    • 무거운 스크립트가 실행되는 경우 렌더링에 방해가 될 수 있다.
    • 제이쿼리와 같은 설정을 위한 스크립트들이 사용된다.
    • DOM이 필요할 경우 document.onload 를 사용하여, load 이벤트 발생 시, 실행되도록 할 수 있다.
  • 바디 하단에 삽입되는 경우
    • 브라우저의 렌더링이 완료 된 후 실행되기 때문에, DOM을 조작할 수 있다.

부득이 head 태그에서 사용해야한다면 이러한 문제를 해결하기위한 추가된 속성이 있다.

바로

이런화면이 뜰것이다.

async와 defer이다.

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

async또는 defer속성이 추가된 스크립트는 렌더링을 방해하지 않는다.

  • async
    • 외부 스크립트에만 사용할 수 있으며, 스크립트를 내려받는 즉시 실행한다.

  • defer
    • 비동기적으로 스크립트를 다운로드 하며, 렌더링이 완료된 후 스크립트를 실행한다.

'browser' 카테고리의 다른 글

크로스 브라우징  (0) 2021.08.21
브라우저 렌더링  (0) 2021.07.14
Local Storage vs Session Storage vs Cookies  (0) 2020.11.24
728x90

브라우저가 하는일

  • 웹 브라우저는 입력으로 들어온 HTML,JS,CSS를 읽어 웹페이지를 보여준다.
  • 이때 읽은 3개의 요소를 이용하여 하나의 웹페이지를 구성하고 보여주기 위해서 브라우저에서는 다음의 과정을 거친다.

User Interface

- 주소 표시줄, 뒤로/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스

Rendering Engine

- HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진

- 사파리: Webkit, 파이어폭스: Gecko, 크롬: Blink

Browser Engine

- 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

Netowrking

- 네트워크 요청을 수행하는 파트

UI Backend

- 체크박스나 버튼과 같은 기본적인 웨젯을 그려주는 파트

Javascript Interpreter

- 자바스크립트 코드를 실행하는 파트 (크롬: V8)

Data Persistence

- LocalStorage,Cookie와 같이 보조기억장치에 데이터를 저장하는 파트

Rendering Engine

임무

  • HTML,CSS,JS, 이미지등 웹 페이지에 포함된 모든 요소들을 화면에 보여준다
  • 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 트리를 생성한다

렌더링엔진의 동작과정(Critical Rendering Path)

1. DOM /CSSDOM Tree 생성

  • DOM Tree를 생성하기 위한 과정은 다음과 같다.
    • 토큰화 : HTML의 tag를 토큰으로 생성
    • 렉싱 : 토큰을 해당 속성과 규칙을 정의하는 노드객체로 변환
    • DOM Tree생성: 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <!-- Comment -->
        <h1> h1 tag </h1>
        <span> span tag </span>
        <div>
            <image alt="이미지" src="asdf.jpg"/>
        </div>
    </body>
</html>​

  • CSSOM Tree 생성
    • CSS로 만들어지는 트리
    • CSSOM은 DOM이 화면에 어떻게 표시될지를 알려주는 역할을 한다.
body{
   margin:0;
   padding:0;
   text-align:center;
 }


h1{  
   color:red;  
}

div{  
   width:50%;  
   margin: 0 auto;  
}

span{  
   display: none;  
}

2. Render Tree 생성

   - 렌더링 엔진이 DOM Tree와 CSSOM Tree를 합쳐서 렌더트리를 생성함

   - 화면에 표시되어야 할 모든 노드의 컨텐츠 스타일 정보를 포함하는 트리.

      - display:none, comment 등은 더이상 트리에 포함되지않음

3. Render Tree 배치

   Layout(Reflow)

      - viewport내에서 요소들의 정확한 위치와 크기를 계산

      - 스타일 속성이 계산된다. %나 em같은 단위는 viewport를 기준으로 pixel단위로 변환된다.

   Paint

      - 화면에 실제 픽셀로 그려지도록 변환

 

 

UI 업데이트

- critical rendering의 path를 줄이면 브라우저의 렌더링 시간을 줄일 수 잇다. 

 

UI 업데이트되는 3가지 상황

   1. 다시 Layout이 발생하는 경우

      - 수치를 다시 계산해야할 경우 Layout을 다시 시행한다.

      - 주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생. 이후 Paint

   2. Paint부터 다시 발생이 되는 경우

      - 실제 layer의 수치를 변경 시키지 않는 경우 시행한다.

      - 주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생

   3. layer의 합성만 다시 발생하는 경우

      - layout과 paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가진다.

      - layer:

         - layout과정 이후에 브라우저가 필요에 의해 layer를 생성.

         - render tree의 노드객체들은 layer에 포함됨.

         - layer또한 트리의 형태를 가진다. 그리고 rendering engine이 각 layer를 painting 과정에서 그려준 이후 비트맵으로 합성하여 페이지를 완성한다.

 

브라우저별로 같은 CSS여도 layout부터 시행하는지 composite을 하는지 다르기 때문에 www.csstriger.com에서  성능을 확인한다.

'browser' 카테고리의 다른 글

크로스 브라우징  (0) 2021.08.21
자바스크립트 엔진(인터프리터)  (0) 2021.07.14
Local Storage vs Session Storage vs Cookies  (0) 2020.11.24
728x90

※일반적으로 Browser에 데이터를 저장할 수 있는 3개의 공간이 있다.

Local Storage, Session Storage 와 Cookies 의 차이점을 알고 어느 상황에 사용이 적합한지 알아보도록 한다.

Local Storage vs Session Storage vs Cookies

Local Storage

Local Storage

특징:

  • key/value 의 pair로 데이터를 저장한다.
  • Javascript/HTML 을 통해서만 데이터에 접근 가능하다.
  • no expiration date. 직접 지울때까지 남아있다.
  • 5MB의 저장 공간을 가진다
  • Local Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회 가능)
  • string data로 저장이 제한된다. 따라서 용이하게 사용하려면 직렬화(String화) 가 필요하다

 

 

Local Storage 설정하는 방법

Session Storage

Session Storage

특징:

  • session 기간에만 데이터를 저장한다. 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다. (보안 측면에서 유리)
  • 5-10 MB의 저장 공간을 가진다
  • Session Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회가능)
  • 같은 주소의 URL의 창을 여러개 열어도 각각의 창은 별도의 Session Storage를 갖는다.

※ 일반적으로 HTTP Reqeust/Response 에서 말하는 Session과는 다른 개념이다.

Session Storage 설정하는 방법

 

Cookies

Cookies

특징:

  • expiration date는 각 데이터마다 설정된 기간동안으로 지정된다.
  • 4KB 이하의 저정공간을 가진다.
  • Server-Side에서 사용되는 데이터를 주로 저장한다.
  • 매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정 시)
  • HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다. (document.cookie 로 직접 실험가능)

Cookie 설정하는 방법

Summary

    1.  

'browser' 카테고리의 다른 글

크로스 브라우징  (0) 2021.08.21
자바스크립트 엔진(인터프리터)  (0) 2021.07.14
브라우저 렌더링  (0) 2021.07.14

+ Recent posts

티스토리툴바