웹 성능 최적화 솔루션에 대한 자세한 소개

1장 웹사이트 속도 저하 현황 분석 열기

회사에서 IDC전산실에 배포된 VIP 웹사이트에 접속하면 매우 느린 느낌을 받을 것입니다. 원인은 무엇입니까? 페이지의 응답 시간을 단축하고 사용자 경험을 개선하려면 사용자가 무엇을 기다리며 시간을 보내는지 알아야 합니다.

아래 그림과 같이 로그인 페이지를 추적할 수 있습니다

위 그림에서 HTML 문서가 전체 응답 시간의 20%만을 차지한다는 것을 분석하고 알 수 있습니다. 다른 80%응답 시간은 JS, CSS, 이미지 및 기타 구성 요소를 다운로드하는 데 사용됩니다. 따라서 WEB의 프런트엔드는 최적화할 여지가 많습니다. WEB의 프런트엔드 최적화와 백엔드 최적화를 종합적으로 고려하여 WEB에 대한 성능 최적화 계획을 제시하겠습니다.

Chapter 2 WEB프론트 데스크 최적화 규칙

1. Minimize HTTP Requests

효과적으로 줄이기 위한 몇 가지 일반적인 방법이 있습니다. 요청 :

1, 스크립트 및 스타일 파일을 병합합니다. 예를 들어 여러 CSS 파일을 하나로 결합하거나 여러 JS 파일을 하나로 결합할 수 있습니다.

2, CSS 스프라이트 CSS 배경 관련 요소를 사용하여 배경 이미지의 위치를 ​​절대적으로 지정 , 여러 이미지를 하나의 이미지로 결합합니다.

2. 브라우저 캐시 사용

​​​ 사용자가 웹사이트의 다른 페이지를 탐색할 때 동일한 JS, CSS, 사진 등 많은 콘텐츠가 반복됩니다. 브라우저가 이러한 파일을 로컬로 캐시하도록 제안하거나 강제할 수 있다면 페이지에서 생성되는 트래픽 양이 크게 줄어들어 페이지 로드 시간이 단축됩니다.

서버 측 응답 header에 따르면 파일에는 브라우저에 대한 여러 수준의 캐시 상태가 있습니다.

1. 서버는 브라우저에게 이 파일을 캐시하지 말고 매번 서버에 있는 파일을 업데이트하라고 지시합니다.

2. 서버는 브라우저에 어떠한 지시도 내리지 않습니다.

3 마지막 전송에서 서버는 Last-Modified 또는 Etag 데이터를 브라우저로 전송했습니다. 다시 검색할 때 브라우저는 이러한 데이터를 서버에 제출하여 로컬 버전이 최신인지 확인합니다. 최신 버전은 서버가 304 코드를 반환하여 브라우저에 로컬 버전을 직접 사용하도록 지시하고, 그렇지 않으면 새 버전을 다운로드한다는 것입니다. 일반적으로 정적 파일만 있는 경우 서버는 이러한 데이터를 제공합니다.

4. 서버는 브라우저가 파일을 캐시하도록 강제하고 만료 시간을 설정합니다. 캐시가 만료되기 전에 브라우저는 서버와의 통신 없이 로컬 캐시 파일을 직접 사용합니다.

우리가 해야 할 일은 브라우저를 네 번째 상태로 강제 실행하는 것입니다. 특히 JS, CSS 및 이미지와 같이 변경 사항이 적은 파일의 경우 더욱 그렇습니다.

3. 압축 구성 요소 사용

IE 및 Firefox브라우저는 모두 클라이언트 GZIP을 지원합니다. 전송하기 전에 GZIP을 사용하여 압축한 다음 클라이언트가 클라이언트에 전송합니다. 압축 해제는 서버와 클라이언트의 일부 CPU를 약간 차지하지만 대역폭 활용도가 높아집니다. 일반 텍스트의 경우 압축률이 상당히 인상적입니다. 각 사용자가 대역폭의 50%를 절약하면 임대 대역폭은 두 배의 고객에게 서비스를 제공하고 데이터 전송 시간을 단축할 수 있습니다.

4. 이미지 및 JS

미리 로드하는 가장 쉬운 방법은 JavaScript 에서 새 Image() 객체를 인스턴스화한 다음 이미지의 URL 을 로드하는 것입니다. 매개변수로 전달됩니다.

function preLoadImg(url) {
var img = new Image();
img.src = url;
}

로그인 페이지에서 JS 및 사진을 미리 로드할 수 있습니다

5. 스크립트를 하단에 배치

스크립트를 상단에 배치하여 발생하는 문제,

1, 스크립트 사용 시 스크립트 아래에 위치한 콘텐츠에 대해서는 프로그레시브 렌더링이 차단됩니다

2, 스크립트 다운로드 시 병렬 다운로드가 차단됩니다

하단에 넣으면 가 발생할 수 있습니다. JSerrors, 스크립트가 로드되지 않으면 사용자가 스크립트 이벤트를 트리거합니다.

상황을 종합적으로 고려해 보세요.

6. 스타일 파일을 페이지 상단에 배치하세요

스타일 시트가 로드되지 않은 경우 렌더링 트리를 구축하는 것은 낭비입니다. 스타일 파일이 페이지 하단에 배치되는 경우는 두 가지 상황이 있을 수 있습니다.

1, 흰색 화면

2, 스타일 없음 콘텐츠 깜박임

7. 외부 JS 및 CSS

을 사용하여 인라인 JS 및 CSS을 외부 JS로 만듭니다. CSS. 인라인 JS 및 CSS의 반복 다운로드를 줄입니다.

