웹사이트 분석: 5,173 첫 페이지 프런트 엔드 성능 최적화 연습

중간 거래 SEO 진단 Taobao 게스트 클라우드 호스트 기술 홀

계획, 프런트 엔드 개발을에서 그리고 마지막으로 테스트와 온라인, 지속 4 개월, 5,173 첫 페이지 성능 최적화 온라인 성공적으로 마지막으로 프로젝트 및 예상 되는 성능 최적화 목표를 달성. 이 프로젝트는 개정판, 하지만 원래 홈 페이지 설계 및 기능 변경, 리팩터링 및 최적화 할만. 비록 프로젝트 프런트 엔드 성능 최적화 라고 하지만 그것은 단지 프런트 엔드 일방적인 작품, 잘, 최적화를 완료 하는 앞면과 뒷면의 전체 보완을 필요 합니다.

역사적 배경

오래 된 집 선 09 해야한다, 가정은 또한 부의 자원의 경쟁 장소, 우리 모두 홈 페이지에 있는 장소를 갖고 싶어, 홈 페이지에서 모든 부서는 그들의 자신의 작은 두 부 블록 라인, 패치, 재생 하는 방법의 대부분에 새 항목이 있는 경우 및 유일한 기준 성능에 관하여 기능의 정상 작동을 보장 하는, 그것은 매우 원격. 쓴 힘은 개발자, 할 때마다 변경의 홈 페이지는 무서운, 그 문제를 다시 변경 하는 걸 두려워, 점점 더 많은 문제에 의해 발생 하는 역사적 이유.

연속 땜 질에 홈 페이지 성능을 매우 당황된 프런트 엔드 직원 느낌에 불 쌍 한 되었기 때문에 보고 첫 번째 프런트 엔드 직원 이어야 한다. 하지만 그것은 단지 볼 수 없는 볼 수 없습니다 수, 개선 하기 위해 실질적인 조치를 받을 수 없어, 위에서 말했듯이 다양 한 부서, 관심사를 포함 하기 때문에 최적화 되지 않습니다만 앞, 그래서 프런트 엔드 직원 수만 위의 문제를 반영. 올해, 마침내 리더십도 볼 수 없습니다, 해외 방문 부문에서에서 리더 I 818 및 첫 페이지, 5,173에 비해 전 집 신속 하 게 (인터럽트, 818 프런트 엔드 개발자는 또한 내 ^_^), 후자는 매우 느린 홈 페이지, 차이가 큽니다. 그래서 관심의 승진의 리더십, 프런트 엔드 성능 최적화 프로젝트의 첫 번째 페이지를 5,173만 승인, 개발자 수 있습니다 마지막으로 가자 대담한 토스의.

문제 분석

실제 문제를 해결 하기 위해 오래 된 홈 페이지에 최초 계획 한 계획을 하기 전에이 내 계획 관련 데이터를 수집 하는:

1, 12, 41;의 사슬 외부 자바 스크립트의 사슬 외부 CSS의 수를 포함 하 여 너무 많은 요청

2, 페이지의 전체 볼륨이 너무 크면, 많은 정적 리소스 gzip, 심지어 JS 압축 하지 않았다; 하는 동적 사이트 추가 되지 않습니다.

3, 자원 직업 심각, 6으로 스크롤 아래 CPU 인 율 80%로 높은 페이지 메모리 누수 또한 매우 심각 하다;

4, 광고 시스템, 광고 사진 로딩 방법으로 document.write, 페이지 혼잡은 매우 심각;

5, 페이지는 7 iframe;

6, 데이터 소스 인터페이스 혼란;

7, 페이지 로딩 속도 너무 느리고, 흰색 스크린 현상, 매우 느리게; 로드 완료 첫 화면

위의 데이터는, 당신에 게 충격 그리고는 최적화를 위한 공간을 많이 보여줍니다. 문제가 무엇 인지 그리고 거기 구현의 특정 방향. 즉, 종래의 방법 또는 트릭, 목표는 3 개의 단어, "빨리, 빨리."

특정 구현

