목록브라우저 (3)

도리쓰에러쓰

[Front-end] 사이트의 렌더링 시간이 길어질 땐 어떤 것을 확인해봐야할까?

구글 개발자 도구 ▶ Lighthouse 에서 페이지 속도 측정을 하여 최적화 점수를 알아낼 수 있다. 페이지 로드되는 속도를 빠르게 하기 위해선 개발자가 할 수 있는 일은 무엇이 있을까? 1. Webpack 사용 1️⃣ 파일 용량 압축 2️⃣ 모듈 번들링을 통한 파일 개수 감소 2. Image Lazy Loading : 화면에 실제로 이미지가 보여져야할 때 이미지를 다운로드하여 CSS, JS보다도 먼저 다운로드하게 함. 3. Lazy Component import { lazy } from 'react'; const AvatarComponent = lazy(() => import('./AvatarComponent')); const DetailsComponent = () => ( ) - 첫화면에 보이지 않..
카테고리 없음 2022. 7. 20. 17:23
[Front-end] 주소창에 URL을 입력하면 어떤 일이 생길까?

밑줄 친 단어는 Dictionary를 확인하세요 ! 💡 Dictionary 1. DNS(Domain Name System) - 웹사이트의 IP 주소와 URL을 연결해주는 시스템 - 사용자가 외우기 힘든 IP 주소 대신 URL로 쉽게 사이트 주소를 찾을 수 있도록 도와준다. - 인터넷 전화번호부와 같다. 2. DNS(Domain Name Server) 서버 - 할당된 도메인 영역에 대한 정보를 가지고 있는 서버 - 주로 도메인을 IP 주소로 변환한다. 3. DNS 리커서(DNS Recursor) - 인터넷의 다른 DNS 서버에 답변을 요청하여 의도된 도메인 이름의 적절한 IP 주소를 찾는 일을 한다. 4. DNS 룩업(Lookup) - DNS 서버에서 인터넷 도메인 이름을 사용해 IP주소를 알아내는 과정 ..
Front-end 2022. 7. 15. 16:11
[Front-end] 웹 브라우저에서의 렌더링 과정

1. 브라우저란? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 유저가 선택한 자원을 서버로부터 받아와 유저에게 보여준다. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들은 렌더링 과정을 통해 유저에게 보여준다. 2. 브라우저 렌더링 과정 1️⃣ Parsing단계 :: HTML 파일과 CSS 파일을 파싱하여 각각 Tree를 만든다. - HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성 - 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행 2️⃣ Style단계 :: 두 Tree를 결합하여 Ren..
Front-end 2022. 7. 13. 23:58
Prev 1 Next