筆者第一次接觸移動(dòng)端適配的時(shí)候，完全沒概念，什么樣是做了適配，什么樣是沒做？不明白。

直到我把按照PC端寫的頁(yè)面用手機(jī)打開，傻眼了，怎么那么小，什么也看不清，然后我就開始搜，怎么做移動(dòng)端適配。

找到的第一個(gè)十分有用的答案，是下面這行代碼：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

這段代碼的用途是什么，如果沒有這里的width=device-width，在移動(dòng)端，網(wǎng)頁(yè)默認(rèn)會(huì)縮放，按照980px大小的寬度渲染，以便在屏幕內(nèi)完整顯示，這就解釋了為什么內(nèi)容會(huì)變小。

如果要更完整，內(nèi)容正常展示的同時(shí)，不允許用戶進(jìn)行縮放，則是下面這樣：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

由此可見，不止我們所認(rèn)為的，用于承載頁(yè)面內(nèi)容的元素才有用，其他一些“不起眼”的元素也很有用。

自動(dòng)刷新

現(xiàn)在給一個(gè)需求，讓頁(yè)面每2秒鐘刷新一次，你會(huì)怎么做？可能會(huì)想到定時(shí)器，每2秒調(diào)用一次reload()方法。但其實(shí)只要這樣就可以：

<meta http-equiv="refresh" content="2;url='xxx'">

其中的關(guān)鍵是http-equiv，http-equiv的用途很多，除此之外，它還可以以這樣的方式禁用緩存：

<meta http-equiv="cache-control" content="no-cache">  

SEO

隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代各種APP盛行，SEO對(duì)于站點(diǎn)的重要性沒有以往那么高了，但不代表它不重要，仍有很多用戶是來自搜索引擎，SEO同樣是由HTML來承擔(dān)的。

對(duì)于一個(gè)頁(yè)面而言，最重要的信息就是“標(biāo)題”“描述”和“關(guān)鍵字”，簡(jiǎn)稱TDK，因?yàn)檫@些信息會(huì)直接展示在搜索結(jié)果列表頁(yè)。

<title>你并不精通HTML</title>
<meta name="description" content="你并不精通HTML配套學(xué)習(xí)站點(diǎn)">
<meta name="keywords" content="HTML、HTMLAPI">

上面的代碼就是本書配套官網(wǎng)首頁(yè)的TDK設(shè)置，搜索引擎會(huì)將這些信息展示在搜索結(jié)果中。

有自己搭建個(gè)人博客站點(diǎn)的朋友，SEO是非常值得做好的，因?yàn)槠綍r(shí)大家查知識(shí)點(diǎn)，搜問題解決方案，還是會(huì)使用搜索引擎。

Open Graph協(xié)議

這個(gè)看起來會(huì)陌生，但只是大家平時(shí)較少注意，用了也沒有深究。

Open Graph協(xié)議直譯為開放圖譜協(xié)議，也被稱為OG標(biāo)簽，任何頁(yè)面只要遵守該協(xié)議，在被分享到社交媒體SNS網(wǎng)站上時(shí)，社交網(wǎng)站就會(huì)提取最有效的信息呈現(xiàn)給用戶。

基本用法如下：

<meta propery="og:title" content="文章標(biāo)題">
<meta propery="og:type" content="article">
<meta propery="og:url" content="https://www.htmlapi.cn">
<meta propery="og:image" content="https://www.htmlapi.cn/assets/example.jpg">

社媒會(huì)提取其中的標(biāo)題、url和圖片等，展示在發(fā)布的信息中，對(duì)于分享的呈現(xiàn)效果很重要，日常我們做Facebook、Twitter等分享都會(huì)用到。

安全區(qū)域

開頭已經(jīng)聊了移動(dòng)端適配，這里補(bǔ)充一下安全區(qū)域，這個(gè)概念怎么來的呢？

主要是由于IOS系統(tǒng)更新過程中所出現(xiàn)的劉海攝像頭、底部觸摸橫條等，對(duì)手機(jī)屏幕展示區(qū)域的占用和影響。

不被影響的區(qū)域就稱為“安全區(qū)域”，處理安全區(qū)域，需要在meta中設(shè)定viewport-fit=cover，只有設(shè)置了viewport-fit=cover，類似下面的環(huán)境變量函數(shù)才能生效。

padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom,0.5vh);

以上代碼，就是使用CSS屬性來為我們的網(wǎng)頁(yè)內(nèi)容預(yù)留安全區(qū)域。

狀態(tài)欄顏色

在比較注重體驗(yàn)的站點(diǎn)中，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄的顏色和主體的風(fēng)格顏色是一致的，這樣的好處是更沉浸，更像APP，怎么做的呢？只要這樣就可以：

