重學 html の link標籤

時間 2019-11-10

標籤 html link 標籤欄目 HTML 简体版

原文原文鏈接

link元素規定了外部資源與當前文檔的關係。經常使用於連接樣式表，建立網站圖標，預加載資源等。css

連接樣式表

<link href="main.css" rel="stylesheet">

建立站點圖標

<link rel="icon" type="image/png" href="myicon.png">

預加載

用於前端界面性能優化，rel 的屬性值能夠爲preload、prefetch、dns-prefetch。html

<link rel="preload" href="style.css" as="style">
<link rel="prefetch" href="/uploads/images/pic.png">
<link rel="dns-prefetch" href="//fonts.googleapis.com">

prefetch 預獲取

用戶在使用當前界面時，瀏覽器空閒時先把下個界面要使用的資源下載到本地緩存。瀏覽器下不下載不可知。
舉個例子：網站有A，B 兩個界面。當用戶訪問界面 A 時有很大的機率會訪問 B 界面（好比登陸跳轉）那麼咱們能夠在用戶訪問界面 A 的時候，提早將 B 界面須要的某些資源下載到本地，性能會獲得很大的提高。那麼咱們只須要在界面 A.html 文件中設置以下代碼：前端

<link rel="prefetch" href="/uploads/images/pic.png">

preload

控制當前界面的資源下載優先級，瀏覽器必須下載資源。
舉個例子：網站的一個界面 A的 css 樣式文件中使用了外部字體文件，正常狀況下該字體的下載是在 css 解析的時候完成的。想一想字體文件好像在 css 樣式文件解析以前下載到本地比較好。那麼咱們就能夠在head標籤設置字體的 preload。git

<link rel="preload" href="https://example.com/fonts/font.woff" as="font">

dns-prefetch

按照字面理解便可，先把要跳轉的域名解析，減小時間。
github

prefetch & preload 對比

關注的頁面不一樣： prefetch 關注要使用的頁面，preload 關注當前頁面
資源是否下載：prefetch 的資源下載狀況未知（只在瀏覽器空閒時會下載），preload 確定下載

media 屬性

media 屬性規定被連接文檔將顯示在什麼設備上。api

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

注意：當界面加載時，兩個樣式表都會下載到客戶端，只是會根據場景不一樣使用不一樣的樣式。
瀏覽器

TODO

script 標籤的 async 和 defer 屬性的區別和目的？
緩存

引用

preload & prefetch
一步前端性能優化

1. Html Link 標籤
2. html預加載之link標籤
3. meta與link標籤
4. 7-20 html重點標籤學習一
5. HTML標籤分類（重點）
6. html中權重標籤
7. SEO中HTML標籤權重
8. HTML標籤---head,meta,link,title,多媒體標籤，超連接標籤等
9. Meta，Link標籤詳解
10. 利用link標籤rel="alternate&…
更多相關文章...
• Git 標籤 - Git 教程
• MyBatis if標籤 - MyBatis教程
• 適用於PHP初學者的學習線路和建議
• Tomcat學習筆記（史上最全tomcat學習筆記）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。