웹사이트 성능을 향상시키는 PHP의 세부 사항

이 기사에서는 모든 사람에게 도움이 되기를 바라면서 주로 PHP를 사용하여 웹사이트 성능을 향상시키는 세부 사항을 공유합니다.

첫 번째는 HTTP 요청 수를 최대한 줄이는 것입니다(Make Less HTTP Requests)

http 요청은 비용이 많이 들고, 요청 수를 줄이는 방법을 찾으면 자연스럽게 웹 페이지 속도가 빨라질 수 있습니다. 일반적으로 사용되는 방법에는 CSS, js 병합(각각 한 페이지에 CSS 및 js 파일 병합), 이미지 맵 및 CSS 스프라이트 등이 포함됩니다. 물론 CSS와 js 파일을 여러 파일로 분할하는 것은 CSS 구조 및 공유 등의 고려 사항 때문일 수 있습니다. 당시 알리바바의 중국 웹사이트 접근 방식은 별도로 개발한 후 백그라운드에서 js와 ​​css를 병합하는 것이었습니다. 이렇게 하면 여전히 브라우저에 대한 하나의 요청이었지만 개발 중에는 여전히 여러 개의 요청으로 복원할 수 있었기 때문에 관리가 용이했습니다. 반복된 참조 . Yahoo에서는 외부 참조 대신 홈페이지의 CSS와 JS를 페이지 파일에 직접 작성할 것을 권장합니다. 홈페이지 방문 횟수가 너무 많기 때문에 요청 횟수도 2회 줄어들 수 있습니다. 실제로 국내 포털에서는 이런 일을 많이 하고 있다.

Css 스프라이트는 페이지의 배경 이미지를 하나로 병합한 다음 CSS의 background-position 속성으로 정의할 수 없는 값을 통해 배경을 가져오는 것을 의미합니다. 현재 Taobao와 Alibaba Chinese 사이트가 이 작업을 수행하고 있습니다. 관심이 있으시면 타오바오와 알리바바의 배경 이미지를 살펴보시면 됩니다.

http://www.csssprites.com/ 업로드한 이미지를 자동으로 병합하고 해당 배경 위치 좌표를 제공할 수 있는 도구 웹사이트입니다. 결과를 png 및 gif 형식으로 출력합니다.

두 번째, 콘텐츠 전달 네트워크를 사용하세요: 콘텐츠 전달 네트워크를 사용하세요

솔직히 저는 CDN에 대해 잘 모릅니다. 간단히 말해서 기존 인터넷에 새로운 레이어를 추가하면 네트워크 아키텍처가 콘텐츠를 게시합니다. DNS 로드 밸런싱 기술을 통해 사용자의 소스를 파악하고 근처의 캐시 서버에 접속하여 항저우에 있는 사용자는 항저우에 가장 가까운 서버의 콘텐츠에 액세스하고, 베이징에서는 항저우에 가장 가까운 서버의 콘텐츠에 액세스합니다. 베이징 근처 서버의 콘텐츠에 액세스하세요. 이를 통해 네트워크에서 데이터 전송 시간을 효과적으로 줄이고 속도를 높일 수 있습니다. 자세한 내용은 바이두 백과사전의 CDN 설명을 참고하세요. Yahoo!는 정적 콘텐츠를 CDN에 배포하고 사용자 영향 시간을 20% 이상 줄입니다.

3조, 만료 헤더 추가: 만료 헤더 추가

이제 점점 더 많은 그림, 스크립트, CSS 및 플래시가 페이지에 삽입되며 http 요청을 방문할 때 필연적으로 여러 번 수행하게 됩니다. 실제로 Expires 헤더를 설정하여 이러한 파일을 캐시할 수 있습니다. Expire는 실제로 헤더 메시지를 통해 브라우저에서 특정 유형의 파일에 대한 캐시 시간을 지정합니다. Flash에 있는 대부분의 사진은 출시된 후 자주 수정할 필요가 없습니다. 캐싱 후에는 브라우저가 나중에 서버에서 이러한 파일을 다운로드할 필요가 없지만 캐시에서 직접 읽을 수 있습니다. 페이지가 다시 크게 가속화됩니다. 일반적인 HTTP 1.1 프로토콜에서 반환되는 헤더 정보:

HTTP/1.1 200 OK   
Date: Fri, 30 Oct 1998 13:19:41 GMT   
Server: Apache/1.3.3 (Unix)   
Cache-Control: max-age=3600, must-revalidate   
Expires: Fri, 30 Oct 1998 14:19:41 GMT   
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT   
ETag: “3e86-410-3596fbbc”   
Content-Length: 1040   
Content-Type: text/html

이는 서버 측 스크립트를 통해 Cache-Control 및 Expires를 설정하여 수행할 수 있습니다.

예를 들어, php

＜!--pHeader("Cache-Control: must-revalidate");   
$offset = 60 * 60 * 24 * 30;   
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";   
Header($ExpStr);-->

에서 30일 후 만료를 설정하는 것은 서버 자체를 구성하여 수행할 수도 있습니다. 이에 대해서는 잘 모르겠습니다. 하하. 더 알고 싶은 친구는 http://www.web-caching.com/

