웹 브라우저의 렌더링을 자세히 알아보자.

1. 그래서 렌더링이 뭔데?

이 바로 전 포스팅을 보면 렌더링에 관한 이야기가 많을것이다. 

렌더링이란 사용자가 특정 링크를 눌러 페이지 화면을 불러오는 행위를 말한다. 이는 준비된 화면을 불러오는것이 아닌 화면을 보여줄때마다 클라이언트가 서버로 데이터 요청을 보내 실시간으로 받아와 웹페이지를 새로 만들어준다. 이 과정이 렌더링 이라고 생각하면 된다. 

 

다들 인터넷이 느려 웹 페이지를 들어갈때 로딩이 오래 걸리는 경험을 한번쯤은 했을것이다 이 이유가 실시간으로 서버에 요청을 보내고 웹 페이지를 받아오는 과정에서 생기는 일 이라고 생각하면 된다.

 

텍스트를 나열하는것만으로는 이해가 어려울 수 있으니 직접 볼 수 있는 예시를 하나 들겠다 기본적으로 웹 브라우저들은 개발자를 위해 개발자 모드가 있다 F12를 눌러 확인할 수 있는데 아무페이지에서 F12를 누르고 페이지 새로고침을 해보자 

필자는 위 사진처럼 www.chrome.com 을 접속했다. 해당 주소를 검색하거나 새로고침을 하면 오른쪽 화면처럼 무언가 엄청 많이 불러오는것을 알 수 있다. 오른쪽 과정을 거쳐 우리가 보는 웹 페이지가 완성돼 사용자들이 볼 수 있도록 만들어지는 것 이다. 위의 과정이 불러오는 요소들이 많다면 페이지가 느려지게 되는 것이다. 하지만 일반 사용자들은 해당 사항을 잘 알 수 없고 페이지의 속도를 생각한다. 이 과정이 보통 0.5초에서 1초 정도로 사용자들은 불편함을 느끼지 못할 것 이다. 하지만 서버로 보내는 요청이 많다면 페이지들은 점차 느려지고 사용자들이 느려진 서비스들을 불편하게 생각한다. 그렇기에 우리는 렌더링이나 서버 통신을 효율적으로 하는 방법을 고려해야한다.

 

2. 그럼 렌더링을 효율적으로 하는 방법은 뭐야?

위의 1번 내용을 읽는다면 불러오는 파일이란게 뭐야 라고 생각 할 수 있다. 쉽게 말해 프론트엔드는 서버와 요청을 하고  요청을 보낸 파일들을 기반으로 클라이언트(웹)에 보여주는데 이 과정에서 불러오는 데이터의 양이 많다면 사용자들은 웹의 로딩시간이 길어져 답답하다고 느낄 수 있는것이다. 그렇기에 우리는 사용자가 다시 방문하거나 빠르고 편리한 웹을 위해 파일을 가볍게 만들거나 속도를 개선하는 과정이 효율적으로 렌더링을 하는 방식 이라고 생각하면 된다. 이러한 작은 속도가 별거 아닌것 같아도 수천만 수백만명이 동시에 사용하는 서비스라면 얘기가 다르기 때문에 큰 문제가 될 수 도 있다.

 

그렇다면 이 파일들을 불러오는 기준이 뭔데? 어떻게 속도를 개선해? 라는 의문점이 들 수 있다. 해당 내용들은 기본적으로

1. 텍스트의 폰트용량
2. 사이트에 들어가는 사진 이미지의 용량
3. 서비스 아이콘이나 벡터
4. 동영상이나 그 외 첨부파일의 용량

등을 고려한다.

 

점차 사용자들은 PC 화면보다 모바일을 더 많이 사용하여 이러한 문제를 더욱 신경써야한다 모바일은 PC보다 통신 속도가 많이 느리기에 PC 기준으로 불러오는 화면은 문제가 없지만 모바일로 웹 페이지를 들어서게 된다면 속도가 느려져 해당 문제를 위해 최적화가 필요한 것이다. 게다가 국내에서만 쓰는 웹이 아닌 해외 고객층을 타겟으로 한다면 이 속도는 눈에띄게 느려지기 때문에 더더욱 필요한 고민이자 문제이다. 

 

 

요약

오늘날 점차 인터넷세계가 발전하면서 프론트엔드 개발자들은 PC가 아닌 모바일을 고려하여 만드는 웹이 증가함에따라 데이터 통신량이 늘어나거나 불러오는 파일이 클경우 웹 페이지를 불러오는 속도가 느려져 해당 숙제를 풀어가는게 프론트엔드 개발자의 목적인 것 같다. 

1. 모든 브라우저는 처음 사이트에 방문할때 서버에 요청을 보내 해당 파일들을 불러와 웹 브라우저에 보여주는 역할을 한다.
2. 렌더링은 클라이언트에서 서버에 HTML, CSS, JS 파일등을 요구하며 해당 요구사항을 서버가 반환해 클라이언트에 보내준다.
3. 일반적인 웹사이트는 0.5초에서 1초 안에 내용을 읽어 화면을 그려낸다.
4. 웹 사이트의 렌더링(로딩속도)를 느리게 만드는건 서버에 요청을 보낸 파일이( 이미지나 폰트 첨부파일) 크기때문이다.
5. 그렇기에 프론트 개발자들은 해당 파일들을 경량화 하기 위해 많은 고민을 하며 코드를 작성해야한다.