Wulin.com의 기사 소개 (www.vevb.com) : 많은 사람들이 HTML5가 무엇인지 묻습니다. 우리는 HTML5를 먼저 사용할 수있는 방법은 많은 페이지가 여전히 전통적인 방식이기 때문에 먼저 DocType를 변경하는 것입니다. HTML5 방법은 IE 브라우저와 호환되며 IE6에서 IE10으로 사용할 수 있으며 고급 브라우저에서 지원할 수 있습니다.
[Editor 's Note] 다음 기사는 InfoQ 웹 페이지에 게시 된 Zhang Liming이라는 IT 기술자가 작성했습니다. 이번에는 전체 텍스트의 9 가지 다른 측면에서 HTML5의 성능을 분석했으며, 이는 여전히 해당 개발자가 읽을 가치가 있습니다.
성능 관점에서 HTML5는 먼저 HTML 문서를 줄여서 더 간단하게 만듭니다. 첫째, 사용자 가독성의 관점에서, 처음으로 초보자가 처음으로 이해하지 못했던 많은 것들이 있었으며, HTML5 선언 방법은 사용자에게 더 친숙합니다. 둘째, 문서 인코딩 선언은 HTML5에있는 경우 매우 간단합니다. 많은 사람들이 HTML5가 무엇인지 묻습니다. 우리는 HTML5를 먼저 사용할 수있는 방법은 많은 페이지가 여전히 전통적인 방식이기 때문에 먼저 DocType를 변경하는 것입니다. HTML5 방법은 IE 브라우저와 호환되며 IE6에서 IE10으로 사용할 수 있으며 고급 브라우저에서 지원할 수 있습니다. 따라서 HTML5를 수용하는 가장 쉬운 방법은 DocType을 변경하는 것입니다.
1. 더 간단한 레이블
다음은 그다지 흔하지 않을 수 있지만 더 간단한 레이블 방법을 사용하여 선호하는 것입니다. 이 이름에서 알 수 있듯이 HTML5는 HTML4에서 상속됩니다. HTML4는 엄격한 모드 및 전환 모드를 갖습니다. HTML5는이 전환 모드를 지원하므로 일부 태그를 닫을 수 없습니다. 그러나 모든 태그를 권장하지는 않습니다. 예를 들어, 바디 태그가 닫히지 않았으므로 권장하지 않습니다. 그러나 가장 일반적으로 사용되는 P- 라벨은 목록 태그 Li입니다. 왜 그렇게 말합니까? 우선, 시각적 인 관점 에서이 방법은 약간 간단합니다. 핵심은 문서 전송 과정에서 내용이 적다는 것입니다.
HTML5 태그 속성 선언은 단일 괄호, 이중 괄호 및 브랜치 브래킷의 세 가지 방법을 지원합니다. 문서의 크기를 줄이기 위해 이중 인용문이나 단일 따옴표없이 메소드를 선택했습니다. 그러나 속성에는 여러 클래스가 포함될 수 있고 여러 클래스가 괄호 안에 둘러싸여 있어야하기 때문에 클래스 속성 선언이라고 가정해야합니다. 이와 관련하여 Google의 연습을 보여 드리겠습니다. Google 자체에는 위의 내용을 완전히 연습하여 문서 크기를 20%줄이고 HTML 문서의 전송을 20%줄입니다. 모든 것이 실행되면 5%에서 20% 사이의 감소를 달성 할 수 있습니다. 이것은 HTML 문서의 크기를 줄이는 첫 번째 단계입니다.
2. 그림 최적화
다음은 그림의 최적화에 관한 것입니다. 그림은 항상 사랑과 증오하는 요소입니다. 그림이 너무 많으면 전체 페이지의 로딩 속도가 심각하게 드래그됩니다. 사진의 최적화 방법과 관련하여, "고성능 웹 사이트"책에는 많은 소개가 있습니다. 요약하면, 엘프 사용, 그림 크기 최적화 및 데이터 URI 사용의 세 가지 주요 요점이 있습니다. 나는 여기서 세부 사항으로 들어 가지 않을 것입니다.
이미지 최적화에 대한 또 다른 아이디어는 : No-Image입니다. 그림을 버리고 CSS3를 포용하십시오. 원래, 나는 둥근 코너 효과가있는 그림을 설정해야했지만 이제는 CSS3에서 Border-Radius를 사용했습니다. 나는 그림자 효과를 설정했지만 이제는 CSS3에서 Box-Shadow를 사용합니다. 그라디언트 배경 이미지를 설정했지만 이제는 CSS3에서 그라디언트를 사용합니다.
3. 사전 가져 오기
다음으로 Prefetching에 대해 이야기 해 봅시다. 이것은 또 다른 최적화 방법입니다. 우리의 현재 최적화 아이디어는 거의 없습니다. 그들 중 다수는 예를 들어, 문서 크기가 이전에 줄어들고 이미지 크기가 줄어드는 것과 같이 적은 수의 관점에서 나온 것입니다. 보내기 요청의 수를 줄이기 위해 많은 사진이 엘프가됩니다. 프리 페치의 경우 또 다른 사고 방식입니다. 자원을 조기 로딩합니다. 사용자가 요점으로 가면 실제로로드되었으므로 확실히 더 빠릅니다.
프리 페치에는 두 가지 부분이 있습니다. 하나는 리소스의 프리 페치이고 다른 하나는 DNS의 사전 분리입니다.
리소스가 사전로드 시점에 주목해야 할 몇 가지 사항이 있습니다.
사전 로딩은 브라우저가 유휴 상태 일 때만 당기지 만 당기는 것은 보장되지 않습니다. 이것은 매우 중요한 지점입니다. 브라우저 자체에는 내부 인터페이스 인 글로벌 리스너가 있기 때문입니다. 브라우징 공기가 유휴 상태 인 경우 유휴 상태에서 브라우저가 실행되지만이 유휴 콜백은 트리거되지 않을 수 있으므로 사전로드가 수행 될 것이라고 보장하지 않습니다.
Chrome은 HTTPS 리소스의 사전로드를 지원하지 않습니다. 예를 들어, Alipay는 HTTPS 페이지이며 Chrome은 사전 풀이되지 않습니다.
사전 파괴 된 페이지가 존재 한 후에는 보이지 않지만 실제로는 정상적으로 구문 분석됩니다. 로그인 페이지를 미리 정리하면 로그인 페이지에는 그림, CSS 파일 및 JS 파일과 같은 많은 리소스가 있습니다. 정상적으로 위에서 아래로 구문 분석됩니다. 구문 분석 과정 에서이 페이지는 나타나지 않지만 실제로 존재합니다. HTML5에서는 Document.VisibilityState를 통해 현재 페이지 상태를 얻을 수 있습니다. 일반적으로 페이지에는 눈에 보이지 않고 보이지 않는 두 개의 상태가 있지만 이제는 사전 렌더링 상태라는 새로운 상태가 있습니다. 문서 .VisibilityState가 Prerender와 같은지 여부에 따라 페이지가 프레젠더 상태에 있는지 직접 결정할 수 있습니다.