8. 구성 요소를 여러 도메인으로 분할

주된 목적은 페이지 구성 요소의 병렬 다운로드 기능을 향상시키는 것입니다. 하지만 도메인 이름을 너무 많이 사용하지 마세요. 2 하위 도메인 이름을 사용하는 것이 좋습니다.

Nine, StreamliningJS

은 두 가지 수준에서 수행할 수 있습니다

1, 합리화: 코드에서 불필요한 문자를 제거하여 크기를 줄입니다.

2, 난독 화 : 간소화되는 동안 코드도 다시 작성되고 기능과 변수 이름이 짧은 문자열로 변환됩니다. 코드의 문자를 사용하여 크기를 줄입니다.

十一,       간소화된 이미지, Flash

, Flash

효과와 크기 사이의 균형 . 3장

프로그램 최적화4장 데이터베이스 최적화

AppendixA 페이지 요청 분석 입력

URL

에서 페이지 렌더링까지 5단계

1

를 따라가세요. URL 주소를 입력하거나

URL

　2 링크를 클릭하세요.

브라우저는 DNS, 3과 결합된 URL 주소를 기반으로 URL에 해당하는

IP

주소를 구문 분석합니다. 보내기 HTTP 요청　4. 요청한 서버에 접속을 시작하고 관련 콘텐츠를 요청합니다

　5． 브라우저는 서버에서 반환된 내용을 파싱하여 페이지를 표시합니다

위는 기본적으로 요청부터 구현까지 페이지의 기본 프로세스입니다. 아래에서는 이 프로세스를 분석합니다.

URL을 입력하면 브라우저는 이 URL에 해당하는 IP이 무엇인지 알 수 있습니다. IP 주소를 알아야만 브라우저가 이를 준비할 수 있습니다. 특정 IP 및 지정된 서버의 포트 번호로 요청을 보냅니다. 브라우저의 DNS 구문 분석기는 URL을 올바른 IP 주소로 구문 분석하는 역할을 합니다. 이 구문 분석 프로세스에는 시간이 걸리며 이 구문 분석 기간 동안 브라우저는 서버에서 아무것도 다운로드할 수 없습니다. 브라우저와 운영 체제는 DNS 해상도 캐싱 지원을 제공합니다. IP 주소를 얻은 후 브라우저는 서버에 HTTP 요청을 보냅니다. 프로세스는 다음과 같습니다.

1． 브라우저는 TCP 패킷을 보내 서버에 연결

2을 열어달라고 요청합니다. 또한 서버는 패킷을 보내 클라이언트의 브라우저에 응답하여 브라우저에 연결이 열려 있음을 알립니다.

3. 브라우저는 HTTP의 GET 요청을 보냅니다. 이 요청에는 일반적인 cookie 및 기타 head 헤더 정보와 같은 많은 내용이 포함되어 있습니다.

이런 식으로 요청이 전송됩니다.

요청이 전송된 후 서버 측 프로그램이 최종 결과를 클라이언트에 보냅니다.

사실 브라우저에 가장 먼저 도착하는 것은 html 문서입니다. 소위 html 문서는 순수한 html 코드이며 그림, 스크립트, CSS 등을 포함하지 않습니다. . 이것이 페이지의 html 구조입니다. 이때 반환되는 것은 페이지의 html 구조뿐이기 때문입니다. 이 html 문서가 브라우저로 전송되는 데 걸리는 시간은 매우 짧으며 일반적으로 전체 응답 시간의 약 10%을 차지합니다.

이후 페이지의 기본 골격이 브라우저에 있습니다. 다음 단계는 브라우저가 페이지를 구문 분석하는 과정입니다. 이는 html의 골격을 위에서 아래로 단계별로 구문 분석하는 것입니다.

이때 html 문서에서 img 태그를 발견하면 브라우저는 이 img 응답의 URL 주소로 HTTP 요청을 보내 이미지를 가져온 다음 표시합니다. html 문서, flash에 많은 그림이 있는 경우 브라우저는 이를 하나씩 요청한 다음 렌더링합니다. 모든 그림을 요청해야 하는 경우 이전에 언급한 단계를 수행해야 합니다. 구문 분석 url , tcp 연결 열기 등. 연결을 열면 리소스가 소모됩니다. 데이터베이스에 액세스할 때와 마찬가지로 가능한 한 적은 수의 데이터베이스 연결을 열고 연결 풀에서 더 많은 연결을 사용하려고 합니다. 같은 방식으로 tcp 연결도 재사용할 수 있습니다. http1.1은 지속적인 연결(perpersist Connection) 개념을 제안했습니다. 이는 동일한 HTTP 연결이 동시에 여러 요청을 처리하여 tcp 연결을 줄일 수 있음을 의미합니다.

페이지의 html골격이 로드되면,브라우저는 페이지의 태그를 파싱하기 시작하고,위에서 아래로 파싱을 시작합니다.

첫 번째는 head 태그를 구문 분석하는 것입니다. head에 인용할 JS스크립트가 있는 경우 브라우저는 이때 스크립트를 요청하기 시작합니다. JS 요청이 완료될 때까지 전체 페이지의 구문 분석 프로세스가 중지됩니다. 그런 다음 body 태그를 구문 분석하는 등 페이지를 아래쪽으로 구문 분석합니다. body에 img 태그가 있으면 브라우저는 img에 해당하는 src 리소스를 요청합니다. img 태그를 사용하면 브라우저가 태그를 하나씩 구문 분석합니다. 구문 분석은 JS처럼 기다리지 않고 동시에 다운로드됩니다.

위 내용은 웹 성능 최적화 솔루션에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!