<목차>
- script태그
- 비동기 함수를 동시에 병렬로 호출하기
10. script태그
- 웹페이지의 로딩 성능을 최적화 시키기 위함
- 현대적인 접근 방식으로
<script>태그에 asynce나 defer 속성 사용가능
-
페이지 로딩 속도 개선: 브라우저는 HTML 문서를 위에서 아래로 순차적으로 파싱하고 렌더링합니다.
<script>태그가 문서 상단에 있을 경우, 스크립트 파일을 다운로드하고 실행하는 동안 HTML 파싱이 중단됩니다. 이는 페이지의 나머지 부분이 로드되는 것을 지연시킬 수 있습니다. 하지만 스크립트를 페이지 하단에 배치하면, HTML과 CSS가 먼저 로드되어 사용자에게 빠르게 컨텐츠를 보여줄 수 있습니다. -
의존성 관리:
<script>태그가 문서의 하단에 위치하면, 그 스크립트는 이미 파싱된 HTML 요소들에 접근할 수 있습니다. 이는 특히 JavaScript가 DOM 요소를 조작해야 하는 경우 유용합니다. 스크립트가 실행될 때 모든 HTML 요소가 이미 로드되어 있기 때문에, DOM 관련 에러가 발생할 가능성이 줄어듭니다. -
사용자 경험 개선: 스크립트 로딩으로 인한 지연을 최소화하여 사용자가 페이지의 시각적인 요소를 더 빨리 볼 수 있게 함으로써, 사용자 경험을 개선할 수 있습니다.
Q. html에서 자바스크립트 코드를 로딩하는 script 태그는 보통 body 태그의 최하단에 위치하는데요. 그 이유가 무엇일까요?
11. 비동기 함수를 동시에 병렬로
여러 비동기 함수를 동시에 병렬로 호출하고 싶다면 JavaScript에서는 주로 Promise.all을 사용합니다. 이 메소드는 여러 프로미스(promise)가 모두 완료될 때까지 기다렸다가 각 프로미스의 결과를 배열로 반환합니다. 사용 방법은 다음과 같습니다:
코드 복사
async function fetchData() {
try {
// 각 비동기 작업을 Promise로 정의합니다.
const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');
// Promise.all을 사용하여 모든 프로미스를 병렬로 실행합니다.
const results = await Promise.all([promise1, promise2, promise3]);
// results 배열에서 각 결과를 추출합니다.
const data1 = await results[0].json();
const data2 = await results[1].json();
const data3 = await results[2].json();
return [data1, data2, data3];
} catch (error) {
console.error('Error fetching data:', error);
}
}이 예에서는 fetch 함수를 사용하여 비동기적으로 데이터를 불러오고 있으며, Promise.all을 이용하여 세 개의 네트워크 요청을 동시에 수행합니다. 각 요청이 성공적으로 완료되면 그 결과를 배열로 받아 처리할 수 있습니다.
또 다른 방법으로 Promise.allSettled가 있습니다. 이 메소드는 Promise.all과 비슷하지만, 모든 프로미스가 완료될 때까지 기다리고 각 프로미스의 성공 또는 실패 결과를 포함하는 배열을 반환합니다. 이는 실패한 프로미스 때문에 다른 프로미스의 결과를 잃어버리지 않고자 할 때 유용합니다.
Q. 여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요?
