一招減少 JavaScript 代碼量
如今依賴 JavaScript 提供交互的網(wǎng)站越來越多。雖然 JavaScript 可以提供愉快的體驗(yàn)，但同時(shí)也帶來了一些負(fù)面影響：
- 頁面加載時(shí)間變長(zhǎng);
- 只有在 JavaScript 加載完成且正確無誤后，頁面才能使用；
- 團(tuán)隊(duì)需要足夠的手段和資源來關(guān)注可用性、反應(yīng)性和可訪問性。
鑒于這些缺點(diǎn)，我們可以依靠瀏覽器提供的原生解決方案，這種方式不僅可以降低成本，而且還可以享受社區(qū)創(chuàng)建的 Web 標(biāo)準(zhǔn)專業(yè)知識(shí)帶來的優(yōu)勢(shì)。通常，這些解決方案的代碼量較少，因此還可以減少開發(fā)團(tuán)隊(duì)的維護(hù)工作（比如無需更新使用的庫）。
在本文中，我們來探討一下部分可供大多數(shù)用戶使用的原生解決方案。我會(huì)給出一些示例，但不會(huì)深入探討所有細(xì)節(jié)。
渲染被 JavaScript 阻塞
在介紹各種技術(shù)之前，首先我需要提醒一下使用 JavaScript 的一大缺點(diǎn)：瀏覽器只有一個(gè)線程來控制頁面的渲染。在運(yùn)行 JavaScript 時(shí)，瀏覽器會(huì)延遲用戶交互事件與界面更新。這就很討厭了，因?yàn)槟銜?huì)覺得頁面沒有響應(yīng)你的操作，或者感覺動(dòng)畫很卡。
谷歌工程師 Philip Walton 對(duì)這方面優(yōu)化進(jìn)行了詳細(xì)闡述，感興趣可以前往查看：https://calendar.perfplanet.com/2020/html-and-css-techniques-to-reduce-your-javascript/
開發(fā)團(tuán)隊(duì)的日常工作比較喜歡功能強(qiáng)大的設(shè)備，因此會(huì)掩蓋 JavaScript 帶來的負(fù)面影響。但不要忘記在功能有限的設(shè)備上做定期測(cè)試。
限制顯示的行數(shù)
JavaScript版
以下是用JavaScript實(shí)現(xiàn)此操作的兩種方法：
- 限制顯示的字符數(shù)。這種做法很容易出錯(cuò)，因?yàn)槌说葘捵煮w之外，一般字體的寬度都是可變的。因此，最終顯示出來的文本長(zhǎng)度往往會(huì)超過預(yù)期，或被中途截?cái)唷?/li>
- 反復(fù)試驗(yàn)元素顯示的內(nèi)容，直到達(dá)到理想的行數(shù)。這種做法的代價(jià)很高，因?yàn)槊看螄L試都需要瀏覽器完成渲染，才能看清顯示的內(nèi)容。而且這種技術(shù)只有在使用指定字體渲染后才能得到準(zhǔn)確的結(jié)果，這可能會(huì)導(dǎo)致較大的布局偏移。
當(dāng)頁面包含大量需要截?cái)嗟奈谋緯r(shí)，頁面顯示會(huì)被延遲。此外，這兩種解決方案會(huì)完全截?cái)辔谋?，有可能?huì)影響到搜索引擎或輔助技術(shù)的恢復(fù)。頁面中元素的字體大小或?qū)挾纫灿锌赡馨l(fā)生變化?？紤]所有的情況很麻煩。
原生版
-webkit-line-clamp 是一個(gè)原生的 CSS 屬性。十年前在 Safari 中引入，如今已被廣泛使用，其他瀏覽器出于兼容性原因也采用了這個(gè)屬性，而且已成了標(biāo)準(zhǔn)。你需要一些其他帶前綴的屬性來實(shí)現(xiàn)所需的行為。雖然使用帶有前綴的屬性性有點(diǎn)煩人，但是標(biāo)準(zhǔn)中已經(jīng)詳細(xì)描述了該前綴，因此這樣做不會(huì)有風(fēng)險(xiǎn)。
除了 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)容偏移的問題，而且還不會(huì)影響搜索引擎或輔助技術(shù)。但是，它不適合擁有多個(gè)子項(xiàng)的元素。
重要的元素始終顯示在頁面上
有時(shí)候，你希望頁面的某個(gè)部分始終顯示在視野范圍內(nèi)，比如標(biāo)題、工具欄或購物車。我經(jīng)常遇到這種行為，但能夠正確實(shí)現(xiàn)的卻很少。
JavaScript 版
如果想通過 JavaScript 實(shí)現(xiàn)這個(gè)功能，則必須監(jiān)聽頻繁觸發(fā)的滾動(dòng)事件。大多數(shù)解決方案經(jīng)常會(huì)通過限流或去抖動(dòng)的技術(shù)去除大部分事件?，F(xiàn)如今，我們可以使用 IntersectionObserver ，僅在元素進(jìn)入或離開窗口時(shí)接收事件。這樣做的效率更高。
在檢測(cè)到元素進(jìn)入或離開窗口時(shí)，我們需要從 position:relative 切換到 position:fixed 。這需要瀏覽器重新計(jì)算大量元素的大小和位置（我們稱之為頁面重新布局），這種做法的代價(jià)很大。我們需要確保周圍元素不會(huì)四處移動(dòng)，而且不會(huì)導(dǎo)致內(nèi)容跳躍。
如果在元素進(jìn)入或退出窗口時(shí)，渲染被阻塞（如果在滾動(dòng)的同時(shí)協(xié)調(diào)使用動(dòng)畫，則很可能發(fā)生阻塞），那么切換將被進(jìn)一步延遲。
原生版
CSS 有一個(gè)屬性 position:sticky 可以實(shí)現(xiàn)這種行為，而且還沒有性能、響應(yīng)性或內(nèi)容跳躍的問題：只要瀏覽器可以滾動(dòng)，它就會(huì)將元素準(zhǔn)確地定位到你聲明的位置上。你可以利用 top 、 bottom 、 left 或 right 選擇定位。
html
CSS
除了IE和舊版的 Chrome 或 Firefox 之外，所有瀏覽器都支持sticky。對(duì)于這些舊版的瀏覽器，元素僅支持默認(rèn)值 position:static，而且不會(huì)處理 top、bottom、left 和 right 的值。如果你需要支持這些瀏覽器，則請(qǐng)記住這一點(diǎn)。舊版的 Safari 需要 -webkit-sticky 前綴。
但是，這個(gè)屬性有一個(gè)限制：無法根據(jù)元素是否sticky來改變?cè)氐耐庥^，比如使用:stuck之類的偽類。這是 CSS常見的限制。在這種情況下，我建議使用 position:sticky 來設(shè)置sticky屬性，同時(shí)結(jié)合 IntersectionObserver來改變其外觀（注意不要改變大小，以防止內(nèi)容跳躍）。
平滑滾動(dòng)
JavaScript 版
如果想在JavaScript中實(shí)現(xiàn)這一點(diǎn)，你需要定期執(zhí)行改變滾動(dòng)位置的JavaScript。為了動(dòng)畫能夠流暢地運(yùn)行，在整個(gè)動(dòng)畫運(yùn)行過程中，不能有其他JavaScript阻塞渲染。
此外，你還需要選擇一個(gè)計(jì)時(shí)函數(shù)。為了看起來很自然，可能需要針對(duì)每個(gè)操作系統(tǒng)使用不同的計(jì)時(shí)函數(shù)，才能符合該操作系統(tǒng)的常規(guī)做法。
原生版
CSS有一個(gè)屬性 scroll-behavior: smooth 和 {behavior: 'smooth'}，可以代替JavaScript的 scroll 、 scrollTo 和 scrollIntoView ，將所有有關(guān)計(jì)時(shí)的決定都交給CSS。這樣可能更符合常用設(shè)備的常規(guī)做法。
Safari 尚不支持此功能（除非啟用隱藏選項(xiàng)），但大多數(shù)情況下，這不是什么大問題。
html
CSS
無論是JavaScript版還是原生版，你都需要注意兩個(gè)可訪問性方面的問題：遵循盡可能減少動(dòng)畫和頁面移動(dòng)的設(shè)置，以及確保焦點(diǎn)正確移動(dòng)。
滾動(dòng)到吸附點(diǎn)
通過這種方式，可以創(chuàng)建幻燈片、水平列表，吸附到每張圖片或每一節(jié)，讓它們占據(jù)整個(gè)窗口。
JavaScript版
為了創(chuàng)建幻燈片，我們需要監(jiān)聽：
- 鼠標(biāo)點(diǎn)擊事件（ mousedown 、 mouseup 、 touchstart 、 touchend 、 pointerdown 或 pointerup ）；
- 移動(dòng)事件（ mousemove 、 touchmove 或 pointermove ）。
正確處理所有指針事件（鼠標(biāo)事件或觸碰事件），并處理鼠標(biāo)指針離開區(qū)域的事件非常需要技巧。如果能正確處理這些事件，就可以相應(yīng)地移動(dòng)元素。每次移動(dòng)都可能導(dǎo)致昂貴的重新布局，破壞顯示效果。
如果每一節(jié)都占據(jù)整個(gè)窗口或遇到水平列表，我們必須監(jiān)聽所有滾動(dòng)事件，并用我們需要的滾動(dòng)處理替換。獲得理想的效果非常困難，因?yàn)槲覀冃枰暾乜刂圃臐L動(dòng)行為。
不論何種情況，你都需要根據(jù)原始的頁面移動(dòng)速度和距離來確定是否應(yīng)該移動(dòng)到下一個(gè)項(xiàng)目。如果你的選擇不符合系統(tǒng)的行為，就會(huì)給用戶造成困擾。
原生版
CSS的滾動(dòng)吸附功能可以處理該行為。在滾動(dòng)的容器中，定義 scroll-snap-type 來指示吸附的方向，以及吸附必定發(fā)生還是僅在接近吸附點(diǎn)時(shí)發(fā)生。然后在容器的子元素中定義 scroll-snap-align 來標(biāo)明吸附點(diǎn)。
下面的演示完全沒有使用JavaScript。它還使用了 scroll-behavior 來提示用戶使用正常的滾動(dòng)機(jī)制。
選中復(fù)選框，即可使用 IntersectionObserver 在縮略圖中高亮顯示當(dāng)前的圖片。
html
CSS
JS
所有現(xiàn)代瀏覽器都支持該行為。還有另一種語法（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat）但我不建議使用。它只會(huì)增加測(cè)試的負(fù)擔(dān)，而你可以依靠?jī)?yōu)雅降級(jí)來解決該問題。在不支持滾動(dòng)吸附的瀏覽器中，該功能將會(huì)降級(jí)為正常的滾動(dòng)。
不論對(duì)于鼠標(biāo)的情況還是觸摸屏的情況，由于使用了瀏覽器的滾動(dòng)功能，該方法要比JavaScript的方法流暢許多。
延遲圖像加載
JavaScript版
用JavaScript實(shí)現(xiàn)該功能需要使用類似于 <img src="..." srcset="..." alt="..."> 的語法。當(dāng)圖像接近視口時(shí)，使用Javascript改變圖像的屬性，以加載并顯示圖片。
這種方法的主要缺點(diǎn)就是，在相應(yīng)的JavaScript執(zhí)行之前圖像不會(huì)被顯示。而且這種情況發(fā)生的頻率遠(yuǎn)超你的想象。搜索引擎也很難看到圖像，因?yàn)楸举|(zhì)上圖像并不存在，而且爬蟲也不會(huì)滾動(dòng)屏幕。
選擇何時(shí)觸發(fā)加載非常重要。怎樣根據(jù)當(dāng)前的帶寬來決定當(dāng)圖像距離視口多遠(yuǎn)時(shí)進(jìn)行加載？是否應(yīng)當(dāng)考慮滾動(dòng)的速度？
原生版
去年，所有瀏覽器（Safari除外）都實(shí)現(xiàn)了 <img> 元素的 loading="lazy" 屬性。如果你的網(wǎng)站會(huì)加載所有圖像，那么可以嘗試下這個(gè)屬性。幾乎不需任何代價(jià)，就可以讓網(wǎng)站加載變快。
如果你已經(jīng)使用了某種延遲加載技術(shù)，那么在Safari支持該屬性之前，你需要根據(jù)自己的情況做決定。是否值得放棄Safari的延遲加載，來換取更簡(jiǎn)單的代碼？
目前，觸發(fā)下載的規(guī)則由各個(gè)瀏覽器決定，可能不是最佳時(shí)機(jī)。不過有一點(diǎn)可以確定，瀏覽器的決定會(huì)越來越理想，而不需要改變?nèi)魏未a！
總結(jié)
我希望這篇文章可以給你一些啟示，下次在尋找某個(gè) JavaScript 庫來實(shí)現(xiàn)某項(xiàng)功能時(shí)，可以考慮一下這些技術(shù)。此外，你也可以看看其他我沒有提及的 HTML 或 CSS 技術(shù)（比如 <details> 和 <summary> ，或 <datalist> ）。瀏覽器在不斷發(fā)展，會(huì)不斷帶來驚喜，用戶也會(huì)受益！
