웹페이지 성능을 최적화하는 방법

프런트엔드는 HTML, CSS, Javascript, 이미지, Flash 및 기타 다양한 리소스를 포함하여 거대합니다. 프런트 엔드 최적화는 복잡하며 리소스의 모든 측면에 대해 다양한 방법이 있습니다. 그렇다면 프론트엔드 최적화의 목적은 무엇일까요?

　1. 사용자 관점에서 최적화는 페이지 로드 속도를 높이고 사용자 작업에 보다 신속하게 응답하며 사용자에게 보다 친숙한 경험을 제공할 수 있습니다.
　2. 서비스 제공자 입장에서는 최적화를 통해 페이지 요청 수를 줄이거나 요청이 차지하는 대역폭을 줄여 상당한 리소스를 절약할 수 있습니다.
　요컨대, 적절한 최적화는 사이트의 사용자 경험을 향상시킬 뿐만 아니라 상당한 리소스 활용도를 절약할 수 있습니다.
　프론트엔드를 최적화하는 방법은 여러 가지가 있는데, 이는 세분화에 따라 크게 두 가지 범주로 나눌 수 있습니다. 첫 번째 범주는 HTTP 요청 수, 스크립트의 비차단 로딩, 위치 등 페이지 수준 최적화입니다. 인라인 스크립트 최적화 등 두 번째 범주는 Javascript의 DOM 작업 최적화, CSS 선택기 최적화, 이미지 최적화, HTML 구조 최적화 등과 같은 코드 수준 최적화입니다. 또한, 입출력 비율을 향상시키는 것을 목적으로, 후술하는 다양한 최적화 전략을 입출력 비율이 큰 것부터 작은 것 순으로 대략 정리하였다.
　1. 페이지 수준 최적화
　1. HTTP 요청 수 줄이기
　 이 전략은 기본적으로 모든 프론트 엔드 사람들에게 알려져 있으며 가장 중요하고 효과적이기도 합니다. HTTP 요청을 줄여야 한다고 하는데 요청이 너무 많으면 어떻게 될까요? 우선 각 요청에는 시간 비용과 리소스 비용을 모두 포함한 비용이 발생합니다. 완전한 요청에는 DNS 주소 지정, 서버와의 연결 설정, 데이터 전송, 서버 응답 대기 및 데이터 수신이라는 "길고" 복잡한 프로세스가 필요합니다. 시간 비용은 사용자가 리소스를 보거나 "느끼기" 위해 프로세스가 끝날 때까지 기다려야 한다는 것입니다. 리소스에 대한 각 요청은 데이터를 전달해야 하기 때문에 각 요청에는 대역폭이 필요합니다. 또한 브라우저가 할 수 있는 동시 요청 수에는 상한이 있으므로(자세한 내용은 여기 참조) 요청 수가 증가하면 브라우저에서 일괄적으로 요청을 해야 하므로 사용자의 대기 시간이 늘어납니다. 사용자의 웹 사이트에 문제를 일으킬 수 있습니다. 사용자가 볼 수 있는 첫 번째 화면의 모든 리소스를 요청하더라도 브라우저의 진행률 표시줄은 항상 존재한다는 느낌이 듭니다.
　HTTP 요청 수를 줄이는 주요 방법은 다음과 같습니다.
　(1). 디자인 및 구현 수준에서 페이지를 단순화합니다.
　페이지가 Baidu 홈페이지만큼 단순하다면 다음 규칙은 기본적으로 필요하지 않습니다. 페이지를 단순하게 유지하고 리소스 사용량을 줄이는 것이 가장 간단합니다. 그렇지 않고 페이지에 멋진 스킨이 필요하다면 아래를 계속 읽어보세요.
　(2). HTTP 캐시를 올바르게 설정하세요
　캐시의 힘은 강력하며 적절한 캐시 설정은 HTTP 요청을 크게 줄일 수 있습니다. Youa의 홈페이지를 예로 들면, 브라우저가 캐시하지 않으면 총 78개의 요청이 발행되고 총 600K가 넘는 데이터가 발생합니다(그림 1.1 참조). 그러나 두 번째 방문이 브라우저 이후인 경우. 캐시한 경우에는 요청이 10개만 있고 총 데이터는 20,000개가 넘습니다(그림 1.2). (여기서 주의할 점은 F5를 눌러 페이지를 직접 새로 고치면 효과가 달라진다는 점입니다. 이 경우 요청 수는 여전히 동일하지만 캐시된 리소스에 대한 요청 서버는 304 응답입니다. 헤더에는 본문이 없으므로 대역폭을 절약할 수 있습니다.
　합리적인 설정이란 무엇입니까? 원칙은 매우 간단합니다. 캐시할 수 있는 양이 많을수록 좋고, 캐시할 수 있는 시간이 길수록 좋습니다. 예를 들어, 거의 변경되지 않는 이미지 리소스는 HTTP 헤더의 Expires를 통해 긴 만료 헤더를 직접 설정할 수 있으며, 자주 변경되지 않지만 변경될 수 있는 리소스는 요청 확인을 위해 Last-Modifed를 사용할 수 있습니다. 가능한 한 오랫동안 캐시에 리소스를 보관하세요. HTTP 캐싱의 특정 설정 및 원리는 여기서 자세히 설명하지 않습니다. 관심 있는 사람은 다음 문서를 참조할 수 있습니다.
HTTP1.1 프로토콜의 캐싱 전략 설명
Fiddler HTTP 성능의 캐싱 소개
(3) 리소스 병합 및 압축
가능하면 외부 스크립트와 스타일을 최대한 병합하고 여러 개를 하나로 병합하세요. 또한 CSS, Javascript 및 Image는 모두 해당 도구를 사용하여 압축할 수 있으며 압축 후 많은 공간을 절약할 수 있습니다.
　(4). CSS Sprites
　 CSS 이미지 병합은 요청 수를 줄이는 또 다른 좋은 방법입니다.
　(5). 인라인 이미지
　사용 데이터: URL 체계를 사용하여 페이지나 CSS에 이미지를 삽입하는 것은 리소스 관리 문제를 고려하지 않는 경우 좋은 방법입니다. 페이지에 삽입하면 페이지 크기가 커지며 브라우저 캐시를 사용할 수 없습니다. CSS에 사용되는 이미지가 더 이상적입니다.
　　(6). 지연 로드 이미지(아직도 이 섹션의 내용을 이해하지 못합니다)
이 전략은 실제로 HTTP 요청 수를 줄이지는 못하지만 특정 조건에서 또는 페이지가 방금 로드되었을 때 HTTP 요청 수를 줄일 수 있습니다. 이미지의 경우 페이지가 처음 로드될 때 첫 번째 화면만 로드할 수 있고, 사용자가 계속해서 뒤로 스크롤할 때 후속 이미지만 로드할 수 있습니다. 이런 식으로 사용자가 첫 번째 화면의 내용에만 관심이 있는 경우 나머지 이미지 요청은 저장됩니다. 예 홈 페이지 이전 접근 방식은 로드할 때 Textarea 태그의 첫 번째 화면 이후 이미지 주소를 캐시한 다음 사용자가 아래로 스크롤할 때 "느리게" 로드하는 것이었습니다.

　2. 외부 스크립트를 하단에 넣습니다(페이지 정보 내용이 로드된 후 스크립트 내용을 로드합니다)
　 앞서 언급했듯이 브라우저는 동시 요청을 할 수 있습니다. 그러나 이 기능을 사용하면 외부 체인 스크립트를 더 빠르게 로드할 수 있습니다. 예를 들어, 스크립트가 로드되기 전에 그 뒤에 있는 이미지, 스타일 및 기타 스크립트가 차단되고 스크립트가 로드될 때까지 로드가 시작되지 않습니다. 스크립트가 상대적으로 높은 위치에 배치되면 전체 페이지의 로딩 속도에 영향을 미쳐 사용자 경험에도 영향을 미치게 됩니다. 이 문제를 해결하는 방법에는 여러 가지가 있습니다. 자세한 소개는 여기 (여기에 번역이 있습니다. 더 자세한 예시 ), 가장 간단하고 안정적인 방법은 스크립트를 최대한 뒤로 이동하여 동시 다운로드에 미치는 영향을 줄이는 것입니다.
　3. 인라인 스크립트의 비동기 실행 (실제로 위와 동일하며 페이지 콘텐츠 다음에 스크립트가 로드되도록 보장합니다.)
　인라인 스크립트가 성능에 미치는 영향은 외부 스크립트보다 훨씬 더 나쁩니다. 외부 스크립트와 마찬가지로 인라인 스크립트도 실행 시 동시 요청을 차단합니다. 또한 페이지 처리에서 브라우저가 단일 스레드이므로 페이지가 렌더링되기 전에 인라인 스크립트가 실행되면 페이지 렌더링 작업이 연기됩니다. . 즉, 인라인 스크립트가 실행되면 페이지가 비어 있습니다. 위의 두 가지 이유를 고려하여 비동기적으로 실행하는데 시간이 오래 걸리는 인라인 스크립트를 실행하는 것이 좋습니다. document.write는 사용할 수 없으므로 setTimeout을 사용하세요. , 또한 HTML5에 도입되었습니다. Web Workers의 메커니즘은 이러한 문제를 정확하게 해결할 수 있습니다.

　4. Lazy Load Javascript (로딩이 필요할 때만 로드되며 일반적인 상황에서는 정보 내용이 로드되지 않습니다.)
　Javascript 프레임워크의 인기로 인해 프레임워크를 사용하는 사이트도 점점 늘어나고 있습니다. 그러나 프레임워크에는 많은 기능 구현이 포함되는 경우가 많습니다. 불필요한 스크립트를 다운로드하면 대역폭과 실행 시간이 모두 낭비됩니다. 현재 두 가지 접근 방식이 있습니다. 하나는 특히 트래픽이 많은 페이지에 대한 전용 미니 버전의 프레임워크를 사용자 정의하는 것이고, 다른 하나는 지연 로드입니다. YUI는 두 번째 방법을 사용합니다. YUI 구현에서는 처음에 핵심 모듈만 로드되고 다른 모듈은 필요할 때까지 기다릴 수 있습니다.

　　5. CSS를 HEAD에 배치
　CSS를 BODY 등 다른 위치에 배치하면 브라우저가 CSS를 다운로드하고 구문 분석하기 전에 페이지 렌더링을 시작할 수 있으며 이로 인해 페이지가 CSS 없는 상태에서 이동하게 됩니다. CSS 상태, 사용자 경험이 더 나쁩니다. 또한 일부 브라우저에서는 CSS 다운로드가 완료된 후에만 페이지 렌더링을 시작합니다. CSS가 낮은 위치에 배치되면 브라우저에서 렌더링 시간이 지연됩니다.
　 6. 비동기식 요청 콜백(즉, 일부 동작 스타일을 추출하고 정보 콘텐츠를 천천히 로드함)
　 일부 페이지에서는 데이터를 비동기식으로 요청하기 위해 스크립트 태그를 사용해야 하는 요구 사항이 있을 수 있습니다. 유사:
　Javascript:
/*콜백 함수*/
function myCallback(info){
//여기서 뭔가
}
　HTML:

　 cb가 반환한 내용:
myCallback('Hello world!')
위의 방법으로 페이지에 직접