1. 于 HTML 性能：在編寫 HTML 時(shí)，我們應(yīng)該盡可能地使用最少的 HTML 標(biāo)簽來(lái)構(gòu)建頁(yè)面，這樣可以減少頁(yè)面的加載時(shí)間，提高頁(yè)面的性能。同時(shí)，也要注意在 HTML 中嵌套的深度不要太深，盡量減少嵌套的層級(jí)，避免重復(fù)加載數(shù)據(jù)。
2. 標(biāo)簽的作用：標(biāo)簽用于定義文檔中的不同部分，比如頭部、主體、尾部等。在編寫 HTML 時(shí)，我們應(yīng)該盡可能地使用標(biāo)簽來(lái)組織頁(yè)面內(nèi)容，這樣可以提高代碼的可讀性和維護(hù)性。
3. 標(biāo)簽的嵌套：在 HTML 中，標(biāo)簽之間可以嵌套使用，這樣可以提高代碼的復(fù)用性和可維護(hù)性。但是，在嵌套時(shí)要注意層級(jí)關(guān)系，不要過深，否則會(huì)影響頁(yè)面的性能。
4. 盒模型：盒模型是指一個(gè)元素在瀏覽器中占據(jù)的空間大小，包括內(nèi)容、內(nèi)邊距和邊框等部分。盒模型包含以下幾個(gè)關(guān)鍵部分：

• content area（內(nèi)容區(qū)域）
• padding（內(nèi)邊距）
• border（邊框）
• margin（外邊距）

5. 合理使用 CSS 樣式：在編寫 HTML 時(shí)，我們應(yīng)該盡可能地使用簡(jiǎn)潔、規(guī)范的 CSS 樣式來(lái)布局頁(yè)面內(nèi)容。這樣可以減少頁(yè)面的加載時(shí)間，提高頁(yè)面的性能。同時(shí)，也要注意不要使用過多的 CSS 屬性和類，否則會(huì)影響頁(yè)面的渲染效果和性能。
6. 合理使用媒體查詢：媒體查詢是一種用于控制不同設(shè)備上顯示不同樣式的技術(shù)。在編寫 HTML 時(shí)，我們可以使用媒體查詢來(lái)根據(jù)設(shè)備的屏幕大小、分辨率等信息來(lái)調(diào)整頁(yè)面的布局和樣式。
7. 壓縮代碼：在編寫 HTML 時(shí)，我們可以使用壓縮工具來(lái)壓縮代碼，這樣可以減少頁(yè)面的大小和加載時(shí)間，提高頁(yè)面的性能。
8. 使用工具：在編寫 HTML 時(shí)，我們可以使用一些工具來(lái)幫助我們優(yōu)化代碼，比如開發(fā)者工具、瀏覽器開發(fā)者工具等。這些工具可以幫助我們快速定位代碼中的問題和瓶頸，提高開發(fā)效率。
9. 避免使用 Iframe
10. 避免空鏈接屬性
11. 避免節(jié)點(diǎn)深層級(jí)嵌套
12. 縮減 HTML 文檔大?。禾岣呦螺d速度最顯而易見的方式就是減少文件的大小，特別是壓縮內(nèi)嵌在 HTML 文檔中的 JavaScript 和

CSS 代碼，這能使得頁(yè)面體積大幅精簡(jiǎn)。除此之外減少 HTML 文檔大小還可以采取下面幾種方法：1.刪掉 HTM 文檔對(duì)執(zhí)行結(jié)果無(wú)影響的空格空行和注釋避免 Table 布局；2.使用 HTML5；3.顯式指定文檔字符集。

13.顯式設(shè)置圖片的寬高

14.避免腳本阻塞加載：

當(dāng)瀏覽器在解析常規(guī)的 script 標(biāo)簽時(shí)，它需要等待 script 下載完畢，再解析執(zhí)行，而后續(xù)的 HTML 代碼只能等待。為了避免阻塞加載，應(yīng)把腳步放到文檔的末尾，如把 script 標(biāo)簽插入在 body 結(jié)束標(biāo)簽之前。

#挑戰(zhàn)30天在頭條寫日記#

src -- 源碼目錄
├── api -- axios網(wǎng)絡(luò)請(qǐng)求定義
├── assets -- 靜態(tài)圖片資源文件
├── components -- 通用組件封裝
├── icons -- svg矢量圖片文件
├── router -- vue-router路由配置
├── store -- vuex的狀態(tài)管理
├── styles -- 全局css樣式
├── utils -- 工具類
└── views -- 前端頁(yè)面
 ├── home -- 首頁(yè)
 ├── layout -- 通用頁(yè)面加載框架
 ├── login -- 登錄頁(yè)
 ├── oms -- 訂單模塊頁(yè)面
 ├── pms -- 商品模塊頁(yè)面
 └── sms -- 營(yíng)銷模塊頁(yè)面

