성능
-
동시성, 병렬, 비동기, 논블럭킹과 컨셉들컴퓨터 2022. 6. 3. 11:44
위 용어들은 모두 빠르게 실행하거나, 빠르게 느끼도록 만들때 주로 사용하는 용어들이다. 많은 사람들이 이미 적어놨으나 저도 한번 동참해보겠습니다. 차이가 있다면 되도록 이미지를 많이 사용하여 직관적으로 이해하기 쉽게 만들어보는게 목표. 좋은 이미지를 찾는데는 항상 많은 시간이 소요된다. 또한 풍부한 레퍼런스와 넓은 범위를 다루려 노력했다. 1. 용어 동시성 / 병렬 동시성: 동시에 작업이 실행된 것처럼 보이면 되며(논리적) 병렬: 실제로 동시에 작업이 실행되어야 한다(물리적) 따라서 싱글코어에서 시분할로 나누어 일을 처리하더라도 동시성을 지원한다고 말 할 수 있다. 반대로 싱글코어에서 SIMD를 이용하면 병렬로 작업을 실행할 수 있다. [SIMD (Single Instruction Multiple Dat..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드프로그래밍/Web 2021. 3. 5. 12:32
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드(현재) 5. 빌드 빌드 성능 최적화를 앞서, 우리가 사용하고 있는 툴들의 종류가 무엇이 있는지 생각해보자. 로컬에서 자바스크립트 코드 자체를 실행하기 위한 Node.js 패키지 설치와 의존성 관리를 위한 NPM 모노레포 관리를 위한 Lerna 자바스크립트를 정적..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 4. 로드 후 동일한 페이지, 다른 페이지 4.1 요청줄이기 다른 페이지로 넘어갈 때 요청량을 줄일 수 있는 여러 기법들이 존재한다. [Offline First] 4.1.1 클라이언트 저장소들 비교와 활용 개요 로드 후, 브라우저에 정보를 저장하는 것은 ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 3.3 UX 트릭 객관적인 성능이 올라가는 것이 아니라 사용자가 빠르다고 느낄 수 있게 만드는 트릭들. UX는 글로만 설명하기 힘든 부분이 많기 때문에 가급적 GIF나 사진자료 통해 직관적으로 이해할 수 있도록 힘을 썼다. 초반에 나오는 것들은 많이들 접..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 3. Layout 및 렌더링 Layout 발생 빈도 최소화 및 비용 최소화와 CPU 처리 효율화, UX 트릭으로 나뉜다. 레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow란 글이 잘 설명해준다. 3.1 발생 빈도 ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리프로그래밍/Web 2020. 4. 19. 15:54
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 2. 파싱 및 렌더링 트리 이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1 배치순서 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드프로그래밍/Web 2020. 4. 4. 09:36
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리[스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드(현재)[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링[스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭[스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후[스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드1. 다운로드사용자(End-user) 응답시간의 80%는 초기 로딩부분에서 소요된다. 그 중 대부분의 시간은 모든 페이지 구성요소(images, syltesheets, scripts 등)의 다운로드에 소요된다.따라서 다운로드 관련 시간을 아끼는 것은 중요하다. 크게 ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리프로그래밍/Web 2020. 3. 17. 15:56
웹으로 전향한지 얼마 안됐는데 그동안 경험상 전반적 구조 파악에는 퍼포먼스 개선하는게 최고라 적게되었습니다. 이 문서는 완전히 완성된 상태가 아니라 시간이 나면 업데이트 중. 혹시 이외에도 재미있는 팁을 아시는 분이 있다면 댓글로 알려주세요. 모바일이나 기타 프로그래밍/전공 경험과 지식을 살려봤습니다. 제 블로그 글들을 보면 알겠지만 상당히 장문으로 이루어져 있지만.. 이건 역대급으로 심하게 길다보니 머릿글을 ㅎㅎ 조금 과장해서 책 한권;; 블로그 스킨을 React 기반으로 클린룸 구현해볼까 생각 중이라 더 열심히 하고 있습니다. 타입스크립트, PWA, 웹컴포넌트 등 파워풀한 것을 모두 넣어서 가볍고 빠르고 생산성까지 잡으며 아름답게 만드는 것이 목표 ㅎㅎ 가끔씩 업데이트하다보니 렉이 심해서 나누었습니다..