狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

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

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

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

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

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

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

自動刷新

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

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

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

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

SEO

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

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

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

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

有自己搭建個人博客站點的朋友，SEO是非常值得做好的，因為平時大家查知識點，搜問題解決方案，還是會使用搜索引擎。

Open Graph協(xié)議

這個看起來會陌生，但只是大家平時較少注意，用了也沒有深究。

Open Graph協(xié)議直譯為開放圖譜協(xié)議，也被稱為OG標(biāo)簽，任何頁面只要遵守該協(xié)議，在被分享到社交媒體SNS網(wǎng)站上時，社交網(wǎng)站就會提取最有效的信息呈現(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">

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

安全區(qū)域

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

主要是由于IOS系統(tǒng)更新過程中所出現(xiàn)的劉海攝像頭、底部觸摸橫條等，對手機(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)頁內(nèi)容預(yù)留安全區(qū)域。

狀態(tài)欄顏色

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

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

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

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

Favicon圖標(biāo)

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

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

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

資源預(yù)加載

預(yù)加載是大家比較熟悉的一種性能優(yōu)化手段了，為了提升網(wǎng)站的體驗，會優(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á)的下一個頁面的資源，優(yōu)先級較低。

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

凡事都不是只有好處沒有弊端，這兩者的使用有個“陷阱”，就是到底要設(shè)置哪些資源，可以設(shè)置多少資源？容易因為把握不好度而產(chǎn)生浪費，原則就是，能夠顯著提高加載速度的，最主要的資源，才設(shè)置，否則不需要設(shè)置。

腳本依賴

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

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

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

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

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

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

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

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

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

type=‘module’

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

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

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

小結(jié)

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

更多干貨，我們下篇見！

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

作者：靈感__idea

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

來源：稀土掘金

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