BOOKS8 [웹 성능 최적화 기법]웹에서 가속을 끌어내는 방법 웹 브라우저 동작 이해 웹사이트 주소 입력 함으로써 서버로부터 웹페이지를 다운로드 한다. 도메인 서버와 통신하여 접속하려는 호스트의 IP를 찾는다. 해당 아이피를 가진 서버와 통신을 시도해 TCP연결을 맺는다. (HTTPS에서는 암호화된 연결을 생성하려는 협의단계 추가됨) 서버로부터 리소스를 다운로드해 이를 화면에 표현한다. 방문페이지 HTML을 서버에 요청해 다운로드 한다. HTM구문을 분석하면서 HTML에 참조된 CSS, 자바스크립트, 이미지, 폰트 등의 하위 리소스들을 차례로 다운로드 한다. 화면에 그리는 작업 절차 진행 (= 렌더링 경로) 브라우저 아키텍쳐 유저 인터페이스 사용자가 브라우저를 통해 상호작용 할 수 있도록 돕는다. 브라우저 주소 입력창, 북마크, 앞뒤버튼 등.. 기능을 가지고 있음 .. 2023. 4. 10. [웹 성능 최적화 기법]웹 사이트 개선 방법 1. HTTP요청 수 줄이기 일반적으로 브라우저는 DNS시스템으로 특정 도메인의 접속 IP를 알아내 접속하고 HTML파일을 먼저 응답 받은 후 HTML에 있는 CSS나 자바스크립트, 이미지등의 콘텐츠를 차례대로 호출한다. 브라우저가 HTML을 모두 해석하여 콘텐츠를 전부 받아오기까지 호출이 계속 진행됨 이 호출을 줄이는 방법을 찾아야한다. 방법1. 스크립트 파일 병합 편리한 유지보수를 위해 최소 기능 단위별로 소프트웨어 모듈을 나누어 개발하는 것을 제안한다. 이것을 모듈화라고 한다. 그러나 이런 모듈화는 HTTP요청 수를 증가시키므로 웹 성능에 부정적임. 따라서 기능단위로 모듈화된 파일을 하나로 합치고, 하나의 파이릉ㄹ 브라우저가 실행하는게 여러파일을 각각 호출하는 것과 동일한 결과를 만들면 HTTP요청.. 2023. 3. 1. [웹 성능 최적화 기법]웹 최적화 프런트엔드 최적화 방법 스크립트 병합하여 브라우저의 호출 개수를 줄임 스크립트 크기 최소화해 바이트 수를 줄임 스크립트 gzip으로 압축하여 전달 WebP등으로 브라우저 이미지 형식을 최적화 이미지 손실, 무손실 압축 cache-control응답 헤더를 통해 브라우저 캐시를 충실히 사용 도메인 수를 줄여 DNS조회를 최소화 DNS정보 미리 읽어오기 CSS 를 HTML상단에 자바스크립트를 HTML의 하단에 위치 시킴 페이지 미리 읽어오기 타사 스크립트가 웹 성능을 방해하지 않도록 조절 프로토콜 최적화 HTTP/HTTPS프로토콜 자체의 효과를 극대화 하면 웹 서버가 클라이언트에게 콘텐츠를 최대 속도와 최저 지연시간으로 전달 할 수 있다. TCP/IP 프로토콜 TCP/IP프로토콜의 일종인 HTTP를 사용해 콘.. 2023. 2. 26. [함수형 코딩] 불변성 유지하기 chapter 6~7 함수에 있는 동작을 불변형으로 만드는 방식 , 불편성의 원칙은 카피 온 라이트 라고 한다. 쓰기를 읽기로 바꾸는 것 카피-온-라이트 규칙 복사본 만들기 복사본 변경하기 복사본 리턴하기 이다. ex> 카피-온-라이트로 바꾸어보기(배열) //before var mailing_list=[]; function add_contact(email){ mailing_list.push(email); } function submit_form_handler(event){ var form = event.target; var email = form.elements["email"].value; add_contact(email); } //after var mailing_list=[]; function add_.. 2023. 1. 25. 이전 1 2 다음 반응형