비록 거친 봐 페이지의 콘텐츠, 특정 기능 모듈 하지만 매우 어렵고 힘 드는 있습니다. 우리의 상사는 매우 고전적인 단어 "보통 나 질문, 면접관을 물어볼 것입니다 만약 당신이 혼자 할 프런트 엔드 작업의 5,173 첫 페이지, 얼마나 그것은 완료 될 수 있다? 대답은 단 하나 주, 페이지, 읽지 않은 또는 전문 되지 않습니다. "나는 첫 번째 페이지 개발 작업의 프런트 엔드를 완료 하는 데 혼자 1 개월 보냈다." 여기에 구체적인 구현이입니다.

재건의 Html & css

디자인과 페이지의 기능에서 변경 되지 않습니다 하지만 HTML 페이지는 여전히 한 완벽 한 리팩터링, 그리고 난 또한 HTML5의 새로운 탭을 사용 하 여 페이지의 레이아웃을 하려고 했습니다. CSS 리팩토링 하는 것은 당연한 또한, CSS의 체인 이외의 12, 이들은 모두를 죽 일, 일부 모듈 경우 유용, 필요 모듈, 홈 페이지 보다는 더 많은 공공 파일의 시간 개발에 일반적인 파일에 배치 되어야 합니다 여러 모듈로 분할 될 수 있다 @import 파일을 사용 하 포장 및 게시 하는 경우 하나의 파일에 병합 합니다. 즉 좋은 정도 파악, 합리적으로 캐시를 사용 하 여 뿐만 아니라 단일 파일 너무 큰 모듈을 동시에 하지 않도록 해야 합니다.

이전 홈 페이지는 CSS 선택기 너무 긴 문제가 많은, 최대 CSS 선택기의 조합 수 있습니다 6-7은 자주 경우, CSS 선택기 너무 긴 하지만, 성과의 영향 이지만 또한 CSS의 값 사이의 관계 때문에 나중에 유지 보수 문제를 많이 가져. 클래스 선택기 정의를 사용 해야 플러스 조합 태그 선택기의 3 선택기 조합까지 수 또한 대부분의 요구 사항 충족, CSS의 글에서 ID 선택기의 사용을 금지 하 고! 중요 한, 쓰기 습관은 매우 중요 한 좋은 CSS를 개발.

자바 스크립트를 리팩터링

자바 리팩터링 너무 긴급, 41 자바 파일의 사슬 외부는 물론, 이러한 외부 체인 또한 포함 하는 체인, 내가 나중에 말할 것 이다, 광고의 최적화 이외의 15 광고 이지만 26 자바 스크립트의 체인 밖에 아직도 있다. 이러한 비 대 한 자바 스크립트 파일은 잼, 뿐만 아니라 시스템 리소스를 로드 하는 페이지의 원인을 차지 하는 나 방,이 전체 프로젝트의 어려움 중 하나입니다.

4 수준 연계 검색의 비즈니스 논리를 빗질 하 고 4 레벨 연계 검색의 인터랙티브 기능 사용자 경험을 향상 시키기 위해 최적화. 이 모듈은 더 많은 Ajax 상호 작용, 큰 JSON 패킷 예기치 않게 94.4 KB이 캐싱 기능 현재 페이지의 합리적인 사용에서 ($. fn.data)은 매우 중요 하다. 가장 큰 JSON 패킷 로드 후 페이지 Dom 준비, 첫 화면 HTML 코드를 조립 하 고 캐시 사용자 게임 알파벳순 색인 하 여 다음 HTML 코드를 적절 한 데이터에 대 한 로드 된 JSON 패킷 검색 선택한 다음 인덱스에 대 한 HTML 코드를 캐시. 지역, 서비스, 거래 유형, 선택 하는 경우 그리고 해당 JSON 데이터를 가져올 서버에,이 이번에는 마지막 선택 결과 캐시 캐시에 대 한 HTML 코드에 조립.

