第 5 部分中，我們研究了 Chrome 的 V8 引擎如何執行代碼。我們使用 Chrome 的調試工具來跟蹤 JavaScript 的執行順序。調試工具工具是推理異步代碼的非常強大的方法，可以提高您的工作效率。在這一部分中，我們將利用我們的知識來解決現實世界的異步問題，例如從服務器中提取數據。

從服務器拉取數據

讓我們從使用異步 JavaScript 解決現實世界的問題開始。

許多開發人員面臨的一個問題是從服務器中提取數據。讓我們用一個極端的例子來說明使用同步 JavaScript 獲取數據的一個主要問題。

想象一下，您正在也門國內使用您的全能歌舞網絡應用程序。根據我膚淺的批判性分析，也門的平均網速不到 1mbps。現在，進一步假設您的網絡應用程序需要下載大約 30MB 的相對較小的數據集。將這些數字插入在線計算器，下載相對較小的數據集需要 240 秒。圖1。

這是同步 JavaScript 的致命弱點。用戶別無選擇，只能等待 240 秒再做其他事情。該網絡應用程序在下載過程中完全阻塞且非交互。這是一個糟糕的用戶體驗的常見例子，應該不惜一切代價避免！

240 秒似乎是一個極端的例子，但許多可用性研究表明，沒有互動體驗的僅僅幾秒鐘就會導致用戶去其他地方。請記住，每一秒都對您的應用程序的成功至關重要。時間不僅僅關乎性能——時間對于出色的用戶體驗也至關重要。

請記住 - 讓您的應用程序具有響應性。不要讓您的用戶感到沮喪，也不要讓他們等待！

想想這個。您有多少次對那些在頁面呈現時凍結的應用程序感到沮喪？考慮到大量的阻止網站繼續以糟糕的用戶體驗困擾互聯網，我想這種體驗此時已經深深地根植于你的生活中。

不幸的是，這些阻止站點是常態而不是例外。為了減少產生阻塞站點的可能性，我們可以使用 Fetch web-api。

使用 Fetch API 異步獲取數據

fetch api 從網絡上獲取資源。 當諸如 Web 瀏覽器之類的 HTTP 客戶端發出 HTTP 請求時，該請求的目標稱為“資源”。

我們使用 URI 或統一資源標識符獲取或修改 Web 上的資源。 此 URI 通常會在您的 Web 瀏覽器中顯示為地址，用于標識邏輯或物理資源。

讓我們看看 fetch 的實際應用。 我們將使用 fetch 從設置為響應 HTTP 請求的遠程服務器獲取帖子。

打開 Chrome 并在地址欄中輸入 about:blank 以獲取最小的 html 頁面。 圖 2. 將圖 2 中的代碼復制到開發人員工具的控制臺中，然后按 Enter。

然后 fetch() 將向 http://jsonplaceholder.typicode.com/posts 發出請求，該請求返回一個承諾。 如果請求完成，則使用 Response 對象履行承諾。 如果請求失敗，則 Promise 被拒絕。 在這種情況下，我們可以看到 promise 已經實現并返回了一個表示唯一帖子的對象數組。 圖 3。

如果您從開發人員工具中打開網絡選項卡，您可以收集有關請求和響應對象的豐富信息。 圖 4。

恭喜。 您已經對 Internet 上的資源發出了第一個異步請求。

些一行代碼大多數會是CSS規則中的一個聲明。在某些情況下，選擇器可能不只是一個簡單的元素；在其他情況下，我會添加額外的聲明作為建議以獲得更好的體驗，因此使它們不再嚴格意義上是一行代碼——對于這些情況我提前道歉。

這些一行代碼中的一些更多是個人選擇，并不適用于所有網站（并非每個人都使用表格或表單）。我會簡要描述每一個，它們的作用（附帶示例圖片），以及為什么我喜歡使用它們。請注意，示例圖片可能會在前面例子的基礎上進行構建。

以下是這些一行代碼的作用概述：

1. 限制視口內的內容寬度
2. 增加正文文本大小
3. 增加文本行之間的間距
4. 限制圖片寬度
5. 限制內容中文本的寬度
6. 以更平衡的方式包裹標題
7. 表單控件顏色與頁面樣式匹配
8. 易于跟隨的表格行
9. 表格單元格和標題的間距
10. 減少動畫和移動

限制視口內的內容寬度

body {
  max-width: clamp(320px, 90%, 1000px);
  /* 額外建議 */
  margin: auto;
}

添加這個一行代碼將使內容大小占據視口的90%，將其寬度限制在320到1000像素之間（可以隨意更新最小和最大值）。

這個改變將自動使您的內容看起來更好看。它將不再是一個龐大的文本塊，而是看起來更有結構和組織。如果你還給body添加margin: auto;，內容將在頁面上居中。兩行代碼讓內容看起來好多了。

并排比較變化。左側（之前）：一大塊文本。右側（之后）：兩側有內邊距的文本。仍然很大但有更多空間。

對齊和包含的文本比一大堆文本看起來更好

增加文本大小

body {
  font-size: 1.25rem;
}

讓我們面對現實：瀏覽器默認的16px字體大小是小的。雖然這可能是基于我變老的個人觀點

一個快速的解決方案是增加body中的字體大小。由于級聯和瀏覽器使用的em單位，網頁上的所有文本將自動增大。

