pile·
프론트엔드·oliveyoung올리브영 테크블로그·

Web Worker로 이미지 처리 최적화하기

문제고해상도 모바일 이미지(4MB+) 처리 시 메인 스레드 블로킹과 iOS 브라우저 강제 종료가 발생해 사용자 경험이 저하됐다.
접근Web Worker Dedicated Worker 방식으로 이미지 디코딩·리사이징·포맷 변환을 별도 스레드에서 처리했다. OffscreenCanvas로 DOM 없이 메모리 효율적인 이미지 처리를 구현했다.
결과처리 시간 65% 감소(388ms → 137ms), 메인 스레드 블로킹 97% 감소(350ms → 8ms)를 달성해 UI 반응성을 크게 개선했다.
oliveyoung
올리브영 테크블로그 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2