💻웹(Web)

프론트엔드 성능 최적화

stonesy 2024. 4. 12. 00:24

728x90

프론트엔드 성능 최적화 방법을 로딩 최적화, 렌더링 최적화 관점에서 정리해보았다.

📖로딩 최적화 방법

🔎화면이 그려지기까지 과정

domContentLoaded

domContentEventLoaded는 웹 페이지의 DOM 트리가 완전히 로드되고 파싱되었을 때 발생하는 이벤트이다. domContentEventLoaded 이벤트는 이미지, 스타일시트 및 하위 프레임 로딩을 기다리지 않고 발생하며, 웹 페이지의 초기화 및 설정 작업을 수행하기 적절한 시점이다.

load

load 이벤트는 웹 페이지와 그 안에 있는 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드되었을 때 발생한다. 페이지가 완전히 로드된 후에만 실행되어야 하는 작업이 있는 경우에 유용하다.

🔎블록 리소스

블록 리소스란 웹 페이지의 렌더링을 차단하고 페이지의 로드 속도를 느리게 만드는 리소스를 말한다. 주로 CSS, JavaScript 파일, 이미지 폰트 등이 해당된다.

✏️블록 리소스 최적화 방법

JavaScript 로드 시점 초적화
- <body> 태그 하단 배치: HTML 파싱이 먼저 이루어지고, 자바스크립트 로딩이 마지막에 이루어져 페이지 로딩 시간을 단축할 수 있다.
- async와 defer 사용: <head> 태그 내에 스크립트를 위치시키되, async나 defer 속성을 사용하여 로딩 방식을 최적화한다. async는 스크립트가 비동기적으로 로드되며, defer는 HTML 파싱 후, DOMContentLoaded 이벤트 바로 전에 실행된다.
CSS 파일과 인라인 스타일
- 인라인 스타일 사용: 외부 스타일시트 대신 HTML 문서 내에 직접 CSS를 포함시키면 HTTP 요청 수를 줄여 로딩 시간을 단축할 수 있습니다. 외부 스타일 시트(@import)를 사용하는 경우 브라우저는 스타일시트를 병렬로 다운로드할 수 업식 때문에 로드 시간이 늘어날 수 있다.
- 미디어 쿼리 사용: 특정 조건에서만 필요한 CSS가 있을 때 미디어 쿼리를 사용하면 불필요한 블로킹을 방지할 수 있다. 예를 들어, 다음과 같이 페이지를 인쇄하거나(print.css) 화면이 세로 모드일 때(portrait.css) 사용하는 CSS가 있을 때, 해당 스타일을 사용하는 경우에만 로드할 수 있도록 <script> 태그에 media 속성을 명시하여 사용한다.(출처: 성능 최적화 | TOAST UI :: Make Your Web Delicious! )

🔎리소스 요청 수 줄이기: 이미지 스프라이트

이미지 스프라이트는 여러 개의 이미지를 하나로 만들고, CSS background-position 속성을 사용해 부분 이미지를 사용하는 방법이다. 이미지 스프라이트를 사용하는 경우 리소스 요청 수가 줄어들어 로딩 시간을 빠르게 할 수 있다.

그 밖에도 CSS, 자바스크립트 번들하기 / 내부 스타일시트 사용하기 등으로 리소스 요청 수를 줄일 수 있다.

📖렌더링 최적화 방법

프론트엔드에서 최적화된 렌더링 기법은 사용자 경험을 향상시키고 웹 사이트의 이탈률을 낮추는 핵심적인 역할을 수행하므로 중요하다. 특히, 대용량 데이터 처리를 위한 성능 최적화 방법으로는 가상 스크롤링, 페이지네이션 및 무한 스크롤 구현이 있다.

🔎대용량 데이터가 웹 페이지에 그려지기까지의 과정: 로드와 렌더링

로드

로드란 웹 페이지의 리소스(HTML, CSS, JavaScript 파일 등)이 서버로부터 사용자의 브라우저로 전송되는 과정이다. 로드 과정이 완료되어야 웹 페이지가 정상적으로 렌더링될 수 있다.

렌더링

렌더링은 로드된 웹 페이지의 리소스를 사용하여 실제로 화면을 페이지에 그리는 과정이다.

