728x90 Front-End20 Three.js 렌더링 성능 최적화: 웹 3D 그래픽의 성능을 향상시키는 전략 소개 Three.js를 사용한 웹 3D 그래픽은 멋진 시각적 효과를 제공하지만, 렌더링 성능을 최적화하지 않으면 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 이 블로그 글에서는 웹 3D 그래픽 프로젝트에서 렌더링 성능을 향상시키기 위한 다양한 전략과 최적화 기술을 살펴봅니다. 1. 모델 최적화: 모델의 복잡성은 FPS에 가장 직접적인 영향을 미치는 요소 중 하나입니다. 모델이 더 복잡하면 렌더링 및 계산에 더 많은 시간이 소요될 수 있습니다. 따라서 모델의 복잡성을 최적화하고 필요하지 않는 세부 정보를 제거하는 것이 중요합니다. 또한 LOD를 사용하여 렌더링 중에 더 낮은 해상도 또는 단순화된 모델을 사용합니다. 이는 원격 물체 또는 화면에서 멀리 있는 물체의 경우에 성능을 향상시킬 수 있습니다. .. 2023. 11. 2. threejs scaling-performance threejs scaling-perfomance WebGL을 실행하는 것은 장치의 성능에 따라 상당히 비쌀 수 있다. 이를 완화하려면, 특히 약한 옵션을 포함하여 다양한 장치에서 애플리케이션을 사용할 수 있도록 하려면 성능 최적화를 살펴봐야 한다. 1. 주문형 렌더링 three.js 앱은 일반적으로 초당 60번 실행되는 게임 루프에서 실행된다. 이는 일반적으로 배터리를 가장 많이 소모하고 팬이 회전하게 만드는 원인이다.그러나 장면의 움직이는 부분이 정지되도록 허용되면 렌더링을 계속하는 것은 낭비가 된다 이러한 경우 필요할 때만 렌더링되는 주문형 렌더링을 선택할 수 있다 이렇게 하면 배터리가 절약되고 시끄러운 팬을 억제할 수 있다. 컬러 그레이딩 demand 옵션은 구성 요소 트리 전체에서 소품 변경이 감.. 2023. 10. 23. JavaScript 와 ECMAScript 의 탄생 JavaScript 와 ECMAScript 의 탄생 1. JavaScript 의 등장 1993. MOSAIC 최초로 널리 인기를 얻은 브라우저 1994. Netscape Navigator 마크 앤드리슨 Netscape Navigator 공개 마크 앤드리슨은 동적인 웹사이트 위한 스크립트 언어가 필요하다고 생각했다. 브랜든 아이크를 고용 1995. JS 탄생 브랜든 아이크는 여러가지 언어에서 아이디어를 얻어 시제품 완성 (JS) 약 10일 소요가 됐다. 2. 브라우저 전쟁과 ECMAScript 의 등장 1995~2001. 1차 브라우저 전쟁 1996년 3월 Netscape Navigator → JavaScript 공개 1996년 8월 IE → JScript 공개 적당히 JavaScript 호환되는 JScr.. 2023. 10. 21. 프론트엔드 성능 측정 및 최적화 프론트엔드 성능 측정 1. 프론트엔드에서의 성능이란? 웹 화면을 구현하고 서버로부터 데이터를 받아오는 과정에서 리소스들을 사용자들에게 빠르게 보여줄수 있는것 성능 == 속도 그러면 왜 프론트 엔드에서 성능은 중요할까? 성능이 중요한 이유 사용자 유지 사용자 경험 전환율 향상 비용 절감 결국 웹사이트의 성능이 좋지않으면 사용자가 떠나게된다. 페이지 로드시간이 길 경우 페이지 로드 시간 1~3초 는 이타율이 32% 증가 페이지 로드시간이 개선될 경우 핀터레스트는 대기시간 40% 줄였을때 엔진 트래픽 가입수 15% 증가 Vodafone 은 LCP를 31% 개선하여 8% 더 많은 판매를 달성 야후! 은 CLS를 수정하여 불량 페이지가 98% 감소하고 세션당 페이지 조회수가 15% 증가 AliExpress는 CL.. 2023. 10. 14. 자바스크립트 메모리 관리 자바스크립트 메모리 관리 1. 메모리 생명주기 메모리 할당 - 변수, 함수, 객체 등을 만들때 메모리를 할당한다. 메모리 사용 - 변수를 읽거나 쓸때 할당된 메모리를 사용한다. 메모리 해제 - 더 이상 필요가 없어지면 메모리에서 해체한다. C언어 같은경우 메모리 할당을 malloc() , 메모리 해제를 free() 통해서 관리하지만 자바스크립트 엔진에서는 이과정을 모두 해주고 있다 2. 힙과 스택 1. 원시값인 경우 고정된 정적인 메모리를 할당 고정된 양의 메모리를 할당하기 때문에 원시값들의 크기에 제한이 있다. 2. 참조값인 경우 참조값이 필요한 만큼 메모리를 할당 동적 메모리 할당한다. 3. 주소값인 경우 주소값인 경우 스택에 저장 변수의 스코프, 실행 컨텍스트, 렉시컬 환경과도 관련있다. 3. 가비.. 2023. 10. 3. React 렌더링 React 렌더링 1. 렌더링 이란? React 애플리케이션은 컴포넌트라고 불리는 작은 조각들로 구성됩니다. 각 컴포넌트는 상태(State)와 속성(Properties)을 기반으로 UI를 렌더링하게 된다. 렌더링은 상태나 속성이 변경될 때 해당 컴포넌트를 갱신하고, 변경된 내용을 화면에 반영하는 프로세스를 포함한다. 함수 function MyComponent() { return ( Hello, Virtual DOM! This is a virtual DOM example. ); } 리액트 함수 문법으로 컴포넌트를 작성을 한다 VirtualDOM(객체) const virtualDOM = { type: 'div', props: { id: 'myDiv', className: 'container', childre.. 2023. 9. 23. 이전 1 2 3 4 다음 728x90
