작년에 그가 Perfection kills에 관해 쓴 기사를 봤습니다. HTML 최적화에 대해 매우 자세하게 설명되어 있지만, 그 내용 중 일부는 현재 환경에서 적용할 수 없습니다. WEB 애플리케이션이 점점 프론트엔드화되는 추세 속에서 클라이언트 측 최적화는 Yahoo의 사례와 같이 코드를 줄이는 방법, 사용자에게 애플리케이션을 빠르게 표시하는 방법, 사용자 대기 시간을 줄이는 방법 등 점점 더 많은 주목을 받고 있습니다. 최적화의 34가지 황금률 세부적인 최적화 계획을 제안합니다.
웹 페이지 최적화의 가장 기본적인 부분은 HTML 최적화여야 합니다. 특히 첫 번째는 마크업 정리입니다. 마크업을 정리하면 문서 크기를 줄일 수 있을 뿐만 아니라 문서를 더 쉽게 유지하고 검색 엔진의 가시성을 높일 수 있습니다. 마크업은 더 나은 접근성), 더 쉬운 유지 관리 및 좋은 검색 엔진 가시성을 의미합니다. 그러나 고도로 최적화되었다고 하는 웹 페이지의 경우에도 코드를 자세히 살펴보면 삭제하거나 삭제할 수 있는 태그 사용을 많이 찾을 수 있습니다. 구식입니다:
1.스크립트의 주석 문자
95 Netscape 1.0과 같이 거의 멸종된 브라우저가 이러한 처리를 요구하지 않는 한, 대부분의 주류 브라우저에서 HTML 주석을 스크립트 블록에 추가하는 것은 완전히 불필요합니다.
2.
<스크립트 유형="텍스트/자바스크립트">
// ...
//]]>
이는 js 코드 블록에 자주 추가되는 또 다른 오류 방지 조치입니다. 이는 코드가 실제 XHTML 문서("application/xhtml+xml" 콘텐츠 유형)를 처리할 때 태그의 시작 부분으로 < 기호를 구문 분석하는 것을 방지하는 것입니다. . CDATA에 포함된 모든 콘텐츠는 텍스트로 처리됩니다. 그러나 실제 상황은 현재 거의 모든 웹 페이지의 콘텐츠 유형이 text/html이므로 엄밀한 의미에서는 XML 문서가 아니라 텍스트 텍스트일 뿐이므로 이러한 오류 방지 조치는 전혀 필요하지 않습니다. xml 문서를 반드시 지원한다면 상황에 따라 CDATA를 적절하게 사용해야 합니다.
3.onclick=”…”, onmouseover=””등등.
HTML 태그에 이벤트 속성을 작성하는 것은 매우 현명하지 못한 관행입니다. 이는 코드의 유지 관리성을 감소시키고 태그를 오염시킵니다. 이벤트 속성이 JS를 통해 동적으로 추가되면 유연하게 제어할 수 있을 뿐만 아니라 JS 클라이언트도 제어할 수 있습니다. 캐싱의 장점은 이러한 이벤트 속성이 모든 문서 요청을 따를 필요가 없다는 것입니다.
4.onclick="자바스크립트:…"
이것은 흥미로운 자바스크립트 혼란입니다. 의사 프로토콜과 내장 이벤트 핸들러는 최대 100,000개의 중복 조합을 만들 수 있습니다. 사실은 이벤트 속성 내부의 콘텐츠가 구문 분석 후 본문의 기능이 된다는 것입니다. . 이므로 여기서 javascript:는 쓸모 없는 중복 태그가 됩니다.
5.href="javascript:void(0)"
계속해서 javascript: pseudo-protocol을 사용하면 악명 높은 것 중 하나가 javascript:void(0)입니다. 이는 기본 앵커 작업을 피하는 데 사용됩니다. 이로 인해 JS가 정상적으로 구문 분석하지 못하거나 오류가 발생합니다(비활성화/사용할 수 없음/ 오류) 앵커 포인트를 전혀 사용할 수 없는 경우 이상적인 해결 방법은 href에 올바른 URL을 입력한 다음 JS를 사용하여 이를 동적으로 다시 작성함으로써 JS가 실행되지 않아도 앵커 포인트를 사용할 수 없게 되는 것입니다. HREF="#"은 간소화되고 빠른 대안입니다.
6. 스타일=”…
본질적인 오류는 없으나 나중에 유지관리가 번거롭습니다. 또한, 외부 CSS 파일로 옮기면 페이지 실행 효율성을 높이기 위해 캐시할 수 있습니다.
7. <스크립트 언어="자바스크립트"… >
이것이 스크립트의 "언어"라고 생각하는 가장 오해받는 속성 중 하나는 너무 오래되어서 1999년에 더 이상 사용되지 않습니다.
8. <스크립트 문자셋=”…” …>
오해하기 쉬운 또 다른 스크립트 태그 속성인 charset은 HTML4.01에 설명되어 있습니다. charset 속성은 문자의 src 속성에 의해 지정된 스크립트 인코딩을 참조하며 스크립트 요소의 내용과 관련이 없습니다. (charset 속성은 src 속성으로 지정된 스크립트의 문자 인코딩을 참조하며 SCRIPT 요소의 내용과 관련이 없습니다.) 즉, 개요를 작성할 때 스크립트 파일의 인코딩 형식만 지정합니다. 스크립트. 권장되지 않습니다.