Three.js는 WebGL을 통해 JavaScript가 GPU를 작동하고 브라우저 측에서 진정한 3D를 구현할 수 있게 해주는 훌륭한 오픈 소스 WebGL 라이브러리입니다. 하지만 이 기술은 아직 개발 단계이고 정보가 극히 부족합니다. 매니아들은 기본적으로 Demo 소스 코드와 Three.js 자체의 소스 코드를 통해 배워야 합니다.
0. 소개
안녕하세요, 좋은 코드를 작성하는 방법에 대한 첫 글입니다. 많은 개발자들처럼 나도 직접 해 보면서 배웠지만 경험이 더 많은 다른 개발자들에게서도 배웠습니다. 나는 지난 몇 달 동안 캔버스 태그와 함께 많은 시간을 보냈고, 이 기간 동안 WebGL과 JavaScript에 대해 배운 모든 작은 트릭을 적어 보는 것이 흥미로울 것이라고 생각했습니다. 일부는 매우 구체적이고 일부는 매우 일반적입니다.
1. 최대한 빨리 프로토타입을 작성하세요.
간단하게 시작해 보세요. 이제 훌륭한 아이디어가 생겼으므로 프로그램의 가장 복잡한 부분의 프로토타입을 빠르게 작성하여 기술이 아이디어를 구현할 수 있는지 확인해야 합니다. WebGL은 그래픽 카드의 GPU를 직접 조작할 수 있기 때문에 매우 강력하지만, 그래픽 카드의 내부 컴퓨팅에 비해 효율성이 훨씬 떨어지는 JavaScript를 통해 그래픽 카드에 액세스해야 한다는 점을 잊지 마십시오. 사실, 당신의 천재적인 아이디어는 이처럼 단순한 것에 의해 좌절될 가능성이 높습니다.
2. 3D 처리를 위해 THREE.JS를 사용하세요
저도 친구인 하킴처럼 우리가 사용하는 기술의 낮은 수준의 세부 사항을 완전히 이해하고 있습니다. 표면 아래에 무엇이 있는지 이해하는 것이 중요하지만 three.js를 사용하면 많은 수고를 덜 수 있습니다. Canvas, WebGL, SVG와 함께 사용할 수 있으며, 필요에 맞는 방법을 찾아야 합니다.
3. SetInterval을 피하세요
이것은 JavaScript를 사용하여 애니메이션을 만드는 모든 사람에게 중요한 사항입니다. 왜? 20밀리초마다 실행되도록 함수를 설정하고 이 함수를 실행하는 데 20밀리초 이상이 걸리면 20ms 후에 브라우저는 신경 쓰지 않고 다음 실행을 직접 시작한다고 가정합니다. 최소한 SetTimeout을 사용하여 함수가 실행된 후 다시 실행할 수 있습니다.
사실 더 현대적이지만 아직 완성되지 않은 requestAnimationFrame이라는 함수가 있는데, 정말 훌륭합니다. 이는 탭이 포커스를 잃으면 더 이상 실행되지 않는다는 점을 제외하면 setTimeOut 함수와 매우 유사합니다. 이제 이 함수는 여전히 브라우저에 종속되며 표준은 나중에 변경될 수 있습니다. 더 많은 정보를 원하시면 Paul Irish의 블로그를 방문해 보세요.
4. 역순 루프 사용
이것은 루프를 더 빠르게 만들 수 있는 작은 트릭입니다. 역순을 사용하고 while 루프를 사용하십시오. 예를 들어, 다음 루프는 다음과 같습니다.
for(var a = 0; a < arr.length; a ) {
// 뭔가를 수행하세요
}
다음 루프만큼 효율적이지 않습니다.
// 배열 arr이 존재한다고 가정
var aLength = arr. length;
while(aLength --) {
// 뭔가를 하세요
}
실행 효율성은 주로 무엇을 하느냐에 달려 있기 때문에 오버헤드를 많이 절약할 수는 없습니다. 루프 본문에서 수행하십시오. 그러나 프로그램의 불필요한 오버헤드를 마지막 바이트까지 줄이고 싶다면 후자의 루프가 확실히 승리할 것입니다.
솔직히 프로그램 실행 효율성에 영향을 미치는 주요 요인은 어레이 캐시의 길이입니다. JSPerf를 확인하여 이에 대한 내용과 JavaScript 성능에 영향을 미치는 기타 요소에 대해 알아볼 수 있습니다.
5. 텍스처 사용
WebGL에서 객체의 모든 세부 사항을 그리는 것이 매력적으로 보일 수 있지만 가능하다면 텍스처를 사용할 수 있는지 여부에 주의해야 합니다. 성능. 그림자나 흐림 효과와 같은 특정한 경우에는 텍스처를 사용해야 할 수도 있지만, 다른 경우에는 텍스처를 사용할 수 있는지 항상 주의해야 합니다. 6. 캐싱 사용
나는 내 실험에서 이것을 많이 시도했습니다. 프레임 루프에서는 변수, 개체 또는 기타 항목을 참조하지 않아야 합니다. 이러한 이유로 애니메이션을 렌더링할 때 빠르게 액세스할 수 있도록 모든 모델과 정점을 캐시하는 것이 좋습니다. 7. 비활성화 체크
저는 이 작은 코드 조각을 좋아해서 Canvas나 WebGL이 포함된 모든 페이지에 넣습니다. // DOM 요소의 마우스 선택 비활성화
document.onselectstart = function() {
return false
};
캔버스 컨트롤에서만 선택을 비활성화할 수도 있습니다. 이것은 캔버스가 전체 화면을 차지하는 프로젝트에서 사용하는 코드입니다.
8. JavaScript에서 CSS를 정의하지 마세요 요즘에는 특히 JQuery를 사용할 때 JavaScript에서 CSS를 정의하는 것이 너무 편리합니다.
// 이렇게 하지 마세요
$("#someid").css({
위치: '상대적',
높이: '30px',
너비: '300px',
배경색상: '#A020F0'
})
문제는 이렇게 하면 JavaScript 코드가 곧 다양한 유형의 CSS 정의로 채워지고 *.css 파일을 사용하여 CSS를 정의하므로 잠재적인 문제를 감지하기 어렵게 됩니다. 더 나은 접근 방식은 클래스를 사용하여 CSS를 모듈화하고 JavaScript에서 예측할 수 없는 CSS 클래스만 정의하는 것입니다.
9. 객체에 콜백 함수를 정의합니다. 제가 생각해낸 코드는 아니지만 너무 깔끔하고 아름답습니다. 사용할 콜백 함수가 많은 경우에는 다음과 같이 사용할 수 있습니다.
$("#someid").click(function() {
// 콜백 함수
// JQuery에서 false를 반환하면 메시지 전달과 릴리스가 방지됩니다. 기본 동작
return false;
});
또는 다음과 같이 코드의 다른 곳에 정의된 느슨한 함수를 콜백할 수도 있습니다.
$("#someid").click(mySuperFunction)
function mySuperFunction; (이벤트) {
// 여기서 많은 일을 합니다
return false
}
이 작업에는 몇 가지 문제가 있습니다. 첫 번째 코드에서는 익명 함수를 이벤트에 바인딩했으며 이벤트에서 함수 바인딩을 해제하기가 어렵습니다. 물론 이벤트의 모든 함수를 언로드할 수 있지만 여러 함수가 바인딩되어 있고 하나만 언로드하고 싶을 수도 있습니다. 두 번째 경우에는 함수 이름이 전역 변수 공간을 오염시키고 코드 유지 관리 가능성이 떨어집니다. 따라서 다음을 수행해 보십시오.
$( "#someid" ).click(callbacks.mySuperFunction);
// 모든 콜백 함수는 콜백 객체에 있습니다.
var callbacks = {
mySuperFunction:function(event) {
// 추가 작업
return false;
}
}
// 함수 바인딩 해제
$("#someid").unbind('click', callbacks.mySuperFunction);
이것은 깔끔하고 깨끗하며 위에서 언급한 두 가지 문제를 방지합니다.
10. 연결 삼항 연산자
이 내용은 Paul Irish의 "JQuery, 11 Things You Should Know"에서 전적으로 배웠습니다. 이것은 매우 유용하며 당신도 좋아할 것입니다. 우리는 종종 이렇게 합니다: // a의 값은 numberBasedOnA 할당
// a가 5보다 크면 200을 할당하고, 그렇지 않으면 38을 할당합니다.
var numberBasedOnA = a > 5 ? 200 : 38; >그런데 이렇게 하고 싶다면 예를 들어 값이 특정 값이면 어떻고, 값이 특정 값보다 크면 어떻고, 값이 더 크면 어떻습니까? 이 경우 연결된 삼항 연산자가 매우 유용합니다.
코드 복사
// 이렇게 하는 것보다 더 효율적입니다
// a >=15
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
