1. 파일 요청 수를 줄이고, 2. 스프라이트 이미지를 사용하세요. 3. 지연 로딩을 사용하세요. (파일 요청 수를 줄이는 방법은 무엇입니까?) (파일 요청 수를 줄여 최적화할 수 있는 이유는 무엇입니까? 10k 파일이 10개 있고 100k 파일이 하나 있는데 10k 파일 10개를 동시에 가져오는 경우 여러 스레드를 사용하는 것이 100k 스레드보다 더 빠를 것입니다. )() 답변을 주세요. . . . . . 고마워하는. .
1. 스프라이트 이미지를 사용하는 것은 요청 수를 줄이는 것입니다. 예를 들어 100개의 작은 아이콘이 하나의 이미지로 분리된 경우 이를 모두 병합하려면 서버에 100번 연속 요청해야 합니다.
한 번만 요청하면 됩니다.
2.js 병합, CSS 병합은 동일합니다.
여기에 쓰세요: 여러 스레드가 이미지를 요청하더라도 브라우저에는 제한이 있습니다. 현재 모든 브라우저에서 동시 요청 수는 일반적으로 10개 미만으로 제한됩니다. 즉, 이 숫자를 초과하면 차단됩니다 주문형 로딩이라고 하면 실제 상황에 따라 다릅니다. 스프라이트 이미지는 기본적으로 100K를 초과하는 큰 이미지에는 사용되지 않으며 작은 아이콘에는 수십 개 또는 10개만 있습니다. 수백 B 또는 열 수십, 20KB를 병합할 때 부담이 없습니다 여러 요청에 비해 이렇게 한 번 요청하는 것이 더 "비용 효율적"입니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
웹페이지가 비교적 길다면 먼저 한 화면의 콘텐츠를 표시한 다음 스크롤바를 일정 거리까지 스크롤하고 ajax 요청을 사용하여 로드할 수 있을 것 같습니다. 표시할 콘텐츠가 많으면 타오바오나 JD처럼 페이지 매김 표시를 사용하는 것이 더 좋다고 생각합니다.
이제 스프라이트 이미지를 사용하는 것이 최선의 최적화 방법이 아닐 수도 있습니다.
webpack을 사용하면 base64에서 항목 파일과 패키지 이미지를 줄일 수 있어 요구 사항을 완벽하게 해결할 수 있습니다.
몇 가지에 대해 간단히 이야기해 보겠습니다.
1. 스프라이트 이미지를 사용하는 것은 요청 수를 줄이는 것입니다. 예를 들어 100개의 작은 아이콘이 하나의 이미지로 분리된 경우 이를 모두 병합하려면 서버에 100번 연속 요청해야 합니다.
한 번만 요청하면 됩니다.2.js 병합, CSS 병합은 동일합니다.
여기에 쓰세요:
여러 스레드가 이미지를 요청하더라도 브라우저에는 제한이 있습니다. 현재 모든 브라우저에서 동시 요청 수는 일반적으로 10개 미만으로 제한됩니다. 즉, 이 숫자를 초과하면 차단됩니다
주문형 로딩이라고 하면 실제 상황에 따라 다릅니다. 스프라이트 이미지는 기본적으로 100K를 초과하는 큰 이미지에는 사용되지 않으며 작은 아이콘에는 수십 개 또는 10개만 있습니다. 수백 B 또는 열 수십, 20KB를 병합할 때 부담이 없습니다
여러 요청에 비해 이렇게 한 번 요청하는 것이 더 "비용 효율적"입니다