⇒ 가상 스크롤링, 페이지네이션 및 무한 스크롤 구현은 렌더링 성능 최적화 방법이다.

🔎Virtual Sroll

Virtual Scroll은 많은 대용량 데이터에서 사용자가 볼 수 있는 영역내에서 볼 수 있을만큼의 데이터만 표시하여 DOM을 그리는데 사용되는 리소스를 줄이는 기법입이다. 전체 데이터를 렌더링하는 것이 아니라 현재 사용자가 보고 있는 화면의 스크롤 위치를 계산하여 해당 위치에 맞는 데이터만 그려주는 원리다.

현재 사용자가 보고 있는 화면의 데이터만 표시하기 위해서 scroll 이벤트를 적용해야 한다. 다음과 같은 구조를 활용하자.

useEffect(()=>{
	//...로직 수행
	return () =>{
		//컴포넌트 언마운트 시 실행될 로직
	}
},[]); //의존성 배열이 비어 있으므로, 컴포넌트가 마운트될 때만 실행된다.

※코드

import React from 'react';
import { useState, useEffect } from 'react';
import styles from "./Search.module.css";

function Search2() {
  const [searchItems, setSearchItems] = useState([]);
  const [scrollPos, setScorllPos] = useState(0);
  const windowHeight = window.innerHeight;
  const CONTENT_HEIGHT = 400;
  const NODE_PADDING = 2;

  function onScroll(){
    setScorllPos(window.scrollY);
  }

  useEffect(()=>{
    fetch('요청URL')
    .then((res)=>res.json())
    .then((data)=>setSearchItems(data?.collection?.items));
  
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    }
  },[]);

  return ( 
    <div>
      <h1>Hello, World!</h1>
      {searchItems.map((searchItem, i)=>(
        <div className={styles.card} key={i}>
          {scrollPos < CONTENT_HEIGHT * (i+1+NODE_PADDING) 
          && (scrollPos + windowHeight) > CONTENT_HEIGHT * (i-1-NODE_PADDING) ? 
          <div className={styles.imgBox}><img className={styles.cardImg} src={searchItem?.links?.[0]?.href} /></div> 
          : <div className={styles.imgBox}></div>}
          {scrollPos < CONTENT_HEIGHT * (i+1+NODE_PADDING) 
          && (scrollPos + windowHeight) > CONTENT_HEIGHT * (i-1-NODE_PADDING) ? 
          <div className={styles.contentBox}><p>{searchItem?.data[0]?.title}</p></div>
          : <div className={styles.contentBox}>null</div>}
        </div>
      ))}
    </div>
  );
}

export default Search2;

🔎무한스크롤

페이지네이션과 비교한 무한스크롤의 장점은 사용자 입장에서 추가 데이터를 보고 싶을 때 추가 행동을 할 필요가 없다는 점이다. 이는 상황에 따라 사용자 경험을 향상시킬 수 있다.

✏️기존 scorll 이벤트의 문제

무한스크롤을 구현하기 위해서는 virtual scroll과 마찬가지로 scroll 이벤트를 감지해야 한다. scroll 이벤트는 사용자의 스크롤에 따라 짧은 시간에 무수히 많은 수의 이벤트가 동기적으로 발생하기 때문에 메인 스레드(Main Thread)에 영향을 준다. 한 페이지 내에 여러 scroll 이벤트(무한 스크롤, 광고 배너, 애니메이션 등)가 등록되어 있을 경우, 각 엘리먼트마다 이벤트가 등록되어 있기 때문에 사용자가 스크롤할 때마다 이를 감지하는 이벤트가 계속 호출된다. 이를 debounce와 throttle로 일부 개선할 수 있지만, 여전히 성능 부하가 있을 수 있다.

또한 특정 지점을 관찰하기 위해서는 getBoundingClientRect()함수를 사용해야 하는데, 이 함수는 reflow를 발생시킬 수 있다. reflow란 브라우저가 웹 페이지의 일부 또는 전체를 다시 그려야 하는 경우 발생하며, 브라우저가 문서 내 요소들의 위치와 기하학적 형태를 다시 계산하여 레이아웃이나 콘텐츠의 변경에 맞게 조정하는 과정을 의미한다.

