Blog-Around

JS - 웹 브라우저 실행시 일어나는 일

March 17, 2020

웹 브라우저 실행시 일어나는 일

브라우저에서 자바스크립트가 하는 일은 다음과 같다.

  1. 웹페이지의 Document 객체 제어 (DOM 이용)
  2. 웹페이지의 Window 객체 제어 및 브라우저 제어(Navigator,Location)
  3. 웹 페이지에서 발생하는 이벤트 처리
  4. HTTP를 이용한 통신 제어 (XMLHttpRequest,fetch)

웹 브라우저에서 자바스크립트 실행 순서:

html을 분석하고 표시하는 프로그램을 렌더링 엔진이라고 한다.(webKit,Blink,Gecko) 렌더링엔진은 다음과 같은 처리 과정을 거처 HTML 문서의 구문을 분석하고 DOM 트리를 구축한 후에 HTML 안에 지정된 자바스크립트 코드를 실행한다.

  1. 웹브라우저로 웹페이지를 열면 가장 먼저 Window 객체가 생성된다. Window객체는 웹페이지의 전역 객체로 웹 페이지와 탭마다 생성된다.
  2. Document 객체가 Window 객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM 트리의 구축을 시도한다. Document 객체는 readyState 프로퍼티를 가지고 있으며, 이 프로퍼티에는 HTML 문서의 해석 상태를 뜻하는 문자열이 저장된다. readyState 프로퍼티의 초깃값은 “loading” 이다. ( loading-> interactive-> complete )
  3. HTML 문서는 HTML 구문을 작성 순서에 따라 분석하며 DOM 요소와 텍스트 노드를 추가해 나간다.
  4. HTML 문서 안에 Script 요소가 있으면 Script 요소 안의 코드 또는 외부 파일에 저장된 코드의 구분을 분석한다. 만약 오류가 발생하지 않으면 그 시점에 실행한다. 그 부분을 실행 할땐 동기적으로 실행되어 다른 HTML이나, JS가 먼저 실행되지 않는다. (단 script테그의 async(비동기)와 defer(동기) 속성을 이용하면 동기적으로 스크립트를 실행할지, 비동기적으로 실행할지 선택 가능하다.)
  5. HTML 문서의 모든 내용을 읽은 후에 DOM 트리 구축을 완료하면 document.readyState가 interactive로 바뀐다.
  6. 웹 브라우저는 Document 객체에 Dom 트리 구축 완료를 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.
  7. img 등 요소를 읽어들인다.
  8. 이후 document.readyState 값이 complete로 바뀐다. 웹브라우저는 Window 객체를 상대로 load 이벤트를 발생시킨다.
  9. 이벤트를 수신하고, 이벤트 처리를 비동기로 호출한다.

여기서 생각해 볼 수 있는 점은

  1. 우리가 평소에 Window.onload에 이벤트 처리 함수와 초기화 함수를 등록해 주는 이유는 onload가 발생하기 전에는 외부 객체가 완전히 load되지 않았기 때문에 빈 객체를 참조 할 수 있기 때문이다.
  2. 만약 onload 이전인 DOMContentLoaded에 초기화 함수를 등록하면 사용자가 외부 객체(리소스)를 읽어오는 시간을 기다리기 전에 이벤트 수신이 가능하게 된다.

CSS 분석 순서:

이 작업또한 랜더링 엔진이 처리한다.

  1. style 요소 안에 작성된 CSS코드와 link 요소로 읽어들인 CSS코드를 CSS파서가 분석한다. 분석이 끝난 CSS코드는 스타일 규직으로 만들어 진다.
  2. HTML 코드로 만들어진 DOM 트리와 스타일 규칙을 바탕으로 렌더트리라는 또 다른 트리를 만든다. 렌더트리에는 표시해야 하는 요소만 저장되며 렌더트리에 저장된 요소에는 스타일 정보를 추가 한다.
  3. 렌더트리가 만들어진 후에는 DOM의 각 노드 위치와 크기를 결정한다.
  4. 마지막으로 DOM의 각 노드를 렌더 트리의 스타일 정보를 바탕으로 그린다.

위의 모든 과정은 HTML 문서를 읽어오는 과정에서 단계적으로 실행된다. 이 렌더 트리를 구축해서 배치하고 그리는 과정은 처음 리소스를 읽어 들일 때, 자바스크립트로 동적인 처리를 할 때, 사용자의 조작으로 HTML/CSS 코드가 바뀔때 마다 실행된다.

크로스 브라우징 대책

크로스 브라우징이란? : 오래된 웹 브라우저에서도 문제없이 웹페이지를 표시하고 같은 기능을 사용할 수 있도록 대응하는 것을 크로스 브라우징 대책이라고 한다.

  1. 기능성 테스트

    • 모든 웹 브라우저가 지원하지 않는 기능을 사용할 때, 해당 기능을 지원하는지 테스트 하는 것을 기능성 테스트라고 한다. 사용하려는 기능을 지원하지 않는 환경에서는 다른 코드로 교체해서 구현하기 위함이다. 예를 들어 addEventListener를 IE8에서는 지원하지 않는다. 그 대신에 attachEvent를 지원한다. 이때는 적당한 예외처리를 통해 addEventListener가 element에 있는지 if문을 통해 확인 하고, 없을 경우 attachEvent를 사용하는 식으로 코드를 짜야 한다.

  2. 브라우저 테스트

    • 특정 웹브라우저에만 국한된 버그에 대처할 때는 기능성 테스트를 할 수 없다. 해당 버전,OS 등에 대한 정보를 Navigator 를 이용해 확인한 후 처리한다.

  3. 라이브러리를 이용한 대응

    • 호환성 문제를 해결해 주는 라이브러리를 사용하면 호환성 분제를 신경쓰지 않고 코드를 작성할 수 있다. 예를 들어 JQuery를 사용하거나 canvas의 경우 excanvas.js등을 이용해 Canvas의 기능을 에뮬레이션 할 수 있다.

  4. 바벨을 이용해 이전 버전의 js 코드로 컴파일 하는 방법을 이용 할 수도 있다.

    웹 브라우저의 객체

