lt;link> 和 @import 是用于在網頁中引入外部資源（如樣式表）的兩種不同的方法。它們之間有以下幾個區別：

下面是 <link> 和 @import 的區別以及相應的代碼例子：

1. 加載順序和兼容性：

• 使用 <link> 標簽加載外部樣式表：

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

• 使用 @import 加載外部樣式表：

@import url("styles.css");

注意：@import 只能在 CSS 文件中使用。

2. 權重和覆蓋規則：

• 使用 <link> 標簽引入樣式表：

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

• 使用 @import 引入樣式表：

@import url("styles.css");

3. 異步加載：

• 使用 <link> 標簽異步加載樣式表：

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

通過將 rel 屬性設置為 "preload"，樣式表可以以異步方式加載，以提高頁面加載性能。<noscript> 標簽內的 <link> 標簽是為了在不支持 JavaScript 的情況下提供回退。

• @import 沒有內置的異步加載機制，需要通過其他方式實現異步加載。

綜上所述，<link> 標簽是更常見、更靈活且性能更好的方法，而 @import 仍然可以在某些特定情況下使用。

Content-Security-Policy "style-src 'self';"

端基礎，個人認為就是html + js + css。無論過程如何，無論你用的是less還是sass，無論你用的vue還是react，輸出的結果，只有html + js + css。

此部分列舉，筆者覺得重點的知識點，如有遺漏，歡迎指出。

1.語義化

所謂，語義化的標簽，說明讓標簽有自己的含義。也是近十年。最典型的例子就是header，footer等，它可以讓你在沒有樣式的情況下，就大概能想到，他就是個頭部或者底部。他存在的意義，就是讓前端開發人員，在開發過程中，更容易去閱讀代碼，以及明白這些代碼的意義。

它的好處是：1.能夠更好的展示內容結構 2.便于團隊的維護與開發 3.有利于SEO，爬蟲可以分析每個關鍵詞的權重。4.方便其他設備解析 (如屏幕閱讀器)

2.SEO

作為前端，你不得不知道的SEO，這涉及到公司的網站推廣。

SEO，中文稱搜索引擎優化，一種利用搜索引擎的搜索規則來提高目前網站在有關搜索引擎內的自然排名的方式。他的實現原來分別為，頁面抓取，分析入庫，檢索排序。

有興趣深入SEO優化的朋友：segmentfault.com/a/119000001…

3.doctype

前端經常在html頭部看到DOCTYPE的聲明，一般常位于文檔的第一行。那么他的作用是什么，可能對新的瀏覽器或者新的網站暫無什么影響，但是相對古老的瀏覽器或者是網站，可能會出現不同。因為瀏覽器有標準模式與兼容模式，差異相對比較大。

標準模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標準運行。兼容模式中，頁面以寬松的向后兼容的方式顯示 ，模擬老式瀏覽器的行為以防止站點無法工作。

而DOCTYPE的存在，就是為了聲明，該頁面使用標準模式。不聲明，可能一些舊的網站會出現兼容模式。

4.link與@import

link與import , 本質使用上，我們都是用它來引入css，但是他們有一定的區別。

1. link是一種引入資源的標簽，import是引入css的方式。所以，import引入的只能是css，而link可以引入所有的資源，包括圖片，RSS等。
2. 加載順序上也有一些差異。link引用的CSS會同時被加載。import引用的CSS會等到頁面全部被下載完再加載。
3. 兼容性的差別。link無任何兼容問題，import兼容IE5以上。（當然，IE5估計也找不到了）
4. 動態引入樣式 link可以后期引入樣式，而import是不可以后期引入的，只能初始化頁面之前引入。
5. 復用率的問題 import可以復用之前的css文件，而link只能一次引用一個文件。當然，import復用文件時，在瀏覽器實際上是加載了多個文件，會有多個請求。而每一個link只是一個http請求。

5.async與defer

首先這兩個東西為什么而存在的問題。在日漸復雜的前端，異常已經是程序的一部分。如果出現一些小問題，或者服務器加載上出現延遲。而我們默認的引入的script腳本，會阻塞后續的DOM渲染。一旦沒有部分異常無法及時加載完成，那么我們的頁面因為阻塞問題，將整個白屏。

也許我們可以保證自己服務器的正常，但是你決定保證不了第三方服務器的正常，于是引入了async和defer來優化這個問題。

再來談談script的默認，async，defer的之前的差異。

默認情況下：瀏覽器會立即加載并執行指定的腳本。指定的腳本，指在script標簽之上的腳本。所以，如果script放在header中，而對應的文件還未加載完成，會形成阻塞。所以這就是現在很多頁面，都會使用默認且把scipt放在頁面結尾的原因。

async情況下：async ，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。async是亂序的。

defer情況下：defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。defer是順序執行。

此外，async跟defer，不支持或者不兼容IE9一下瀏覽器，總體來說，筆者還是覺得script放最下方靠譜一些。

6.文本元素的冒泡與委托

適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

• 優點：1.減少事件注冊，節省內存。例如上面代碼，只指定 父元素的處理程序，即可管理所有所有子元素的“click”事件；2.簡化了dom節點更新時，相應事件的更新

• 缺點：1.利用事件冒泡的原理，不支持不冒泡的事件；2.層級過多，冒泡過程中，可能會被某層阻止掉；3. 理論上委托會導致瀏覽器頻繁調用處理函數，雖然很可能不需要處理。所以建議就近委托，比如在ol上代理li，而不是在document上代理li。4. 把所有事件都用代理就可能會出現事件誤判。比如，在document中代理了所有button的click事件，另外的人在引用該js時，可能不知道，造成單擊button觸發了兩個click事件。

html章節，本文僅列出筆者任務相對重要的知識點，且介紹上，針對重點。當然，遺漏很正常，希望能收到你的意見。

喜歡的老鐵，加個關注！今后會分享更多的前端干貨，歡迎點贊轉發關注[比心][比心][比心]

來源 https://juejin.im/post/6867715946941775885