WEB2.0 시대의 도래와 함께 네트워크는 전례 없는 발전을 가져왔습니다. B/S 구조에서 열악한 사용자 상호 작용의 단점을 일부 보완하기 위해 프런트 엔드 사용자 경험이 점점 더 중요해지고 있습니다. 그러나 이는 클라이언트에 대한 부담을 증가시킨다는 문제를 야기합니다. 예를 들어, 많은 양의 JS 코드를 사용하면 JS 코드가 클라이언트에서 실행된다는 사실을 아는 것은 브라우저의 전체 웹 페이지의 구문 분석 효율성에 영향을 미칠 것이며 이는 클라이언트 트래픽의 증가를 의미할 수도 있습니다. 서버 부하 관점이나 사용자 관점에서 볼 때 특히 클라이언트 코드를 최적화하는 것이 중요합니다! 이 기사에서는 주로 내부 및 외부 측면에서 WEB 프런트 엔드 최적화 방법을 설명합니다. 독자들에게 작은 경험과 영감을 줄 수 있기를 바랍니다.
먼저 Yahoo 통계 차트를 통해 http://yahoo.com 의 http 트래픽 데이터를 살펴보겠습니다.
첫 번째 서버 요청부터 클라이언트에 페이지가 완전히 로드될 때까지 HTML 코드를 읽는 것은 전체 응답 시간의 5%만을 차지한다는 것을 알 수 있습니다. 이 결과는 샘플링된 미국의 대다수 웹사이트에 적용됩니다. 상위 10개 웹사이트 중 단 하나의 시간이 5% 이상 20% 미만입니다. 나머지 80%의 시간은 웹페이지의 다른 콘텐츠, 즉 프런트엔드(원본 텍스트가 프런트)를 읽는 데 사용됩니다. -end, 의미는 html을 포함하지 않음 나머지 코드는 그림, 스크립트, 플래시, 비디오 등이 될 수 있습니다. 이것이 표시 속도를 향상시키기 위해 이러한 사항에 집중해야 하는 주요 이유입니다.
프런트 엔드부터 시작해야 하는 세 가지 주요 이유는 다음과 같습니다 .
1. 코드 외부에는 다음 세 가지 방법이 있습니다.
1. CDN 기술을 활용하라
구체적인 방법은 구글에 검색해 보세요. (방문자의 위치와 접속한 콘텐츠를 파악하여 가장 가까운 서버를 선택하여 사용자의 요청을 처리하는 것이 일반적인 원칙인 것 같습니다)
2. 오래 만료된 헤더 추가
만료: 2010년 4월 15일 목요일 20:00:00 GMT
브라우저는 페이지 로딩 시간을 단축하기 위해 캐싱을 사용합니다. 페이지 헤더에 긴 만료 시간이 추가되면 브라우저는 항상 페이지의 요소를 캐시합니다.
그러나 이로 인해 문제가 발생합니다. 즉, 페이지의 내용이 변경되면 이름을 변경해야 하며, 그렇지 않으면 클라이언트가 적극적으로 새로 고침되지 않습니다. Yahoo 작업 그룹에서는 yahoo_2와 같은 버전 번호가 사용됩니다. 0.6.js
3.Gzip 압축
Gzip은 오늘날 가장 인기 있고 효과적인 압축 방법으로 GNU에서 개발되었으며 RFC1952에 의해 표준화되었습니다.
(Gzip은 서버측에서 이미지, CSS, 스크립트 등을 압축한 후 클라이언트의 브라우저로 보내 압축을 푼다. 이렇게 하면 전송 속도를 높일 수 있지만 서버에 부담이 커지게 된다. 일반적으로 더 적합하다. 일부 요소를 압축합니다.