을 참조하세요. 제가 아는 한 현재 Alibaba 중국 웹사이트의 만료 만료 시간은 30일입니다. 그러나 해당 기간 동안 문제가 발생했으며 특히 스크립트 만료 시간 설정을 신중하게 고려해야 합니다. 그렇지 않으면 해당 스크립트 기능이 업데이트된 후 클라이언트가 이러한 변경 사항을 "인식"하는 데 오랜 시간이 걸릴 수 있습니다. 저는 [프로젝트 제안]을 진행하면서 이런 문제를 겪은 적이 있습니다. 따라서 캐시해야 할 것과 캐시하지 말아야 할 것을 신중하게 고려해야 합니다.

Article 4. Gzip 압축 활성화: Gzip 구성요소

Gzip의 개념은 먼저 서버측에서 파일을 압축한 후 전송하는 것입니다. 이렇게 하면 파일 전송 크기를 크게 줄일 수 있습니다. 전송이 완료된 후 브라우저는 압축된 내용을 다시 압축 해제하여 실행합니다. 현재의 모든 브라우저는 gzip "well"을 지원합니다. 브라우저가 이를 인식할 수 있을 뿐만 아니라 주요 "크롤러"도 이를 인식할 수 있으므로 안심할 수 있습니다. 게다가 gzip의 압축률은 매우 크며 일반 압축률은 85%입니다. 이는 서버 측의 100K 페이지가 클라이언트에 전송되기 전에 약 25K로 압축될 수 있음을 의미합니다. 특정 Gzip 압축 원리에 대해서는 csdn의 "Gzip 압축 알고리즘" 문서를 참조할 수 있습니다. Yahoo는 특히 모든 텍스트 콘텐츠가 html(php), js, css, xml, txt 등 gzip으로 압축되어야 한다고 강조합니다. 우리 웹사이트는 이 점에서 좋은 성과를 거두었으며 A입니다. 예전에는 홈페이지에 광고 코드로 배치된 js가 많았기 때문에 저희 홈페이지는 A가 아니었습니다. 이러한 광고 코드 소유자의 웹사이트 js는 gzip으로 압축되지 않았기 때문에 저희 웹사이트도 다운될 수 있었습니다.

위 세 가지 사항 중 대부분은 서버측 콘텐츠에 속하며, 저는 피상적으로만 이해하고 있습니다. 내가 틀렸다면 정정해주세요.

5조: CSS를 페이지 상단에 배치하세요(스타일시트를 상단에 배치하세요)

페이지 상단에 CSS를 배치하는 이유는 무엇인가요? IE 및 Firefox와 같은 브라우저는 모든 CSS가 전송될 때까지 아무것도 렌더링하지 않기 때문입니다. 그 이유는 마 형제님이 말씀하신 것처럼 간단합니다. CSS의 전체 이름은 Cascading Style Sheets(Cascading Style Sheets)입니다. 캐스케이딩이란 다음 CSS가 이전 CSS를 덮고, 상위 CSS가 하위 CSS를 덮을 수 있음을 의미합니다. [CSS! 중요] 이 계층적 관계는 이 글의 하단에서 간략하게 언급되었습니다. 여기서는 CSS를 재정의할 수 있다는 점만 알아두면 됩니다. 이전 스타일 시트를 덮어쓸 수 있으므로 완전히 로드된 후에 브라우저가 스타일 시트를 렌더링하는 것이 의심할 여지 없이 합리적입니다. IE와 같은 많은 브라우저에서 스타일 시트를 페이지 하단에 배치할 때의 문제는 웹 콘텐츠의 순차적 표시. 페이지 요소를 다시 그리는 것을 방지하기 위해 브라우저 블록이 표시되며 사용자에게는 빈 페이지만 표시됩니다. Firefox는 표시를 차단하지 않지만 이는 스타일시트를 다운로드한 후 일부 페이지 요소를 다시 그려야 할 수 있으며 이로 인해 깜박이는 문제가 발생할 수 있음을 의미합니다. 그러니 가능한 한 빨리 CSS를 로드해야 합니다

이 의미에 따르면, 좀 더 자세히 연구하면 실제로 최적화할 수 있는 영역이 있습니다. 예를 들어, 이 사이트에 포함된 두 개의 CSS 파일인

Article 7: CSS에서 표현식 사용 방지(CSS 표현식 방지)

그러나 이는 의미 없는 중첩 레이어를 두 개 더 추가하므로 확실히 좋지 않습니다. 더 나은 방법이 필요합니다.

Article 8. 외부 파일에 JavaScript 및 CSS 넣기(Make JavaScript and CSS External)

이것은 이해하기 쉽다고 생각합니다. 이는 성능 최적화의 관점뿐만 아니라 코드 유지 관리의 용이성 측면에서도 수행됩니다. 페이지 콘텐츠에 CSS와 JS를 작성하면 요청 2개를 줄일 수 있지만 페이지 크기도 늘어납니다. CSS와 js가 캐시된 경우 추가 http 요청이 없습니다. 물론 앞서 말했듯이 일부 특수 페이지 개발자는 여전히 인라인 CSS 및 js 파일을 선택할 것입니다.