편의 센터는 또한 홈 페이지의 비즈니스 논리는 매우 복잡 한 모듈, Ajax 상호 작용의 많은 및 폼의 작업. 각 탭에는 테이블은 HTML 구조를 생성 하기 위해 요청 된 JSON 데이터에 기반으로, 원래는 탭 할 때마다 데이터를 요청 하 고 HTML 구조를 요청, 다음 생성 각 스위치 탭 생성, 이건 정말 두. 동일한 데이터와 구조 한 번 요청 하 고 일단이 반복적인 작업은 자원의 뻔 뻔 스러운 낭비 생성. 자바 스크립트 모듈 원래 요청한 파일의 동적 사이트, 하지 않은 캐시 압축 하지 않은, 각 페이지 부하 여기 잠시 동안 차단 됩니다. 데이터 소스 인터페이스의 서버 쪽도 매우 성가신, 개발자 부족 표준된 데이터 인터페이스의 개념. 너무 많은 문제가 있다 내가 침을 수 없는 여기. 마지막으로, 그것은 또한 비즈니스 논리 코드를 리팩터링 하는 계란의 고통을 다시 정렬할입니다.

지연 로딩을 첫 화면 로딩 속도

사용자는 긴 웹 페이지를 열면 가장 직관적인 속도 경험 처음 화면 콘텐츠 로드 됩니다. 따라서, 최대한 빨리 로딩 완료 페이지 인지를 측정 하는 사용자는 또한 첫 번째 화면에서 "빠른" 가장 중요 한 요소. 5173 홈 페이지의 그림은 기본적으로 다음 위치에 집중 되어, 로드 첫 화면 로딩 속도 증진에 최대한 빨리 될 수 있도록 다음 사진의 모든 지연 됩니다. 일반적인 사진 지연 기술 로드 아마도 모두가 생소 하지 않을 것 이다, 여기를 반복 하지 것입니다. 탭 내용에 사진 많이 있다 그리고 그들은 또한 탭 메뉴 때 로드 해야 합니다. HTML 코드에서 그림에는 고정 된 크기를 추가 하 고 자연스럽 게 더 이상 이야기. 그래서 쉬운? 아니요!

그림은 비즈니스 구성의 그림 뿐만 아니라 제 3 자 광고 시스템에서 그림 (회전 목마 큰 이미지의 첫 번째 화면을 포함 하 여이 형식 이기도). 이러한 광고 이미지 URL document.write를 사용 하 여 광고 이미지를 로드 하는 코드를 포함 하는 JavaScript 링크입니다. 일부 탭은 IFRAME을 사용 하 여 페이지에 포함 된 공동 작업 사이트의 내용을 포함 합니다. 광고 사진 및 IFrame 페이지 로딩을 차단 하기 위한 범인 있습니다.

초기 아이디어를 다른 방법으로 로드 될 수 있는 광고 시스템을 다시 했지만 개발의 비용은 너무 높았다. 마지막으로이 메서드는 매우 유용 제공 하는 광고와 IFRAME, Yuber의 로드 지연 textarea의 사용의 생각 합니다. Textarae 좋은 것 일반적인 HTML 코드 또는 CSS 또는 JavaScript 코드를 throw 될 수 있습니다 내부 구현 지연 로딩입니다. 광고 그림 최적화는 더 많은 골칫거리, 다른 문서에는 자세한 소개. 텍스트, 콘텐츠의 많은 그림의 지연 로딩으로 구현 될 수 있습니다, 그리고 IFRAME의 탭 콘텐츠 또한 IFRAME을 로드할 수 탭 메뉴를 실행할 수 있습니다.

그것은 웹 페이지의 첫 번째 화면의 로딩 속도 극대화 하는 지연 된 로드 콘텐츠의 이러한 종류의 이상한 트릭. 그러나, 지연 된 로드 콘텐츠 필요가 더 중요 한 내용 중 일부에 대 한 설명의 부작용 서구의 영향을 고려 해야 합니다.

서버-사이드 최적화

