欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

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

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

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

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

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

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

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

自動刷新

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

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

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

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

SEO

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

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

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

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

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

Open Graph協議

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

Open Graph協議直譯為開放圖譜協議，也被稱為OG標簽，任何頁面只要遵守該協議，在被分享到社交媒體SNS網站上時，社交網站就會提取最有效的信息呈現給用戶。

基本用法如下：

<meta propery="og:title" content="文章標題">
<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">

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

安全區域

開頭已經聊了移動端適配，這里補充一下安全區域，這個概念怎么來的呢？

主要是由于IOS系統更新過程中所出現的劉海攝像頭、底部觸摸橫條等，對手機屏幕展示區域的占用和影響。

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

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

以上代碼，就是使用CSS屬性來為我們的網頁內容預留安全區域。

狀態欄顏色

在比較注重體驗的站點中，你會發現網頁狀態欄的顏色和主體的風格顏色是一致的，這樣的好處是更沉浸，更像APP，怎么做的呢？只要這樣就可以：

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

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

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

Favicon圖標

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

怎么設置呢，很簡單，預先準備好ico圖片，像下面這樣設置即可。

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

資源預加載

預加載是大家比較熟悉的一種性能優化手段了，為了提升網站的體驗，會優先提前加載一部分資源，代碼像這樣。

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

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

prefetch的原理是緩存，且獲取的是尚未到達的下一個頁面的資源，優先級較低。

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

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

腳本依賴

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

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

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

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

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

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

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

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

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

type=‘module’

type="module"是一種新的和import語法一起出現的。

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

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

小結

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

更多干貨，我們下篇見！

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

作者：靈感__idea

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

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。