們知道一個(gè)字節(jié)可表示的范圍是 0 ～ 255（十六進(jìn)制：0x00 ～ 0xFF）， 其中 ASCII 值的范圍為 0 ～ 127（十六進(jìn)制：0x00 ～ 0x7F）；而超過 ASCII 范圍的 128～255（十六進(jìn)制：0x80 ～ 0xFF）之間的值是不可見字符。

ASCII（American Standard Code for Information Interchange，美國(guó)信息交換標(biāo)準(zhǔn)代碼）是基于拉丁字母的一套電腦編碼系統(tǒng)。它主要用于顯示現(xiàn)代英語(yǔ)，而其擴(kuò)展版本延伸美國(guó)標(biāo)準(zhǔn)信息交換碼則可以部分支持其他西歐語(yǔ)言，并等同于國(guó)際標(biāo)準(zhǔn) ISO/IEC 646。

在 ASCII 碼中 0 - 31和 127 是控制字符，共 33 個(gè)。以下是其中一部分控制字符：

其余 95 個(gè)，即 32 - 126 是可打印字符，包括數(shù)字、大小寫字母、常用符號(hào)等。

**當(dāng)不可見字符在網(wǎng)絡(luò)上傳輸時(shí)，比如說從 A 計(jì)算機(jī)傳到 B 計(jì)算機(jī)，往往要經(jīng)過多個(gè)路由設(shè)備，由于不同的設(shè)備對(duì)字符的處理方式有一些不同，這樣那些不可見字符就有可能被處理錯(cuò)誤，這是不利于傳輸?shù)摹?*為了解決這個(gè)問題，我們可以先對(duì)數(shù)據(jù)進(jìn)行編碼，比如 base64 編碼，變成可見字符，也就是 ASCII 碼可表示的可見字符，從而確保數(shù)據(jù)可靠傳輸。Base64 的內(nèi)容是有 0 ～ 9，a ～ z，A ～ Z，+，/ 組成，正好 64 個(gè)字符，這些字符是在 ASCII 可表示的范圍內(nèi)，屬于 95 個(gè)可見字符的一部分。

二、什么是 base64

Base64是一種基于 64 個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的表示方法。由于 2? = 64 ，所以每 6 個(gè)比特為一個(gè)單元，對(duì)應(yīng)某個(gè)可打印字符。3 個(gè)字節(jié)有 24 個(gè)比特，對(duì)應(yīng)于 4 個(gè) base64 單元，即 3 個(gè)字節(jié)可由 4 個(gè)可打印字符來(lái)表示。相應(yīng)的轉(zhuǎn)換過程如下圖所示：

**Base64 常用于在處理文本數(shù)據(jù)的場(chǎng)合，表示、傳輸、存儲(chǔ)一些二進(jìn)制數(shù)據(jù)，包括 MIME 的電子郵件及 XML 的一些復(fù)雜數(shù)據(jù)。**在 MIME 格式的電子郵件中，base64 可以用來(lái)將二進(jìn)制的字節(jié)序列數(shù)據(jù)編碼成 ASCII 字符序列構(gòu)成的文本。使用時(shí)，在傳輸編碼方式中指定 base64。使用的字符包括大小寫拉丁字母各 26 個(gè)、數(shù)字 10 個(gè)、加號(hào) + 和斜杠 /，共 64 個(gè)字符，等號(hào) = 用來(lái)作為后綴用途。Base64 相應(yīng)的索引表如下：

了解完上述的知識(shí)，我們以編碼 Man 字符串為例，來(lái)直觀的感受一下編碼過程。 Man 由 M、a 和 n 3 個(gè)字符組成，它們對(duì)應(yīng)的 ASCII 碼為 77、97 和 110。

接著我們以每 6 個(gè)比特為一個(gè)單元，進(jìn)行 base64 編碼操作，具體如下圖所示：

由圖可知， Man （3字節(jié)）編碼的結(jié)果為 TWFu （4字節(jié)），很明顯經(jīng)過 base64 編碼后體積會(huì)增加 1/3。 Man 這個(gè)字符串的長(zhǎng)度剛好是 3，我們可以用 4 個(gè) base64 單元來(lái)表示。但如果待編碼的字符串長(zhǎng)度不是 3 的整數(shù)倍時(shí)，應(yīng)該如何處理呢？

如果要編碼的字節(jié)數(shù)不能被 3 整除，最后會(huì)多出 1 個(gè)或 2 個(gè)字節(jié)，那么可以使用下面的方法進(jìn)行處理：先使用 0 字節(jié)值在末尾補(bǔ)足，使其能夠被 3 整除，然后再進(jìn)行 base64 的編碼。