프런트 엔드 수 있습니다 기본적으로, 하 고 서비스 사이드 최적화 작업을 말한다. 원래 서버 개발자 들의 다양 한 부서와 함께 작동 하도록 프런트 엔드 요구, 각 사이트에서 프런트 엔드 데이터 소스를 제공 하 고 그들이 제공 하는 성능 데이터 소스는 또한 상대적으로 느린. 상담 중간 서버에 데이터 소스를 결정, 프런트 엔드 통합을 가져올 데이터, 일정 한 양의 캐시 시간 간의 서버 쪽 통신 중간 서버에서 느리고 하지 통합의 문제를 해결 하기 위해 데이터 소스를.

페이지의 전체 볼륨이 너무 큽니다, 코드 리팩터링 실제로 많은 볼륨을 줄일 수 있습니다, 다른 정적 리소스 모두를 gzip을 추가, 그냥 gzip을 추가, 성능 향상 또한 더 명백 하다.

그것은 또한 로그인 정보 및 쿠키, 캐시-컨트롤에 추가 될 수 있는 모든 요청에 최대 연령 만료 시간 추가의 더 시간에 민감한 요청 제외한 브라우저 측 캐시의 합리적인 사용 하는 것이 중요. 브라우저 측 캐시에 대 한 추가, 여기 당신이 할 수 있는 경우 더 상세한 기사 그들을 캐시 합니다. 정적 리소스 요청 플러스 타임 스탬프를 캐시 하는 방법 이어야 한다 그래서 캐시의 추가 업데이트를 문제가 발생할 수 있습니다.

광택 있는 국내 대형 웹 사이트에서 여전히 드문 캐시 가속기 서버로 사용 하는 서비스의 다른 쪽도입니다.

최적화 결과

그것은 최적화, 결과 보고 하 고 데이터 비교 된 보는 시간 이다.

최적화 전후 요청 수를 비교:

많은 수의 요청을 서버에 압력을 줄이기 위해, 많은 서버를 제거할 수 있습니다.

정적 리소스 최적화 전후 파일 볼륨 비교 팬 들은 AJAX 데이터와 같이 다른 파일 볼륨의 정보를 포함 하지 않습니다.

494 KB 다운로드, 매일 PV1000000에 따라 경우의 최적화 후 파일 볼륨의 비교에서 (평가, 실제 값은 값 보다 훨씬 더 실제 값은 편리한 공개)을 계산 하려면 다음 매일 저장할 수 있습니다 트래픽을 470 g B.

최적화 로드 시간 대비 전후, 이것은 같은 네트워크 환경에서 동시에 테스트 Taobao와 팻 비교, 테스트 소프트웨어는 IE9 WebWatch 기반, 각 테스트 캐시, 수 평균을 테스트 하는:

약 로딩 속도 분석, Taobao 더 많은 사진, 그래서 첫 번째 화면 속도, 하지만 총 부하 시간 훨씬 더의 첫 번째 화면을 했더니, 물론, 그들의 다운로드 볼륨은 또한 훨씬 더 큰, 첫 번째 화면의 5173는 더 많은 dom, 다운로드 많은 작은, 그래서 총 시간과 화면 처음은 아주 가까이. 총 다운로드는 페이지의 총 다운로드 볼륨 완료 되 면, 모든의 사용 지연 로딩 기술 때문에, 스크롤 아래로 것입니다 사진을 로드 될,이 시간은 계산 되지 않습니다.

결국에서 웹 페이지의 로딩 속도 측정 하는 방법?이 최적화 YSlow와 pagespeed를 사용 하지 않았다 시험 점수 소프트웨어, 하지만 대상의 최적화에 대 한 실제 로딩 속도, 첫 화면 로딩 속도 대부분의 실제 설명에 맞지. 웹사이트 절반 하루 또는 화면에 열려 있으면, 대부분의 사람들은 매우 느리게 느낄 것 이다 하는 것이 믿습니다. 이것은 실제 경험, 측정 소프트웨어 반영 되지 됩니다.

원래에 포함 된: 비오는 밤 칼의 블로그

이 기사 링크: http://stylechen.com/5173homepage-optimized.html

무단 전재, 링크의 형태로 원래 또는 원래 주소를 표시 하시기 바랍니다 해야 합니다.