웹사이트 성능 최적화 관련 지식 포인트

이 글에서 언급한 웹사이트 성능은 웹사이트의 응답 속도를 의미하며, 이는 대부분의 사람들이 웹사이트 성능에 대해 이해하고 있는 것과도 일치합니다. 즉, 접속 속도가 빠른 웹사이트는 성능이 좋은 반면, 접속 속도가 느릴수록 성능이 좋습니다. 웹 사이트 성능이 악화됩니다. 이 글에 요약된 최적화 방법은 매크로 수준의 엔지니어링 방법으로 미시적 수준의 언어 구문에 대한 방법은 포함되지 않습니다. 예를 들어 JS 및 CSS의 구문 최적화는 웹사이트의 성능에도 영향을 미치지만, 언어 구문 수준이 더 중요합니다. 개발자의 프로그래밍 수준에 따라 다릅니다.

어떤 웹사이트가 빠르게 반응하나요? 실제로 웹 사이트에서 리소스를 로드하는 속도가 빠를수록 웹 사이트에서 로드해야 하는 리소스가 적을수록 웹 사이트의 응답 속도가 빨라진다고 생각하기 쉽습니다. 이는 웹사이트 성능 최적화의 두 가지 주요 방향인 리소스 캐싱과 리소스 병합 및 압축에 해당합니다. 브라우저가 리소스 로드를 완료한 후 최종 웹 페이지를 렌더링하기 전에 리소스를 추가로 구문 분석해야 합니다. 따라서 브라우저의 구문 분석 메커니즘은 웹 사이트 성능 최적화를 위한 방향이기도 합니다. 다양한 최적화 방법은 이러한 세 가지 일반적인 방향으로 분류될 수 있습니다.

1. 리소스 캐싱

1.1 CDN

을 사용하여 정적 HTML, 이미지, 스타일 CSS, 스크립트 JS 등과 같은 웹사이트의 정적 리소스를 분리합니다. 정적 리소스를 CDN에 배포하면 작업 속도가 크게 향상됩니다. 이러한 리소스의 로딩 속도.

1.2 HTTP 캐싱 메커니즘 활용

HTTP 캐싱은 브라우저가 로컬로 로드한 리소스를 캐시합니다. 다음에 로드할 때 캐시된 리소스가 만료되지 않는 한 로컬 리소스를 직접 사용할 수 있어 HTTP 요청 수를 줄일 수 있습니다. 프로세스 속도를 향상시킵니다. 구체적인 방법은 HTTP 헤더에 Cache-Control 매개변수를 설정하는 것입니다. HTTP 1.0은 캐싱을 위해 Pragma와 Expires라는 두 매개변수를 사용하지만 더 이상 사용이 권장되지 않습니다.

2. 리소스 병합 및 압축

2.1 HTTP 요청 줄이기

하나의 HTTP 요청을 사용하여 10M 파일을 로드하고, 파일을 10개의 1M 파일로 분할하고, 10개의 HTTP 요청을 사용하여 병렬로 로드하는 방법 로딩이 더 빨라지나요? HTTP 요청을 줄이는 것이 웹 사이트 응답 속도를 향상시킬 수 있다고 언급되어 있으므로, 하나의 HTTP 요청을 사용하는 것이 더 빠르다는 결론이 나오는 것 같습니다. 실제로 정답은 다음과 같습니다. 반드시 그런 것은 아닙니다!

작은 실험을 했습니다. index1.html과 index2.html이라는 두 개의 HTML 파일이 있고, index1.html은