목차 💡 터치 및 휠 이벤트 리스너는 페이지 성능에 어떤 영향을 줍니까?💡 스크롤 성능을 향상시키기 위해 수동 리스너를 구현하는 방법은 무엇입니까?   패시브 이벤트 리스너를 이해하기 위해서는 몇 가지 개념을 알아야 합니다.  ● 스크롤 성능과 사용자 경험 웹 페이지에서의 스크롤 성능은 사용자가 웹 사이트를 원활하게 탐색하는 데 중요한 역할을 합니다. 부드럽고 빠른 스크롤은 사용자가 웹 페이지를 쾌적하게 이용할 수 있도록 도와줍니다. ● 터치 및 휠 이벤트 리스너 웹 페이지는 사용자의 터치 (스마트폰이나 태블릿에서 손가락으로 스크롤) 및 휠 (마우스 휠로 스크롤) 입력을 감지하고 처리하는 코드를 가지고 있습니다. 이것을 이벤트 리스너라고 부릅니다. ● 자바스크립트와 메인 스레드 웹 페이지의 동작은 J..

목차 💡 Third-party 코드는 페이지 성능에 어떤 영향을 줍니까?💡 Third-party  코드의 영향을 줄이는 방법은 무엇입니까?  Third-party 코드는 광고, 분석 서비스 및 기타 요소로 구성되어 있으며, 이들은 URL의 도메인과 다른 도메인에서 제공됩니다. 이러한 자원들은 종종 웹 성능 저하의 원인이 됩니다. 왜냐하면 이들은 메인 스레드를 차단하거나 다른 작업을 수행하는 것을 방해하는 스크립트를 포함할 수 있기 때문입니다. 또한, 느린 서버 응답 시간, 느린 DNS 조회, 서버 응답 오류 등 여러 가지 이유로 인해 페이지가 느려질 수 있으며, 이는 페이지 성능에 영향을 미칠 수 있습니다. 웹 성능을 위해 웹사이트 코드를 검토하여 Third-party 스크립트의 영향을 최소화하는 것..

목차 💡 중요 요청을 미리 로드하면 페이지 성능에 어떤 영향을 줍니까?💡 중요 요청을 미리 로드하는 방법은 무엇입니까?   중요한 요청을 미리 로드 하는 것은 웹 사이트를 빠르게 로드하기 위해 필요한 중요한 자원들을 사전에 미리 로드하는 것을 의미합니다. 이렇게 하면 사용자가 웹 페이지를 방문할 때 필요한 자원들이 미리 다운로드되어 빠르게 화면에 표시되므로 웹 페이지가 빠르게 로드되는 것처럼 느껴집니다. CSS 및 JavaScript 파일과 같은 중요한 리소스를 사전로드함으로써 브라우저는 이를 미리 가져와 지연 시간을 줄이고 전반적인 성능을 향상시킬 수 있습니다.  를 사용하면 중요한 요청을 높은 우선순위로 처리하여 페이지 로드 속도를 높일 수 있습니다. 이는 중요 자원이 때로는 페이지 로드 과정의 ..

목차 💡 긴 JavaScript 실행 시간은 페이지 성능에 어떤 영향을 줍니까?💡 JavaScript 실행 시간을 줄이는 방법은 무엇입니까?    JavaScript는 웹 페이지에 동적 기능을 추가하는 데 중요한 역할을 합니다. 그러나 JavaScript 코드가 긴 실행 시간을 가지면 웹 페이지의로딩과 응답 속도에 영향을 미칠 수 있습니다. 따라서 JavaScript 실행 시간을 단축하는 것은 중요합니다. 일반적으로 JavaScript 실행 시간을 줄이는 것은 JavaScript 파일을 구문 분석, 컴파일 및 실행하는 데 소요되는 시간을 감소시키는 것을 의미합니다. 기본적으로 JavaScript는 메인 스레드에서 실행되며, 이 때 브라우저는 다른 작업을 실행할 수 없습니다. JavaScript 실행 ..

목차 💡 필요한 원본에 미리 연결하면 페이지 성능에 어떤 영향을 줍니까?💡 Preconnect를 유의해서 사용하세요💡  필요한 원본에 미리 연결을 설정하는 방법은 무엇입니까?   preconnect를 사용하면 브라우저가 중요한 타사 연결을 우선순위로 처리하고, 타사 요청이 오래 걸릴 수 있는 경우 페이지 로드 속도를 높일 수 있습니다. 외부 리소스(예: Facebook 또는 YouTube 임베드)는 도메인에서 가져오지 않기 때문에 동작을 예측하기 어려울 수 있으며 사용자의 페이지 경험에 부정적인 영향을 미칠 수 있습니다. 웹 페이지에서 사용되는 외부 리소스(예: 이미지, 스크립트, 스타일 시트)가 필요할 때 그 리소스가 있는 원본 서버로 사전에 연결을 설정하는 것을 의미합니다. 이렇게 하면 웹 페이..

목차 💡 "third-party resources"란 무엇인가요?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드하는 것이 페이지 성능에 어떤 영향을 미치나요?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드하는 방법은 무엇입니까?💡 Facades를 사용하여 외부(Third-party) 리소스를 지연 로드에 대한 주의사항은 무엇입니까?    💡 "third-party resources"란 무엇인가요?"third-party resources"는 웹 페이지를 구성하는 데 필요한 자원 중에서 웹 페이지가 직접 제어할 수 없는 외부 서비스나 웹사이트에서 가져오는 자원을 의미합니다. 이러한 자원은 주로 광고, 웹 분석 도구, 소셜 미디어 위젯 등과 같..

목차 💡 구현💡 중요한 사항💡 작동 예시💡 이것은 정말로 더 많은 노력을 기울일 가치가 있습니까?💡 이제 모듈을 ES2015로 게시하기 시작할 때입니다.💡 결론   요즘 대부분의 웹 개발자들이 최신 언어 기능인 async/await, 클래스, 화살표 함수 등을 사용하여 JavaScript를 작성하는 것을 좋아한다는 것을 알게 되었습니다. 하지만 모든 현대 브라우저가 ES2015+ 코드를 실행하고 방금 언급한 기능들을 네이티브로 지원하지만, 대부분의 개발자들은 여전히 코드를 ES5로 트랜스파일하고 폴리필과 번들링하여 오래된 브라우저를 사용하는 소수의 사용자를 수용하고 있습니다. 이런 상황은 좀 불편합니다. 이상적인 세상에서는 필요없는 코드를 배포하지 않아도 될 것입니다.  새로운 JavaScri..