집 > 기사 > 웹 프론트엔드 > 웹 페이지 성능을 향상시키기 위해 HTML을 최적화하는 방법

웹 페이지 성능을 향상시키기 위해 HTML을 최적화하는 방법

小云云원래의: 2017-11-20 09:18:562804검색

웹페이지 성능을 향상시키는 방법에는 js를 사용하거나 서버 구성 및 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 문서 유형 사용:

XML/HTML 코드를 사용하여 내용을 클립보드에 복사

<!DOCTYPE html>  
<html>  
<head>  
<title>Recipes: pesto</title>  
</head> 
<body>  
  <h1>Pesto</h1>  
 <p>Pesto is good!</p>  
 </body>  
</html>

페이지 상단에 있는 CSS 파일을 인용하세요. 머리 부분 요소:

CSS 코드는 내용을 클립보드에 복사합니다.

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

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

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

JavaScript 코드는 내용을 클립보드에 복사합니다.

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

　 JavaScript에 이벤트 처리를 추가합니다. HTML에 추가하지 마세요. 예를 들어,

XML/HTML 코드 내용을 클립보드에 복사

index.html:

<head>  
  ...   
  <script src="js/local.js">  
  
</head>  
  
<body onload="init()">  
  ...   
  <button onclick="handleFoo()">Foo</button>  
  ...   
</body>

　 훨씬 더 좋습니다:

JavaScript 코드 내용을 클립보드에 복사

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

XML/HTML 코드 클립보드에 콘텐츠 복사

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

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

XML/HTML 코드 클립보드에 콘텐츠 복사

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

하지만 다음 작성 방법을 사용하면 오류를 방지하고 단락 계층 구조를 더욱 명확하게 만들 수 있습니다.

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

　　items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。

XML/HTML Code复制内容到剪贴板

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

　　有一点你必须注意video和audio元素。他们不是自封闭的：

XML/HTML Code复制内容到剪贴板

2f1326fc2f646a8faff2bb58dc66418c

<video src="foo.webm" />

9b6785e5cb2693150f7d9cd2f51aefeb

<video src="foo.webm">  
  <p>Video element not supported.</p>  
</video>

　　相反，通过删除不必要的代码HTML页面会变得更干净

　　没有必要为自封闭元素添加"/"，像img等

　　设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

　　video，它是没有任何属性的

XML/HTML Code复制内容到剪贴板

<video src="foo.webm">

　　下面两种更好

XML/HTML Code复制内容到剪贴板

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

　　这种可读性更强

XML/HTML Code复制内容到剪贴板

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

　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

XML/HTML Code复制内容到剪贴板

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>

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

XML/HTML Code复制内容到剪贴板

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

　　而这种则像个链接

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

　　应该使用小写

XML/HTML Code复制内容到剪贴板

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

　　大小写混合看上去更恶心

XML/HTML Code复制内容到剪贴板

<H2>Pesto</h2>

　语义标记

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

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

　　HTML5引入了一些新的‘语义元素’像 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d 和 c787b9a589a3ece771e842a6176cf8e9。

　　使用正确的元素表达正确的内容对于可访问性是有帮助的。

　　使用4a249f0d628e2318394fd9b75b4636b1c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355代表标题， ff6d136ddc5fdfeffaf53ff6ee95f185或c34106e0b4e09414b63b2ea253ff83d6代表lists

　　注意23c3de37f2f9ebcb477c4a90aac6fffd的标题应该以4a249f0d628e2318394fd9b75b4636b1开始

　　使用1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d, c787b9a589a3ece771e842a6176cf8e9 and 15221ee8cba27fc1d7a26c47a001eb9b

　　使用e388a4556c0f65e1904146cc1a846bee写正文

　　使用907fae80ddef53131f3292ee4f81644b 和 8e99a69fbe029cd4e2b854e244eab143 代替 5a8028ccc7a7e27417bff9f05adf5932 和 a4b561c25d9afb9ac8dc4d70affff419 表示强调

　　表单使用2e1cf0710519d5598b1f0f14c36ba674元素，input 类型

　　混合文字和元素会导至布局的问题

XML/HTML Code复制内容到剪贴板

<div>Name: <input type="text"></div>

　　最好用下面的表示

XML/HTML Code复制内容到剪贴板

<div><label>Name:</label><input type="text"></div>

　布局

　　HTML应该使用有意义的组织结构，而不是通过样式来实现。

　　使用e388a4556c0f65e1904146cc1a846bee元素代表文本，而不是用来布局。

　　避免使用0c6dc11e160d3b678d68754cc175188a来换行，使用块级元素和CSS来代替。

　　避免使用水平分隔线f32b48428a809b51f04d3228cdf461fa。使用CSS的border样式来控制。

　　不要使用不必要的DIV。W3C对DIV的定义是排序的是最后一个元素。

　　要了解哪些元素是块级元素，避免在DIV中放置不必要的块级元素。将一个list放到div中是没有必要的。

　　不要使用table来布局。

　　Flex box是被广泛推荐的，能用就用吧。

　　使用CSS的padding和margin，理解盒子模型。
　CSS

　　这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。

　　避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。

　　避免ID出现重复。

　　如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：

XML/HTML Code复制内容到剪贴板

743c50a7387311514c3debdf2b2f5314

<ul>  
  <li class="ingredient">Basil</li>  
  <li class="ingredient">Pine nuts</li>  
  <li class="ingredient">Garlic</li>  
</ul>

e183d76c645fd696b46e29069992c16d

<ul class="ingredients">  
  <li>Basil</li>  
  <li>Pine nuts</li>  
  <li>Garlic</li>  
</ul>

以上就是如何通过优化HTML代码来提高网页性能的方法，希望对大家有帮助。

웹 페이지 성능을 향상시키기 위해 HTML을 최적화하는 방법

관련 기사