<meta name="theme-color" content="#x2014">

同時(shí)，它還可以搭配亮色或者暗色模式來使用：

<meta name="theme-color" media="(prefers-colors-scheme:light)" content="skyblue">

Favicon圖標(biāo)

每有新項(xiàng)目上線，大概率最后一個(gè)被發(fā)現(xiàn)的bug，就是站點(diǎn)的標(biāo)簽上缺少品牌logo，要么是空的，要么是Vue或者React的logo，顯得開發(fā)人員很粗糙。

怎么設(shè)置呢，很簡(jiǎn)單，預(yù)先準(zhǔn)備好ico圖片，像下面這樣設(shè)置即可。

<link rel="icon" href="favicon.ico" type="image/x-icon">

資源預(yù)加載

預(yù)加載是大家比較熟悉的一種性能優(yōu)化手段了，為了提升網(wǎng)站的體驗(yàn)，會(huì)優(yōu)先提前加載一部分資源，代碼像這樣。

<link rel="prefetch" href="gitbook/style.js">
<link rel="preload" href="gitbook/style.js" as='script'>

上面這段代碼中，prefetch是預(yù)獲取，preload是預(yù)加載，好像差不多，區(qū)別是什么：

prefetch的原理是緩存，且獲取的是尚未到達(dá)的下一個(gè)頁(yè)面的資源，優(yōu)先級(jí)較低。

preload加載的是本頁(yè)面即將使用的資源，優(yōu)先級(jí)高于其他頁(yè)面，另外，preload在使用的時(shí)候推薦設(shè)置as屬性，精準(zhǔn)指定需要加載的元素類型。

凡事都不是只有好處沒有弊端，這兩者的使用有個(gè)“陷阱”，就是到底要設(shè)置哪些資源，可以設(shè)置多少資源？容易因?yàn)榘盐詹缓枚榷a(chǎn)生浪費(fèi)，原則就是，能夠顯著提高加載速度的，最主要的資源，才設(shè)置，否則不需要設(shè)置。

腳本依賴

現(xiàn)在大家都已經(jīng)習(xí)慣了ES6風(fēng)格的模塊化開發(fā)，較少去關(guān)心腳本加載的順序和依賴關(guān)系，可以交給打包工具去做，但有時(shí)候還是需要自行操作的，比如：鏈入一個(gè)三方廣告、埋點(diǎn)腳本等。

默認(rèn)情況下，外鏈的多個(gè)JavaScript文件會(huì)按照前后順序一個(gè)一個(gè)加載，前面的文件沒加載完，不會(huì)加載后面的文件，包括后續(xù)的頁(yè)面渲染，這就是為什么傳統(tǒng)最佳實(shí)踐中總有一條是“腳本放底部”。

但是，如果這些資源，它們只是“要用”，但沒那么重要，這樣的結(jié)果就有些得不償失。

此時(shí)，我們就可以將對(duì)JavaScript文件的引用改成異步的方式，使用async屬性或者defer屬性都可以達(dá)到這一目的。

<script src="a.js" defer></script>
<script src="b.js" async></script>

既然都可以，只要一個(gè)不就行了？區(qū)別自然是有的。

defer有“依賴”的意思，如果希望保證加載順序，就不能隨便設(shè)置，只能使用defer。

async就是單純的異步，“你走你的，我走我的”，a、b各不相干，誰先執(zhí)行完成是不確定的。

需要注意的是，defer屬性會(huì)推遲對(duì)DOMContentLoaded事件的執(zhí)行，直到所有設(shè)置了defer屬性的JavaScript文件都加載完畢。

type=‘module’

type="module"是一種新的和import語法一起出現(xiàn)的。

一旦JavaScript文件設(shè)置了type="module"，代碼的上下文環(huán)境就不再是全局對(duì)外的，而是私有的，要想外部可訪問，要么使用export語法暴露，要么使用全局對(duì)象暴露。

另外，設(shè)置了type="module"的元素是異步加載與執(zhí)行的，且能保證順序，和defer屬性的表現(xiàn)類似。

小結(jié)

這篇文介紹了一些通常存在于HTML文件頭或者尾的“小角色”，它們往往跟內(nèi)容和業(yè)務(wù)邏輯無關(guān)，但是能幫助我們更好的提升體驗(yàn)，或者為解決問題提供相當(dāng)便捷的方案，十分值得關(guān)注和研究。

更多干貨，我們下篇見！

歡迎關(guān)注公眾號(hào)：前端說書匠。好文第一時(shí)間接收不迷路！~

作者：靈感__idea

鏈接：https://juejin.cn/post/7423235291265417250

來源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。