并排比較。左側（之前）：帶有文本的列。右側（之后）：帶有更大字體的文本列。

更大的文本大小使閱讀更容易。

增加行間距

body {
  line-height: 1.5;
}

另一個提高可讀性和打破可怕的文本墻的偏好是增加段落和內容中行與行之間的間距。我們可以輕松地用line-height屬性做到這一點。

并排比較。左側（之前）：帶有文本的列。右側（之后）：帶有文本的列（間距更大）。

行間的空間打破了文本墻和白色的河流。

這個選擇（與前兩個一起）將顯著增加我們頁面的垂直大小，但我向你保證文本將更易讀，對所有用戶更友好。

限制圖片大小

img {
  max-width: 100%;
}

圖片的大小應該大致與它們將占據的空間相當，但有時我們會遇到真正長的圖片，導致內容移位并創建水平滾動。

避免這種情況的一種方法是設置最大寬度為100%。雖然這不是一個萬無一失的解決方案（邊距和內邊距可能影響寬度），但在大多數情況下它都能工作。

并排比較。左側（之前）：圖片溢出內容大小導致出現滾動條。右側（之后）：圖片調整到內容大小。

防止水平滾動并使圖片與文本更好地流動

限制內容中文本的寬度

p {
  max-width: 65ch;
}

避免可怕的文本墻和空白河流的另一種策略是應用這種樣式，即使與body中的最大寬度結合使用。這可能看起來不必要，有時甚至很奇怪，因為段落會比其他元素更窄。但我喜歡這種對比和較短的行。

60ch或65ch的值在過去對我很有效，但你可以使用不同的值并調整最大寬度以滿足你的需求。在你的網頁上玩耍和探索它的外觀。

并排比較。左側（之前）：文本占據整個寬度。右側（之后）：文本占據大部分寬度。

將較大的文本塊分成較小的塊以提高可讀性

以更平衡的方式包裹標題

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

標題是網頁結構的重要部分，但由于它們的大小較大和內容較短，可能看起來很奇怪。特別是當它們占據多于一行時。一個有幫助的解決方案是使用text-wrap來平衡標題。

雖然balance似乎是text-wrap最流行的值，但它不是唯一的。我們也可以使用pretty，如果需要的話，它會將額外的一個詞移到最后一行，而不是平衡所有內容。不幸的是，pretty目前還沒有廣泛的支持。

并排比較。左側（之前）：一個標題占據兩行，第二行只有1個詞。右側（之后）：標題占據寬度相似的兩行。

平衡的換行可以改善可見性和可讀性

表單控件顏色與頁面樣式匹配

body {
  accent-color: #080; /* 使用你喜歡的顏色 */
}

另一個小變化，雖然沒有顯著影響，但能讓東西看起來更好。直到最近，我們還不能用CSS樣式化原生表單控件，只能使用瀏覽器顯示。但情況已經改變。

開發一個完整的組件可能很麻煩，但使用這個一行代碼可以設置一個更接近網站其他部分和設計系統的顏色，這是可能的，而且很簡單。

并排比較。左側（之前）：表單控件是默認的藍色。右側（之后）：表單控件顏色與標題和鏈接顏色匹配（綠色）。

正是這些小細節（和顏色）讓頁面融為一體

易于跟隨的表格行

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* 或者對于深色主題使用 #fff1 */
}

我們必須使用表格來顯示數據，而不是用于布局。但默認情況下表格很丑，我們不希望數據看起來很丑。特別是，有一件事有助于組織數據并使其更易讀，那就是有一個帶有交替深淺行的斑馬表格。

上面顯示的一行代碼使得實現這種樣式變得容易。它可以簡化為只有tr而不考慮tbody或table父元素，但這也會應用到表格頭部，這可能不是我們想要的。這是一個品味問題。

并排比較。左側（之前）：所有表格行都是白色的。右側（之后）：偶數表格行略微深色。

更容易水平跟隨數據（按行）

表格單元格和標題的間距

td, th {
  padding: 0.5em; /* 或 0.5em 1em... 或任何不為0的值 */
}

讓表格更易訪問和更易讀的最后一個變化是通過給表格單元格和標題添加內邊距來稍微間隔內容。默認情況下，大多數瀏覽器沒有任何內邊距，不同單元格的文本相互接觸，使得區分一個單元格開始和另一個結束變得混亂。

我們可以更改內邊距值以調整到我們喜歡的大小。然而，避免過度以防止不必要的滾動或太多空白空間。

并排比較。左側（之前）：表格單元格文本內容完全在一起。右側（之后）：表格單元格內容明顯與其他表格單元格分開。

更容易水平和垂直跟蹤數據

減少動畫和移動

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* 額外建議 */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

好吧，好吧。這段代碼遠不止一行。它有一個一行版本（通過將動畫持續時間設置為零秒來移除動畫），但網頁上還有其他使元素移動的東西。

通過在prefers-reduced-motion媒體查詢中設置這些聲明，我們將尊重用戶選擇減少移動的意愿。這種方法有些激進，因為它移除了所有移動，這可能不一定是用戶的意圖 - 它是"減少移動"而不是"無移動"。如果適當的話，我們仍然可以根據具體情況保留移動。

并排比較。左側（之前）：一個圖像在網頁上移動。右側（之后）：圖像是靜態的。

沒有動畫？沒問題！