태그로 웹 사이트 속도를 높이는 방법
"예지"브라우저는 최고의 인터넷 서핑의 미래입니다., 우리가 원하는 자원을 우리에게 가져다주었습니다. 우리가 알기도 전에 우리는 그들을 원한다.. 오늘의 브라우저는 이미 하다 약간 예측 이제 문서 가져 오기 및 렌더링 속도를 높입니다. 이것을 다음 단계로 가져 가기 위해 우리는 웹 개발자 이외의 다른 사람을 찾지 않습니다..
개발자는 꽤 좋은 생각 의 웹 사이트 탐색 방법, 어떤 리소스가 가장 자주 요청됩니다. 따라서 브라우저가 사이트에 대해 수행해야 할 향후 작업을 예측할 수 있습니다. 이제는 개발자가 개발자에게 이들을 중계하다 예측 브라우저로 과 그들을 잘 쓰다. 이것은 특별한 "HTML 링크"가 들어오는 곳입니다..
HTTP 요청에 대한 리프레셔
이러한 링크를 살펴보기 전에 일반적인 HTTP 요청 파일 가져 오기 작업이 수행되는 방식에 대한 우리의 기억을 새로 고쳐야 할 때입니다. Joe라는 누군가가 웹 사이트를 방문하려고한다고 가정 해 봅시다..
다음은 어떻게 될까요?
- Joe는 브라우저의 검색 주소창에 웹 사이트의 사람이 불러 낼 수있는 주소를 입력하고 "Enter"키를 누릅니다..
- 해당 주소를 받으면 브라우저는 DNS 서버 (ISP의 칭찬)에게 Joe가 제공 한 주소의 IP 주소를 묻습니다.
- DNS 서버의 의무.
- 브라우저가 IP 주소를 알고 있으므로 웹 사이트의 서버에 TCP dialect의 메시지를 보내 연결을 요청합니다..
- 서버가 정상적으로 작동하고 있으면 브라우저의 요청을 승인하는 응답을 보내고 브라우저는 서버의 메시지에 응답하고 응답합니다. (노트예, 이것은 클라이언트와 서버 사이의 TCP 핸드 셰이크 다운 버전입니다.
- 핸드 셰이크가 끝나면 둘 사이에 연결이 설정됩니다..
- 이제 브라우저는 방언 스타일을 HTTP로 변경하고 서버에 웹 사이트를 요청합니다..
- 서버는 웹 사이트의 홈 페이지가 브라우저에서 수신하고 컴퓨터 앞에서 참을성있게 기다리고있는 조에게 보여준 바로 그 것을 반환한다는 것을 알고 있습니다..
일반적인 HTTP 요청은 모든 그것은 인터넷을 통해 문서를 가져 오는 것입니다. 따라서 이러한 과정 중 하나라도 가능한 경우 점프 스타트 할 수있다., 우리는 할 수있다. 우리가 원하는 자원의 배달을 기다려야하는 시간을 줄이십시오..
HTML 링크 관계
W3C는 4 개의 HTML 링크 관계를 지정합니다 (rel 관계를 위해) named DNS- 프리 페치, 사전 연결, 프리 페치, 과 미리 준비하다. 함께 (W3C에 의해) 그들은 "리소스 힌트"이제 우리는 그들이 할 수있는 일 과 어디에서 사용할 수 있는지.
1. DNS 프리 페치
DNS 프리 페치에서 도메인 이름 확인 (일명 DNS 서버에서 일치하는 IP 주소 얻기)가 미리 수행됩니다..
자매 사이트에 대한 많은 참조 링크가있는 웹 사이트에 참조 페이지가 있다고 가정 해 보겠습니다. 사용자가 참조 페이지를 방문하면 높은 확률 사용자가 자매 사이트로 이동할 것입니다. 그래서, 초기 DNS 조회 자매 사이트의 경우 사이트를 여는 데 걸리는 시간을 줄일 수 있으므로 사용자 경험이 향상됩니다..
이 DNS 프리 패치를 통한 대기 시간 감소 이 코드를 참조 페이지에 추가하여 수행 할 수 있습니다..
브라우저가 참조 페이지에서이 코드를 처리하면 자매 사이트의 DNS 조회가 작업 대기열에 추가되고 대기열의 다른 우선 순위가 높은 작업이없는 경우 자매 사이트의 DNS 확인이 시작됩니다. 자매 사이트.
따라서 사용자가 마침내 자매 사이트로 연결되는 링크 중 하나를 클릭하면 해당 사이트의 DNS 확인이 이미 완료되었을 수 있으며 브라우저는 자매 사이트와의 클라이언트 - 서버 TCP 연결을 바로 시작할 수 있습니다 서버, 페이지로드 속도 향상시키기.
이 기능은 2016 년 3 월 현재 Safari를 제외한 거의 모든 최신 브라우저에서 사용할 수 있습니다..
2. 사전 연결
Preconnect는 DNS 프리 페치에서 한 걸음 더 나아가 나중에 요청이있을 수있는 서버에 대한 연결을 설정합니다..
W3C는 preconnect에 대한 이상적인 사용 사례를 나열합니다. 리디렉션. 개발자는 여러 가지 이유로 리디렉션을 사용합니다..
이 경우 브라우저의 다음 요청 (리디렉션 된 사이트)은 100 % 예측 가능, 할 수있다. 미리 연결되다, 에 네비게이션 레이턴시 감소.
중개 사이트 페이지가 "xyzsite"다음 HTML 링크를 사용하면 브라우저가 xyzsite 서버와 사전 연결을하게되며 중간 페이지로 이동하게됩니다.
2016 년 3 월부터 Chrome, Opera 및 Firefox에서 사용할 수 있습니다..
3. 프리 페치
와 프리 페치, 리소스의 경우 브라우저 리소스 도메인 이름의 DNS 확인 구현 시작, 그때 자원의 서버와 TCP 연결을 수행합니다., HTTP 요청을 만들고 마지막으로 프리 패치 된 자원을 페치하고 저장합니다. 브라우저 캐시에서.
나중에 필요할 자원이 무엇인지 확실하면 미리 가져올 자원입니다. 거기에 캐치가있다.. 프리 페칭은 추측을 필요로합니다., 잘못 생각하면 사이트 속도를 높이는 대신 실제로 속도를 줄 일 수 있습니다..
온라인 서적, 갤러리 또는 포트폴리오의 경우 사용자가 다음 페이지로 이동할 가능성이 가장 높은 경우 다음과 같은 자원을 프리 페치합니다. 이미지들, 크게 속도를 낼 수 있습니다. 여기에 해당 코드가 있습니다..
프리 페치는 Chrome, Firefox 및 Opera에서 지원됩니다..
4. 프리 렌더
HTML 페이지의 경우에만 미리 렌더링을 수행 할 수 있습니다. 미리 렌더링 된 HTML 페이지는 오프라인으로 렌더링 됨, 실제로 사용자가 필요로 할 때 화면에 그려집니다. 표현 높은 계산 작업 및 메모리 리소스 비용; 또한 페이지를 렌더링하기 위해 브라우저에 추가 리소스 (예 : 페이지에 추가 된 이미지)가 필요할 수 있습니다. 더 많은 결과 요청 브라우저 별.
그래서, 미리 준비하다 이어야한다 주의해서 사용하다, 과용하지 마십시오. 다음 코드를 추가하면 사전에 "정보"페이지가 미리 렌더링됩니다..
프리 렌더 기능은 2016 년 3 월 Chrome, IE 및 Opera에서 사용할 수 있습니다..
몇 가지주의 할 점
(1) 위에서 언급 한 리소스 힌트 중 어느 것도 브라우저가 사용자가 현재 페이지의 작업에 필요한 요청을 처리하는 데 이미 바쁜 경우에 이러한 다양한 최적화 단계를 실행하고 완료하는 것을 보장하지 않습니다 사용자의 현재 작업을 방해 할 수있다..
그래서, 모든 것이 브라우저가 충분히 자유롭게 느낄 때 대기하고 실행.
이러한 리소스 힌트는 반드시 페이지를로드하기 전에 페이지에 있어야 할 필요는 없습니다. 그들은 할 수있다 JavaScript에 의해 나중에 추가됨, 그리고 리소스 힌트는 평상시처럼 그들의 일을 할 것입니다..
(2) W3C는 HTML 링크 속성 전화 한 힌트 확률, 홍보 이러한 리소스 힌트에 대한 값 (0에서 1까지의 값)은 향후 요청이 발생할 확률을 제공하는 데 사용할 수 있습니다. 나는이 속성이 아직 어떤 브라우저에서도 구현되는 것을 보지 못했습니다. 예를 들어, 다음 코드는 앞으로 xyzsite가 요청 될 확률이 80 %이고 about 페이지가 30 %라고 설명합니다..
또한 선택적인 crossorigin 속성을 리소스 힌트에 추가하여 브라우저에 링크 된 요청의 CORS 자격 증명을 알릴 수 있습니다.
