고성능 HTML 애플리케이션 작성-HTML 튜토리얼-php.cn

웹페이지 성능을 어떻게 향상할 수 있나요?

대부분의 개발자는 JavaScript 및 이미지, 서버 구성, 파일 압축 및 파일 병합을 통해 최적화하며 심지어 CSS 조정(작은 이미지 병합)도 수행합니다.

항상 인터넷의 핵심 언어였음에도 불구하고 잘못된 HTML은 항상 무시됩니다.

HTML은 점점 더 커지고 있습니다. 상위 100개 웹사이트의 각 HTML 페이지는 대부분 약 40K입니다. Amazon과 Yahoo는 수천 개의 HTML 페이지를 사용합니다. youtube.com의 메인 페이지에는 무려 3,500개의 HTML 요소가 있습니다.

HTML의 복잡성과 페이지의 요소 수를 줄이면 구문 분석 시간이 크게 향상되지 않습니다. 그러나 HTML은 매우 빠른 웹 페이지를 구축하고 다양한 장치에 적응하며 성공에 영향을 미치는 중요한 요소입니다.
이 기사에서는 간결하고 깔끔한 HTML을 작성하여 빠르게 로드되고 여러 장치를 지원하며 디버그 및 유지 관리가 쉬운 웹사이트를 만드는 방법을 배웁니다.

코드를 작성하는 데 정해진 방법은 없습니다. 특히 HTML은 더욱 그렇습니다. 이것은 단지 일반적인 경험일 뿐, 유일한 올바른 선택은 아닙니다.
HTML, CSS 및 JavaScript

HTML은 구조와 내용을 표현하는 데 사용되는 마크업 언어입니다.

HTML을 사용하여 스타일과 스타일을 표시해서는 안됩니다. "더 크게" 표시되도록 제목 태그(h1~h6)에 텍스트를 넣거나 단지 들여쓰기를 위해 인용부호 요소를 사용하지 마세요. 대신 CSS를 사용하여 요소의 모양과 레이아웃을 변경하세요.

HTML 요소의 기본 모양은 브라우저의 기본 스타일을 통해 이루어집니다. Firefox, Internet Explorer 및 Opera는 모두 다릅니다. 예를 들어 Chrome에서는 h1 요소가 기본적으로 32px 크기로 렌더링됩니다.

　 세 가지 기본 원칙:

HTML을 사용하여 구조를 표현하고, CSS를 사용하여 다양한 스타일과 테마를 표현합니다. 사용자 작업에 응답하는 JavaScript입니다.

필요한 경우 HTML, CSS를 사용하고 필요한 경우 JavaScript를 사용하세요. 예: 대부분의 경우 유효성 검사에는 HTML 양식을 사용하고 애니메이션에는 CSS 또는 SVG를 사용할 수 있습니다.

HTML 코드에서 CSS와 JavaScript를 분리하세요. 캐시 가능하게 만들면 코드 디버깅이 더 쉬워집니다. 프로덕션 환경에서 CSS와 JavaScript는 축소 및 병합될 수 있으며 빌드 시스템의 일부로 포함되어야 합니다. 참고* JavaScript 구축(컴파일) 시스템 경쟁
문서 문서 구조

HTML5 문서 유형 사용:

<!DOCTYPE html>
<html>
<head>
 <title>Recipes: pesto</title>
</head>
<body>

  <h1>Pesto</h1>
  <p>Pesto is good!</p>

</body>
</html>

로그인 후 복사

페이지 상단 참조 head 요소와 같이 CSS 파일을 부분적으로:

<head>   
  <title>My pesto recipe</title>   
  <link rel="/css/global.css">   
  <link rel="css/local.css">   
</head>

로그인 후 복사

이러한 방식으로 브라우저는 혼란스러운 페이지 레이아웃을 렌더링하지 않고 HTML을 구문 분석하기 전에 스타일을 미리 로드할 수 있습니다.

본문이 닫히기 전 페이지 맨 아래에 JavaScript를 배치하세요. JavaScript가 로드되기 전에 브라우저가 페이지를 렌더링할 수 있으므로 페이지 렌더링 시간이 향상됩니다.

<body>   
  ...   
  <script src="/js/global.js">   
  <script src="js/local.js">   

</body>

로그인 후 복사

JavaScript에 이벤트 처리를 추가합니다. HTML에 추가하지 마세요. 이는 유지 관리가 매우 어렵습니다. 예:

index.html:   

<head>
  ...   
  <script src="js/local.js">

</head>

<body onload="init()">
  ...   
  <button onclick="handleFoo()">Foo</button>
  ...   
</body>

로그인 후 복사

훨씬 더 좋습니다.

<head>   
  ...   
</head>   

<body>   
  ...   
  <button id="foo">Foo</button>   
  ...   
  <script src="js/local.js">   
</body>   

　　js/local.js:   

init();   
var fooButton =   
    document.querySelector(&#39;#foo&#39;);   
fooButton.onclick = handleFoo();

로그인 후 복사

법적 HTML

웹페이지 성공의 주요 요인은 브라우저가 유효하지 않은 HTML을 처리할 수 있다는 것입니다. 브라우저에는 유효하지 않은 코드를 렌더링하는 방법에 대한 몇 가지 표준화된 규칙도 있습니다.

하지만 그렇다고 해서 놓아줄 이유는 없습니다. 유효한 HTML은 디버그하기 쉽고, 파일 크기가 더 작은 경향이 있고, 더 빠르며, 렌더링 속도가 더 빠르기 때문에 더 적은 리소스를 사용합니다. 잘못된 HTML은 반응형 디자인을 구현하기 어렵게 만듭니다.

템플릿을 사용할 때는 유효한 HTML을 작성하는 것이 특히 중요합니다.

BUILD 시스템에서 HTML 유효성 검사: HTMLHint 및 SublimeLinter와 같은 유효성 검사 플러그인을 사용하여 HTML 구문을 확인하세요.

HTML5 문서 유형을 사용하세요.

HTML 계층 구조를 유지해야 합니다. 요소를 올바르게 중첩하고 닫히지 않은 요소가 없는지 확인하세요. 디버거가 주석을 추가하는 데 도움이 됩니다.

<p id="foobar">
...   
</p> <!-- foobar ends -->

로그인 후 복사

자체 닫히지 않는 요소 뒤에 닫는 태그를 추가해야 합니다. 예를 들어 다음도 작동합니다.

<p>Pesto is good to eat...   
<p>...and pesto is easy to make.

로그인 후 복사

그러나 다음을 따르면 됩니다. 실수를 피하고 단락 계층 구조를 더 명확하게 만드세요.

페스토는 먹기 좋습니다...

...그리고 페스토 .

items 요소(li)는 닫을 필요가 없습니다. 일부 매우 똑똑한 프로그래머는 이렇게 작성할 것입니다. 그러나 목록 요소(ul)는 닫혀야 합니다. .

rree

주목해야 할 것 중 하나는 비디오와 오디오 요소입니다. 자동으로 닫히지 않습니다:

<ul>
  <li>Basil   
  <li>Pine nuts   
  <li>Garlic   
</ul>

로그인 후 복사

대신 불필요한 코드를 제거하여 HTML 페이지가 더욱 깔끔해집니다.

자체적으로 추가할 필요가 없습니다. img 등과 같은 "/" 요소를 닫습니다.

속성을 추가하지 않으면 설정 속성에 값이 없습니다(이 경우 자동으로 재생되지 않으며 제어 컨트롤이 없습니다),

동영상, 속성이 없습니다

<!-- 错误: liable to cause layout grief -->
<video src="foo.webm" />

<!-- 正确 -->
<video src="foo.webm">
  <p>Video element not supported.</p>
</video>

로그인 후 복사

다음 두 개가 더 좋습니다

<video src="foo.webm">

로그인 후 복사

이것은 더 읽기 쉽습니다

<video src="foo.webm" autoplay="false" controls="false">
<video src="foo.webm" autoplay="true" controls="true">

로그인 후 복사

스타일렛 및 스크립트 태그에는 유형 속성이 필요하지 않습니다. 기본값은 css 및 javascript입니다

프로토콜 주소를 최적화하는 것이 좋습니다( http 또는 https를 제거하면 현재 계약에 따라 자동으로 할당됩니다.)

<video src="foo.webm" autoplay controls>

로그인 후 복사

　　增强可读性，如，第一眼看上去就像是个标题

<h2><a href="/contact">Contact</a><h2>

로그인 후 복사

　　而这种则像个链接

Contact

　　应该使用小写

<A HREF="/">Home</A>

로그인 후 복사

　　大小写混合看上去更恶心

<H2>Pesto</h2>

로그인 후 복사

　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像