HTML代碼的優(yōu)化技巧代碼優(yōu)化技巧有哪些？

猿友 2021-03-11 14:27:28 瀏覽數 (3852)

反饋

HTML 作為現如今最熱門的開發(fā)技術基礎之一，相信很多人都不陌生，那么在進行 HTML 編程的時候出現累贅冗長的代碼對后續(xù)的閱讀很不友好，接下來小編就帶你學習如何對 HTML 代碼進行優(yōu)化 HTML代碼優(yōu)化

HTML 經過長久以來的發(fā)展成為了開發(fā) Web 界面必備的核心語言，所以 HTML 頁面的負載量也是日益加重。相對于大部分的頁面都是需要40K的空間容量，而較大型網站的代碼則會擁有成千上萬的 HTML 元素，這就導致頁面 Size 會非常大。

那么如何去顯著的降低 HTML 代碼復雜程度和HTML元素的數量呢？本文帶你解決這個問題，從多個角度介紹怎樣簡練的編寫清晰的 HTML 代碼，能讓你的頁面加載速度提升一個檔次，并且還能在多種設備良好運行。

開發(fā)和設計原則

結構的分離去使用 HTML 增加結構，而不是樣式內容
保持代碼的整潔，為工作流添加代碼驗證的工具，使用工具或樣式向導維護代碼結構和格式
學習新語言，獲取語義標記與元素結構。
為了能夠正常訪問可以使用 ARIA 屬性與 Fallback 屬性等
代碼測試，使網站在多種設備中能夠良好運行，可使用 emulators 和性能工具。

html開發(fā)設計原則

HTML, CSS和JavaScript三者關系

HTML 是用于構建頁面結構和內容的標記語言，HTML 無法用于修飾內容的樣式效果，也不能在開頭標簽中輸入文本內容會使得代碼變得復雜及冗長，相反我們使用 CSS 來修飾頁面布局和外觀比較合適。

HTML 元素默認的外觀是通過瀏覽器樣式表定義的，例如在谷歌中?<h1>?標簽會被渲染成 32px 的粗體。

三條通用設計規(guī)則：

使用 HTML來構建頁面結構，CSS 修飾頁面樣式，JavaScript 實現頁面動態(tài)功能。
可以用 CSS 或 JavaScript 實現就少用 HTML 代碼。
將 CSS 和 JavaScript 文件與 HTML 分離開，有助于緩存和調試。

文檔結構方面優(yōu)化

使用 HTML5 文檔類型

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

文檔起始位置引用 CSS 文件

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

使用以上兩種方法，瀏覽器就會在解析 HTML 代碼前將 CSS 代碼準備好。這樣有助于提高頁面加載性能。

在頁面底部 body 結束標簽前輸入 JavaScript 代碼，這樣有助于提升頁面加載的速度，因為瀏覽器在解析 JavaScript 代碼之前將頁面加載完成，使用 JavaScript 會對頁面元素產生積極的影響。

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

可以使用 ?Defer? 和 ?async? 屬性，腳本元素具有 ?async? 屬性無法保證會按順序執(zhí)行。

可在 JavaScript 代碼中添加 ?Handlers?。千萬別加到 HTML 內聯(lián)代碼中，比如下面的代碼則容易導致錯誤且不易于維護：

index.html：

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

下面的寫法比較好：

index.html：

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

js/local.js：

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

驗證效果

優(yōu)化網頁的一種方法就是瀏覽器可處理非法的 HTML 代碼。合法的 HTML 代碼很容易調試，且占內存少，耗費資源少，易于解析和渲染運行起來更快。非法的 HTML 代碼讓實現響應式設計變得異常艱難。

當使用模板時，合法的 HTML 代碼顯得異常重要，經常會發(fā)生模板單獨運行良好，當與其他模塊集成時就報各種各樣的錯誤，因此一定要保證 HTML 代碼的質量，可采取以下措施：

在工作流中添加驗證功能：使用驗證插件如 HTMLHint 或 SublineLinter 幫助你檢測代碼錯誤。
使用 HTML5 文檔類型
確保 HTML 的層次結構易于維護，要避免元素嵌套處于左開狀態(tài)。
保證添加各元素的結束標簽。
刪除不必要的代碼；沒有必要為自關閉的元素添加結束標簽；Boolean 屬性不需要賦值，如果存在則為 True;

代碼格式

格式一致性使得 HTML 代碼易于閱讀，理解，優(yōu)化，調試。

語義標記

語義指意義相關的事物，HTML 可從頁面內容中看出語義：元素和屬性的命名一定程度上表達了內容的角色和功能。HTML5 引入了新的語義元素，如?<header>?，?<footer>?及?<nav>?。

選擇合適的元素來編寫代碼可保證代碼的易讀性：

使用?<h1>?(<h2>,<h3>…)表示標題，?<ul>?或?<ol>?實現列表
注意使用?<article>? 標簽之前應添加?<h1>?標簽；
選擇合適的 HTML5 語義元素如?<header>?，?<footer>?,?<nav>?,?<aside>?;
使用?<p>?描述 Body 文本，HTML5 語義元素可以形成內容，反之不成立。
使用?<em>?和?<strong>?標簽替代?<i>?和?<b>?標簽。
使用<label>元素，輸入類型，占位符及其他屬性來強制驗證。
將文本和元素混合，并作為另一元素的子元素，會導致布局錯誤，

例如：

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

換種寫法會更好：


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

頁面布局

要提高 HTML 代碼的性能，要遵循 HTML 代碼以實現功能和為目標，而不是樣式。

使用?<p>?元素修飾文本，而不是布局；默認?<p>?是自動提供邊緣，而且其他樣式也是瀏覽器默認提供的。
避免使用?<br>?分行，可以使用 block 元素或 CSS 顯示屬性來代替。
避免使用?<hr>?來添加水平線，可使用 CSS 的 ?border-bottom? 來代替。
不到關鍵時刻不要使用 div 標簽。
盡量少用 Tables 來布局。
可以多使用 Flex Box
使用 CSS 來調整邊距等。

CSS

雖然本文講解的是如何優(yōu)化 HTML，下面介紹了一些使用 CSS 的基本技能：

避免過多使用內聯(lián) CSS 樣式
最多使用 ID 類一次
當涉及多個元素時，可使用 Class 來實現。

推薦好課：HTML微課（含HTML5）、HTML+CSS基礎實戰(zhàn)

以上就是小編為大家?guī)淼年P于 HTML 代碼的優(yōu)化技巧的全部內容。

HTML

0 人點贊

HTML代碼的優(yōu)化技巧 代碼優(yōu)化技巧有哪些？