웹브라우저에서 사용할 수 있는 객체

호스트객체: ECMAScript로 규정된 기본 객체 외에 JS 실행 환경에서 정의 된 객체 JS 프로그램은 웹 브라우저에 구현된 다향한 호스트 객체로 CSS와 HTML 문서를 동적으로 조작할 수 있음.

0.Window 객체

전역객체이며, 전역변수는 Window객체의 프로퍼티이다. 이 안에 대표적으로 Document 등의 객체가 있고, 브라우저를 조작하는데 핵심적인 객체이다. screen,document, location, navigator, history,event, console,window,self, parent, top, opener, frames[], closed, name, status, screenX,screenT, screenLeft,screenTop, innerHight, outerWidth, scrollX,scrollY, pageXOffset,pageYOffset 등의 객체가 있다.

1.Location 객체

Location 객체는 Window.location로 참조할 수 있다. Location 객ㅊ체는 창에 표시되는 분서의 URL을 관리한다.

ex) 1.

location.href="http://github.com";
location.assign("http://github.com");

2.

location.replace('http://github.com');// 이전 위치기록을 지우고 그 자리에 url을 넣는다. 뒤로가기가 불가능하다.
  1. location.serch="some data";// URL 끝에 쿼리를 붙여 보낸다.

    2. History 객체

    History 객체는 창의 웹페이지 열람 이력을 관리 한다. History 객체는 window.history 또는 history로 참조할 수 있다. ex)

    history.back();//웹페이지 열람 이력을 하나 되돌아간다.
history.forward();//웹페이지 열람이력을 하나 진행한다.
history.go(-1);/웹페이지 열람이력을 1개 되돌아 간다.
history.pushState(state,title,"page.html");//새로고침 하지 않고 열람이력을 추가한다.

    3. Navigator 객체

    Navigator 객체는 스크립트가 실행중인 웹 브라우저 등의 애플리케이션 정보를 관리한다. Navigator 객체는 window.navigator 또는 navigator로 참조가능 

    navigator.geolocation.getCurrentPosition(
(c)=>{console.log(c)},()=>{},{}
);// 현제 위치

    4. Screen 객체

    Screen 객체는 화면 크기와 색상등의 정보를 관리 한다. Screen 객체는 window.screen 또는 screen 으로 참조할 수 있다. 

    screen.width;//1440
screen.height;//900
screen.colorDepth;//24
screen.pixelDepth;//24

    5. Document 객체

    document 객체는 창에 표시되고 있는 웹페이지를 관리한다. 이 객체로 웹페이지의 내용물인 DOM트리를 읽거나 쓸 수 있다. Document 객체는 window.document 또는 document 로 참조 할 수 있다. Document 객체는 클라이언트 단에서 가장 중요한 객체이다. cookie, domain, lastModified, title, URL, close(), open()

    document.write("asd");
document.write("asd");
document.write("asdasd");
document.write("<h1>asdasd<h1>");

    6. 창 제어

    웹브라우저는 일반적으로 여러개의 창과 탭을 표시한다. 각각의 창과 탭은 별도의 브라우징 컨텍스트를 제공한다. 그리고 각각의 컨텍스트는 각각의 Window 객체를 가진다.

각 브라우징 컨텍스트는 상호간에 독립적이어 다른 브라우징 컨텍스트에 간섭할 수 없다. 하지만 브라우징 컨텍스트에서 새로운 브라우징 컨텍스트를 열면 자식브라우징 컨텍스트와 상호작용이 가능하다.

창 여닫기 

let w=open(url,title,option);// 해당 url을 연다.
console.log(w)//dnl url의 window  이 윈도우로 상호작용가능
w.close()//w를 닫는다. 
w.moveBy(100,-10);//x=100,y=-10만큼 w창을 움직인다.
w.moveBy(100,-10);
w.resizeBy(10,20)// x=10px y=20px 만큼 키운다.
w.resizeTo(x,y)//x,y 으로 넓이 높이를 설정한다.
w.scrollBy(0,100)//아래쪽으로 100px만큼 스크롤한다.
w.scrollTo(0)//시작위치로 이동한다.

다른창 참조하기

let w=open("newpage.html","new page","width=400, height=300";
w.document.body.style.backgroundColor='green';//자식창을 녹색으로 만듦
opener.document.body.style.backgorundColor='red';//부모창의 배경을 빨간색으로 만든다.

- TIP CORS

동일출처 정책 - 웹페이지 위에서 동작하는 프로그램의 출처와 그 프로그램이 읽으로겨 시도하는데이터가 서로 다를경우 리소스간의 상호작용을 제한한다.

같은 출처가 되기 위해서는

  1. 프로토콜이 같다.
  2. 포트 번호가 같다.
  3. 호스트 이름이 같다.

Written by Juyeong Byeong . github