5個(gè)不常提及的HTML技巧
2021年你需要知道的HTML標(biāo)簽和屬性
Web開(kāi)發(fā)人員都在廣泛的使用HTML。無(wú)論你使用什么框架或者選擇哪個(gè)后端語(yǔ)言，框架在變，但是HTML始終如一。盡管被廣泛使用，但還是有一些標(biāo)簽或者屬性是大部分開(kāi)發(fā)者不熟知的。雖然現(xiàn)在有很多的模版引擎供我們使用，但是我們還是需要盡可能的熟練掌握HTML內(nèi)容，就像CSS一樣。
在我看來(lái)，最好盡可能使用HTML特性來(lái)實(shí)現(xiàn)我們的功能，而不是使用JavaScript實(shí)現(xiàn)相同的功能，盡管我承認(rèn)編寫(xiě)HTML可能會(huì)是重復(fù)的和無(wú)聊的。
盡管許多開(kāi)發(fā)人員每天都在使用HTML，但他們并沒(méi)有嘗試改進(jìn)自己的項(xiàng)目，也沒(méi)有真正利用HTML的一些鮮為人知的特性。
下面這5個(gè)通過(guò)HTML標(biāo)簽/屬性實(shí)現(xiàn)的功能我覺(jué)得需要了解一下：
圖片懶加載
圖片懶加載可以幫助提升網(wǎng)站的性能和響應(yīng)能力。圖片懶加載可以避免立即加載那些不在屏幕中立即顯示的圖片素材，當(dāng)用戶(hù)滾動(dòng)臨近圖片時(shí)再去開(kāi)始加載。
換言之，當(dāng)用戶(hù)滾動(dòng)到圖片出現(xiàn)時(shí)再進(jìn)行加載，否則不加載。這就降低了屏幕內(nèi)容展示過(guò)程中的圖片素材的請(qǐng)求數(shù)量，提升了站點(diǎn)性能。
往往我們都是通過(guò)javascript來(lái)實(shí)現(xiàn)的，通過(guò)監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件來(lái)確定加載對(duì)應(yīng)的資源。但是，在不完全考慮兼容性的場(chǎng)景下，我們其實(shí)可以直接通過(guò)HTML來(lái)直接實(shí)現(xiàn)。
注：本篇的提到的標(biāo)簽和屬性的兼容性需要大家根據(jù)實(shí)際場(chǎng)景來(lái)選取是否使用
可以通過(guò)為圖片文件添加loading="lazy"的屬性來(lái)實(shí)現(xiàn):