✏️Intersection Observer API

Intersection Observer API를 사용하여 위와 같은 문제를 해결할 수 있다. Intersecion Observer API는 비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 변경 사항을 관찰할 수 있다. 또한 IntersectionObserverEntry 속성을 활용해 getBoundingClientRect()를 호출한 것과 같은 결과를 알 수 있기 때문에 따로 getBoundingClientRect() 함수를 호출할 필요가 없어 리플로우 현상을 방지할 수 있다.

const intersectionObserver = new IntersectionObserver(callback[, options])

※코드

import React from 'react';
import { useState, useEffect } from 'react';
import styles from "./Search.module.css";

function Search3() {
  const [searchItems, setSearchItems] = useState([]);
  const [page, setPage] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(()=>{
    console.log("page: ",page);
    fetch(`https://images-api.nasa.gov/search?q=apollo&page=${page}`)
    .then((res)=>res.json())
    .then((data)=>{
      setSearchItems((prevData)=>[...prevData, ...data?.collection?.items]);
      setIsLoading(false);
    });
  },[page]);

  const handleObserver = (entries) => {
    const target = entries[0];
    if (target.isIntersecting && !isLoading) {
      setPage((prevPage) => prevPage + 1);
      setIsLoading(true);
    }
  };

  useEffect(()=>{
    const observer = new IntersectionObserver(handleObserver, {
      threshold: 0, //  Intersection Observer의 옵션, 0일 때는 교차점이 한 번만 발생해도 실행, 1은 모든 영역이 교차해야 콜백 함수가 실행.
    });
    // 최하단 요소를 관찰 대상으로 지정함
    const observerTarget = document.getElementById("observer");
    // 관찰 시작
    if (observerTarget) {
      observer.observe(observerTarget);
    }
  },[]);

  return ( 
    <div>
      <h1>Hello, World!</h1>
      {searchItems.map((searchItem, i)=>(
        <div className={styles.card} key={i}>
          <div className={styles.imgBox}><img className={styles.cardImg} src={searchItem?.links?.[0]?.href} /></div> 
          <div className={styles.contentBox}><p>{searchItem?.data[0]?.title}</p></div>
        </div>
      ))}
      <div id="observer" style={{ backgroundColor:"pink", height: "10px" }}></div>
    </div>
  );
}

export default Search3;

728x90

'💻웹(Web)' 카테고리의 다른 글

[React]초기세팅 (0)	2024.07.18
MVC, MVVM, Flux 패턴 (1)	2024.07.15
[React]React Router (0)	2024.06.28
일반적으로 GET 요청에는 Request Body를 요청할 수 없다! (0)	2023.08.24
세션 기반 인증, 토큰 기반 인증, JWT를 통한 인증 절차(with Access Token, Refresh Token) (0)	2023.03.26

현재글프론트엔드 성능 최적화

https://github.com/seoyoung927

250x250

Today :
Yesterday :

stonesy

프론트엔드 성능 최적화

📖로딩 최적화 방법

🔎화면이 그려지기까지 과정

🔎블록 리소스

✏️블록 리소스 최적화 방법

🔎리소스 요청 수 줄이기: 이미지 스프라이트

📖렌더링 최적화 방법

🔎대용량 데이터가 웹 페이지에 그려지기까지의 과정: 로드와 렌더링

🔎Virtual Sroll

🔎무한스크롤

✏️기존 scorll 이벤트의 문제

✏️Intersection Observer API

'💻웹(Web)' 카테고리의 다른 글

'💻웹(Web)'의 다른글

티스토리툴바

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

프론트엔드 성능 최적화

📖로딩 최적화 방법

🔎화면이 그려지기까지 과정

🔎블록 리소스

✏️블록 리소스 최적화 방법

🔎리소스 요청 수 줄이기: 이미지 스프라이트

📖렌더링 최적화 방법

🔎대용량 데이터가 웹 페이지에 그려지기까지의 과정: 로드와 렌더링

🔎Virtual Sroll

🔎무한스크롤

✏️기존 scorll 이벤트의 문제

✏️Intersection Observer API

'💻웹(Web)' 카테고리의 다른 글

'💻웹(Web)'의 다른글

관련글

티스토리툴바