728x90 분류 전체보기139 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. Geometries Geometries 도형의 거리, 모양, 크기 및 상대 위차와 같은 공간의 속성과 관련된 수학의 한 분야이다. 물리적 세계를 모델링하기 위해 개발된 기하학은 거의 모든 과학과 예술, 건축 및 그래픽 과 관련된 기타 활동에 적용된다. Three.js 에는 일반적인 도형을 만들기 위한 많은 클래스가 있다 그중에서 3가지 Geometry 살펴볼 생각이다. BoxGeometry BoxGeometry는 주어진 '너비', '높이', '깊이'가 있는 직육면체의 기하학 클래스이다. 생성 시 각 모서리가 축 중 하나와 평행한 상태에서 원점의 중심에 배치된다. BoxGeometry(width : Float, height : Float, depth : Float, widthSegm.. 2023. 7. 25. 이전 1 2 3 4 5 6 ··· 24 다음 728x90