以編碼字符 A 為例，其所占的字節(jié)數(shù)為 1，不能被 3 整除，需要補(bǔ) 2 個(gè)字節(jié)，具體如下圖所示：

由上圖可知，字符 A 經(jīng)過 base64 編碼后的結(jié)果是 QQ== ，該結(jié)果后面的兩個(gè) = 代表補(bǔ)足的字節(jié)數(shù)。而最后個(gè) 1 個(gè) base64 字節(jié)塊有 4 位是 0 值。

接著我們來(lái)看另一個(gè)示例，假設(shè)需編碼的字符串為 BC ，其所占字節(jié)數(shù)為 2，不能被 3 整除，需要補(bǔ) 1 個(gè)字節(jié)，具體如下圖所示：

由上圖可知，字符串 BC 經(jīng)過 base64 編碼后的結(jié)果是 QkM= ，該結(jié)果后面的 1 個(gè) = 代表補(bǔ)足的字節(jié)數(shù)。而最后個(gè) 1 個(gè) base64 字節(jié)塊有 2 位是 0 值。

三、base64 編碼的應(yīng)用

3.1 顯示 base64 編碼的圖片

在編寫 HTML 網(wǎng)頁(yè)時(shí)，對(duì)于一些簡(jiǎn)單圖片，通常會(huì)選擇將圖片內(nèi)容直接內(nèi)嵌在網(wǎng)頁(yè)中，從而減少不必要的網(wǎng)絡(luò)請(qǐng)求，但是圖片數(shù)據(jù)是二進(jìn)制數(shù)據(jù)，該怎么嵌入呢？絕大多數(shù)現(xiàn)代瀏覽器都支持一種名為 Data URLs 的特性，允許使用 base64 對(duì)圖片或其他文件的二進(jìn)制數(shù)據(jù)進(jìn)行編碼，將其作為文本字符串嵌入網(wǎng)頁(yè)中。

Data URLs 由四個(gè)部分組成：前綴（ data: ）、指示數(shù)據(jù)類型的 MIME 類型、如果非文本則為可選的 base64 標(biāo)記、數(shù)據(jù)本身：

data:[<mediatype>][;base64],<data>

mediatype 是個(gè) MIME 類型的字符串，例如 " image/jpeg " 表示 JPEG 圖像文件。如果被省略，則默認(rèn)值為 text/plain;charset=US-ASCII 。如果數(shù)據(jù)是文本類型，你可以直接將文本嵌入（根據(jù)文檔類型，使用合適的實(shí)體字符或轉(zhuǎn)義字符）。如果是二進(jìn)制數(shù)據(jù)，你可以將數(shù)據(jù)進(jìn)行 base64 編碼之后再進(jìn)行嵌入。比如嵌入一張圖片：

<img alt="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

MIME（Multipurpose Internet Mail Extensions）多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型，是設(shè)定某種擴(kuò)展名的文件用一種應(yīng)用程序來(lái)打開的方式類型，當(dāng)該擴(kuò)展名文件被訪問的時(shí)候，瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來(lái)打開。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。

常見的 MIME 類型有：超文本標(biāo)記語(yǔ)言文本 .html text/html、PNG圖像 .png image/png、普通文本 .txt text/plain 等。

