一招減少 JavaScript 代碼量
如今依賴 JavaScript 提供交互的網(wǎng)站越來越多。雖然 JavaScript 可以提供愉快的體驗，但同時也帶來了一些負面影響：
- 頁面加載時間變長;
- 只有在 JavaScript 加載完成且正確無誤后，頁面才能使用；
- 團隊需要足夠的手段和資源來關(guān)注可用性、反應(yīng)性和可訪問性。
鑒于這些缺點，我們可以依靠瀏覽器提供的原生解決方案，這種方式不僅可以降低成本，而且還可以享受社區(qū)創(chuàng)建的 Web 標準專業(yè)知識帶來的優(yōu)勢。通常，這些解決方案的代碼量較少，因此還可以減少開發(fā)團隊的維護工作（比如無需更新使用的庫）。
在本文中，我們來探討一下部分可供大多數(shù)用戶使用的原生解決方案。我會給出一些示例，但不會深入探討所有細節(jié)。
渲染被 JavaScript 阻塞
在介紹各種技術(shù)之前，首先我需要提醒一下使用 JavaScript 的一大缺點：瀏覽器只有一個線程來控制頁面的渲染。在運行 JavaScript 時，瀏覽器會延遲用戶交互事件與界面更新。這就很討厭了，因為你會覺得頁面沒有響應(yīng)你的操作，或者感覺動畫很卡。
谷歌工程師 Philip Walton 對這方面優(yōu)化進行了詳細闡述，感興趣可以前往查看：https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/
開發(fā)團隊的日常工作比較喜歡功能強大的設(shè)備，因此會掩蓋 JavaScript 帶來的負面影響。但不要忘記在功能有限的設(shè)備上做定期測試。
限制顯示的行數(shù)
JavaScript版
以下是用JavaScript實現(xiàn)此操作的兩種方法：
- 限制顯示的字符數(shù)。這種做法很容易出錯，因為除了等寬字體之外，一般字體的寬度都是可變的。因此，最終顯示出來的文本長度往往會超過預(yù)期，或被中途截斷。
- 反復(fù)試驗元素顯示的內(nèi)容，直到達到理想的行數(shù)。這種做法的代價很高，因為每次嘗試都需要瀏覽器完成渲染，才能看清顯示的內(nèi)容。而且這種技術(shù)只有在使用指定字體渲染后才能得到準確的結(jié)果，這可能會導(dǎo)致較大的布局偏移。
當頁面包含大量需要截斷的文本時，頁面顯示會被延遲。此外，這兩種解決方案會完全截斷文本，有可能會影響到搜索引擎或輔助技術(shù)的恢復(fù)。頁面中元素的字體大小或?qū)挾纫灿锌赡馨l(fā)生變化?？紤]所有的情況很麻煩。
原生版
-webkit-line-clamp 是一個原生的 CSS 屬性。十年前在 Safari 中引入，如今已被廣泛使用，其他瀏覽器出于兼容性原因也采用了這個屬性，而且已成了標準。你需要一些其他帶前綴的屬性來實現(xiàn)所需的行為。雖然使用帶有前綴的屬性性有點煩人，但是標準中已經(jīng)詳細描述了該前綴，因此這樣做不會有風(fēng)險。
除了 IE 和 Firefox 68 之前的版本外，所有瀏覽器都支持該屬性。下面的例子說明了具體的使用方式。
HTML ：
- <div class="demo-grid">
- <div class="demo-card">
- <img width="200" height="200" src="https://placekitten.com/200/200?image=1" alt="" class="demo-img">
- <h1 class="line-clamp demo-title">
- Spill litter box, scratch at owner, destroy all furniture, especially couch
- </h1>
- </div>
- <div class="demo-card">
- <img width="200" height="200" src="https://placekitten.com/200/200?image=2" alt="" class="demo-img">
- <h1 class="line-clamp demo-title">
- Claws in the eye of the beholder
- </h1>
- </div>
- <div class="demo-card">
- <img width="200" height="200" src="https://placekitten.com/200/200?image=3" alt="" class="demo-img">
- <h1 class="line-clamp demo-title">
- Relentlessly pursues moth eat too much then proceed to regurgitate all over living room carpet while humans eat dinner
- </h1>
- </div>
- </div>
- <!-- Titles via http://www.catipsum.com/ -->
CSS：
- /* By default, truncate the text abruptly */
- .line-clamp {
- /* Careful computing the max-height, it needs to match n * line-height */
- max-height: calc(2 * 1.15 * 1.5rem);
- overflow: hidden;
- }
- /* For capable browsers, truncate with an ellipsis */
- /* To simulate a browser without support, you can add a s after clamp in the following line */
- @supports (-webkit-line-clamp: 2) {
- .line-clamp {
- /* Remove the made up max-height */
- max-height: none;
- /* Those three properties are mandatory, so is overflow: hidden that we defined earlier */
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- }
- /* Extra code for the look of the demo */
- .demo-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(13rem,1fr));
- gap: 1rem;
- margin: 1rem;
- }
- .demo-card {
- background-color: #E2E8F0;
- border-radius: 0.5rem;
- display: flex;
- flex-direction: column;
- padding: 0.5rem;
- }
- .demo-img {
- align-self: center;
- margin-bottom: 0.5rem;
- border-radius: 0.5rem;
- }
- .demo-title {
- font-size: 1.5rem;
- margin: 0;
- }
該解決方案沒有性能或頁面內(nèi)容偏移的問題，而且還不會影響搜索引擎或輔助技術(shù)。但是，它不適合擁有多個子項的元素。
重要的元素始終顯示在頁面上
有時候，你希望頁面的某個部分始終顯示在視野范圍內(nèi)，比如標題、工具欄或購物車。我經(jīng)常遇到這種行為，但能夠正確實現(xiàn)的卻很少。
JavaScript 版
如果想通過 JavaScript 實現(xiàn)這個功能，則必須監(jiān)聽頻繁觸發(fā)的滾動事件。大多數(shù)解決方案經(jīng)常會通過限流或去抖動的技術(shù)去除大部分事件?，F(xiàn)如今，我們可以使用 IntersectionObserver ，僅在元素進入或離開窗口時接收事件。這樣做的效率更高。
在檢測到元素進入或離開窗口時，我們需要從 position:relative 切換到 position:fixed 。這需要瀏覽器重新計算大量元素的大小和位置（我們稱之為頁面重新布局），這種做法的代價很大。我們需要確保周圍元素不會四處移動，而且不會導(dǎo)致內(nèi)容跳躍。
如果在元素進入或退出窗口時，渲染被阻塞（如果在滾動的同時協(xié)調(diào)使用動畫，則很可能發(fā)生阻塞），那么切換將被進一步延遲。
原生版
CSS 有一個屬性 position:sticky 可以實現(xiàn)這種行為，而且還沒有性能、響應(yīng)性或內(nèi)容跳躍的問題：只要瀏覽器可以滾動，它就會將元素準確地定位到你聲明的位置上。你可以利用 top 、 bottom 、 left 或 right 選擇定位。
html
CSS
除了IE和舊版的 Chrome 或 Firefox 之外，所有瀏覽器都支持sticky。對于這些舊版的瀏覽器，元素僅支持默認值 position:static，而且不會處理 top、bottom、left 和 right 的值。如果你需要支持這些瀏覽器，則請記住這一點。舊版的 Safari 需要 -webkit-sticky 前綴。
但是，這個屬性有一個限制：無法根據(jù)元素是否sticky來改變元素的外觀，比如使用:stuck之類的偽類。這是 CSS常見的限制。在這種情況下，我建議使用 position:sticky 來設(shè)置sticky屬性，同時結(jié)合 IntersectionObserver來改變其外觀（注意不要改變大小，以防止內(nèi)容跳躍）。
平滑滾動
JavaScript 版
如果想在JavaScript中實現(xiàn)這一點，你需要定期執(zhí)行改變滾動位置的JavaScript。為了動畫能夠流暢地運行，在整個動畫運行過程中，不能有其他JavaScript阻塞渲染。
此外，你還需要選擇一個計時函數(shù)。為了看起來很自然，可能需要針對每個操作系統(tǒng)使用不同的計時函數(shù)，才能符合該操作系統(tǒng)的常規(guī)做法。
原生版
CSS有一個屬性 scroll-behavior: smooth 和 {behavior: 'smooth'}，可以代替JavaScript的 scroll 、 scrollTo 和 scrollIntoView ，將所有有關(guān)計時的決定都交給CSS。這樣可能更符合常用設(shè)備的常規(guī)做法。
Safari 尚不支持此功能（除非啟用隱藏選項），但大多數(shù)情況下，這不是什么大問題。
html
CSS
無論是JavaScript版還是原生版，你都需要注意兩個可訪問性方面的問題：遵循盡可能減少動畫和頁面移動的設(shè)置，以及確保焦點正確移動。
滾動到吸附點
通過這種方式，可以創(chuàng)建幻燈片、水平列表，吸附到每張圖片或每一節(jié)，讓它們占據(jù)整個窗口。
JavaScript版
為了創(chuàng)建幻燈片，我們需要監(jiān)聽：
- 鼠標點擊事件（ mousedown 、 mouseup 、 touchstart 、 touchend 、 pointerdown 或 pointerup ）；
- 移動事件（ mousemove 、 touchmove 或 pointermove ）。
正確處理所有指針事件（鼠標事件或觸碰事件），并處理鼠標指針離開區(qū)域的事件非常需要技巧。如果能正確處理這些事件，就可以相應(yīng)地移動元素。每次移動都可能導(dǎo)致昂貴的重新布局，破壞顯示效果。
如果每一節(jié)都占據(jù)整個窗口或遇到水平列表，我們必須監(jiān)聽所有滾動事件，并用我們需要的滾動處理替換。獲得理想的效果非常困難，因為我們需要完整地控制原生的滾動行為。
不論何種情況，你都需要根據(jù)原始的頁面移動速度和距離來確定是否應(yīng)該移動到下一個項目。如果你的選擇不符合系統(tǒng)的行為，就會給用戶造成困擾。
原生版
CSS的滾動吸附功能可以處理該行為。在滾動的容器中，定義 scroll-snap-type 來指示吸附的方向，以及吸附必定發(fā)生還是僅在接近吸附點時發(fā)生。然后在容器的子元素中定義 scroll-snap-align 來標明吸附點。
下面的演示完全沒有使用JavaScript。它還使用了 scroll-behavior 來提示用戶使用正常的滾動機制。
選中復(fù)選框，即可使用 IntersectionObserver 在縮略圖中高亮顯示當前的圖片。
html
CSS
JS
所有現(xiàn)代瀏覽器都支持該行為。還有另一種語法（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat）但我不建議使用。它只會增加測試的負擔(dān)，而你可以依靠優(yōu)雅降級來解決該問題。在不支持滾動吸附的瀏覽器中，該功能將會降級為正常的滾動。
不論對于鼠標的情況還是觸摸屏的情況，由于使用了瀏覽器的滾動功能，該方法要比JavaScript的方法流暢許多。
延遲圖像加載
JavaScript版
用JavaScript實現(xiàn)該功能需要使用類似于 <img src="..." srcset="..." alt="..."> 的語法。當圖像接近視口時，使用Javascript改變圖像的屬性，以加載并顯示圖片。
這種方法的主要缺點就是，在相應(yīng)的JavaScript執(zhí)行之前圖像不會被顯示。而且這種情況發(fā)生的頻率遠超你的想象。搜索引擎也很難看到圖像，因為本質(zhì)上圖像并不存在，而且爬蟲也不會滾動屏幕。
選擇何時觸發(fā)加載非常重要。怎樣根據(jù)當前的帶寬來決定當圖像距離視口多遠時進行加載？是否應(yīng)當考慮滾動的速度？
原生版
去年，所有瀏覽器（Safari除外）都實現(xiàn)了 <img> 元素的 loading="lazy" 屬性。如果你的網(wǎng)站會加載所有圖像，那么可以嘗試下這個屬性。幾乎不需任何代價，就可以讓網(wǎng)站加載變快。
如果你已經(jīng)使用了某種延遲加載技術(shù)，那么在Safari支持該屬性之前，你需要根據(jù)自己的情況做決定。是否值得放棄Safari的延遲加載，來換取更簡單的代碼？
目前，觸發(fā)下載的規(guī)則由各個瀏覽器決定，可能不是最佳時機。不過有一點可以確定，瀏覽器的決定會越來越理想，而不需要改變?nèi)魏未a！
總結(jié)
我希望這篇文章可以給你一些啟示，下次在尋找某個 JavaScript 庫來實現(xiàn)某項功能時，可以考慮一下這些技術(shù)。此外，你也可以看看其他我沒有提及的 HTML 或 CSS 技術(shù)（比如 <details> 和 <summary> ，或 <datalist> ）。瀏覽器在不斷發(fā)展，會不斷帶來驚喜，用戶也會受益！