9조: DNS 조회 줄이기

인터넷에서는 도메인 이름과 IP 주소가 일대일로 대응됩니다. 도메인 이름(kuqin.com)은 기억하기 쉽지만 컴퓨터에서는 이를 인식하지 못합니다. . "인식"도 IP 주소로 변환해야 합니다. 네트워크의 각 컴퓨터는 독립적인 IP 주소에 해당합니다. 도메인 이름과 IP 주소 간의 변환을 도메인 이름 확인(DNS 쿼리라고도 함)이라고 합니다. DNS 확인 프로세스는 20~120밀리초가 소요됩니다. DNS 쿼리가 완료되기 전에 브라우저는 도메인 이름으로 어떤 것도 다운로드하지 않습니다. 따라서 DNS 쿼리 시간을 줄이면 페이지 로딩 속도가 빨라질 수 있습니다. Yahoo에서는 페이지에 포함된 도메인 이름의 수를 2~4개로 제한할 것을 권장합니다. 이를 위해서는 페이지 전체에 대한 좋은 계획이 필요합니다. 현재 우리는 이와 관련하여 잘 하지 못하고 있으며 많은 광고 전달 시스템이 우리를 끌어내리고 있습니다.

Article 10. JavaScript 및 CSS 압축(Minify JavaScript)

js와 CSS를 압축하면 페이지의 바이트 수가 확실히 줄어듭니다. 용량이 작은 페이지는 당연히 더 빠르게 로드됩니다. 압축은 볼륨을 줄이는 것 외에도 일부 보호 기능도 제공할 수 있습니다. 우리는 이것을 잘합니다. 일반적으로 사용되는 압축 도구에는 JsMin, YUI 압축기 등이 있습니다. 또한 http://dean.edwards.name/packer/에서는 매우 편리한 온라인 압축 도구도 제공합니다. jQuery 웹 페이지에서 압축된 js 파일과 압축되지 않은 js 파일 간의 용량 차이를 확인할 수 있습니다.

물론 압축의 한 가지 단점은 코드의 가독성이 떨어진다는 것입니다. 나는 많은 프런트 엔드 친구들이 이 문제에 직면했다고 생각합니다. Google을 보는 효과는 멋지지만 소스 코드를 보면 많은 문자가 뭉쳐져 있고 함수 이름조차 바뀌었습니다. 이렇게 자신만의 코드를 유지관리하면 많이 불편하지 않을까요? 현재 모든 Alibaba 중국 웹사이트에서 채택하고 있는 접근 방식은 js 및 css가 출시될 때 서버 측에서 압축하는 것입니다. 이는 우리가 자체 코드를 유지 관리하는 것을 매우 편리하게 만듭니다.

11조, 리디렉션 방지

얼마 전에 ieblog에서 "Internet Explorer 및 연결 제한"이라는 기사를 봤습니다. 예를 들어 http://www.enet.com.cn /eschool/을 입력하면 서버가 http://www.enet.com.cn/eschool/로의 301 서버 리디렉션을 자동으로 생성하면 브라우저의 주소 표시줄을 보면 확인할 수 있습니다. 이러한 종류의 리디렉션에는 당연히 시간이 걸립니다. 물론 이는 단지 예시일 뿐이지만, 리디렉션이 추가될 때마다 웹 요청이 증가하므로 이를 최대한 줄여야 한다는 점은 변함이 없습니다.

Article 12. 중복 스크립트 제거

이것은 성능 측면뿐만 아니라 코드 사양 측면에서도 말하지 않아도 알고 있습니다. 그러나 우리는 그림이 너무 빠르기 때문에 반복될 수 있는 일부 코드를 추가하는 경우가 많다는 점을 인정해야 합니다. 아마도 통합된 CSS 프레임워크와 JS 프레임워크가 우리 문제를 더 잘 해결할 수 있을 것입니다. Xiaozhu의 관점은 옳습니다. 반복되어서는 안 될 뿐만 아니라 재사용도 가능해야 합니다.

Article 13. 엔터티 태그 구성(ETags) (Configure ETags)

이것도 이해가 안가네요 ㅎㅎ. inforQ "ETags를 사용하여 웹 애플리케이션 대역폭 및 로드 감소"에 대한 자세한 설명을 찾았습니다. 관심 있는 학생들은 확인할 수 있습니다.

Article 14. AJAX를 캐시 가능하게 만들기

Ajax를 여전히 캐시해야 하나요? Ajax 요청을 할 때 캐싱을 피하기 위해 타임스탬프가 추가되는 경우가 많습니다. "비동기성"이 "순간성"을 의미하지 않는다는 점을 기억하는 것이 중요합니다. AJAX 메시지가 동적으로 생성되어 한 명의 사용자에게만 영향을 미치더라도 여전히 캐시될 수 있다는 점을 기억하세요.

관련 권장 사항:

웹사이트 성능 개발을 개선하기 위한 10가지 팁

위 내용은 웹사이트 성능을 향상시키는 PHP의 세부 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!