但需要注意的是：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因?yàn)樵搱D片經(jīng)過 base64 編碼后的字符串非常大，會(huì)明顯增大 HTML 頁(yè)面的大小，從而影響加載速度。除此之外，利用 HTML FileReader API，我們也可以方便的實(shí)現(xiàn)圖片本地預(yù)覽功能，具體代碼如下：

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  const loadFile = function(event) {
    const reader = new FileReader();
    reader.onload = function(){
      const output = document.querySelector('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

在完成本地圖片預(yù)覽之后，可以直接把圖片對(duì)應(yīng)的 Data URLs 數(shù)據(jù)提交到服務(wù)器。針對(duì)這種情形，服務(wù)端需要做一些相關(guān)處理，才能正常保存上傳的圖片，這里以 Express 為例，具體處理代碼如下：

const app = require('express')();

app.post('/upload', function(req, res){
    let imgData = req.body.imgData; // 獲取POST請(qǐng)求中的base64圖片數(shù)據(jù)
    let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    let dataBuffer = Buffer.from(base64Data, 'base64');
    fs.writeFile("image.png", dataBuffer, function(err) {
        if(err){
          res.send(err);
        }else{
          res.send("圖片上傳成功！");
        }
    });
});

3.2 瀏覽器端圖片壓縮

在一些場(chǎng)合中，我們希望在上傳本地圖片時(shí)，先對(duì)圖片進(jìn)行一定的壓縮，然后再提交到服務(wù)器，從而減少傳輸?shù)臄?shù)據(jù)量。在前端要實(shí)現(xiàn)圖片壓縮，我們可以利用 Canvas 對(duì)象提供的 toDataURL() 方法，該方法接收 type 和 encoderOptions 兩個(gè)可選參數(shù)。

其中 type 表示圖片格式，默認(rèn)為 image/png 。而 encoderOptions 用于表示圖片的質(zhì)量，在指定圖片格式為 image/jpeg 或 image/webp 的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92 ，其他參數(shù)會(huì)被忽略。

下面我們來(lái)看一下具體如何實(shí)現(xiàn)圖片壓縮：

// compress.js
const MAX_WIDTH = 800; // 圖片最大寬度

function compress(base64, quality, mimeType) {
  let canvas = document.createElement("canvas");
  let img = document.createElement("img");
  img.crossOrigin = "anonymous";
  return new Promise((resolve, reject) => {
    img.src = base64;
    img.onload = () => {
      let targetWidth, targetHeight;
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH;
        targetHeight = (img.height * MAX_WIDTH) / img.width;
      } else {
        targetWidth = img.width;
        targetHeight = img.height;
      }
      canvas.width = targetWidth;
      canvas.height = targetHeight;
      let ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, targetWidth, targetHeight); // 清除畫布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      let imageData = canvas.toDataURL(mimeType, quality / 100);
      resolve(imageData);
    };
  });
}

對(duì)于返回的 Data URL 格式的圖片數(shù)據(jù)，為了進(jìn)一步減少傳輸?shù)臄?shù)據(jù)量，我們可以把它轉(zhuǎn)換為 Blob 對(duì)象：

function dataUrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(",")[1]);
  let ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeType });
}

在轉(zhuǎn)換完成后，我們就可以壓縮后的圖片對(duì)應(yīng)的 Blob 對(duì)象封裝在 FormData 對(duì)象中，然后再通過 AJAX 提交到服務(wù)器上：

function uploadFile(url, blob) {
  let formData = new FormData();
  let request = new XMLHttpRequest();
  formData.append("image", blob);
  request.open("POST", url, true);
  request.send(formData);
}

其實(shí) Canvas 對(duì)象除了提供 toDataURL() 方法之外，它還提供了一個(gè) toBlob() 方法，該方法的語(yǔ)法如下：

canvas.toBlob(callback, mimeType, qualityArgument)

和 toDataURL() 方法相比， toBlob() 方法是異步的，因此多了個(gè) callback 參數(shù)，這個(gè) callback 回調(diào)方法默認(rèn)的第一個(gè)參數(shù)就是轉(zhuǎn)換好的 blob 文件信息。

介紹完上述的內(nèi)容，我們來(lái)看一下本地圖片壓縮完整的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>本地圖片壓縮</title>
  </head>
  <body>
    <input type="file" accept="image/*" onchange="loadFile(event)" />
    <script src="./compress.js"></script>
    <script>
      const loadFile = function (event) {
        const reader = new FileReader();
        reader.onload = async function () {
          let compressedDataURL = await compress(
            reader.result,
            90,
            "image/jpeg"
          );
          let compressedImageBlob = dataUrlToBlob(compressedDataURL);
          uploadFile("https://httpbin.org/post", compressedImageBlob);
        };
        reader.readAsDataURL(event.target.files[0]);
      };
    </script>
  </body>
</html>

四、如何進(jìn)行 base64 編碼和解碼

在 JavaScript 中，有兩個(gè)函數(shù)被分別用來(lái)處理解碼和編碼 base64 字符串：

• btoa()：該函數(shù)能夠基于二進(jìn)制數(shù)據(jù) “字符串” 創(chuàng)建一個(gè) base64 編碼的 ASCII 字符串。
• atob()： 該函數(shù)能夠解碼通過 base64 編碼的字符串?dāng)?shù)據(jù)。

4.1 btoa 使用示例

const name = 'Semlinker';
const encodedName = btoa(name);
console.log(encodedName); // U2VtbGlua2Vy

4.2 atob 使用示例

const encodedName = 'U2VtbGlua2Vy';
const name = atob(encodedName);
console.log(name); // Semlinker

對(duì)于 atob 和 btoa 這兩個(gè)方法來(lái)說，其中的 a 代表 ASCII，而 b 代表 Blob，即二進(jìn)制。因此 atob 表示 ASCII 到二進(jìn)制，對(duì)應(yīng)的是解碼操作。而 btoa 表示二進(jìn)制到 ASCII，對(duì)應(yīng)的是編碼操作。在了解方法中 a 和 b 分別代表的意義之后，在以后的工作中，我們就不會(huì)用錯(cuò)了。