整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;link> 和 @import 是用于在網(wǎng)頁(yè)中引入外部資源（如樣式表）的兩種不同的方法。它們之間有以下幾個(gè)區(qū)別：
下面是 <link> 和 @import 的區(qū)別以及相應(yīng)的代碼例子：
<link rel="stylesheet" href="styles.css">
@import url("styles.css");
注意：@import 只能在 CSS 文件中使用。
<link rel="stylesheet" href="styles.css">
@import url("styles.css");
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
通過(guò)將 rel 屬性設(shè)置為 "preload"，樣式表可以以異步方式加載，以提高頁(yè)面加載性能。<noscript> 標(biāo)簽內(nèi)的 <link> 標(biāo)簽是為了在不支持 JavaScript 的情況下提供回退。
綜上所述，<link> 標(biāo)簽是更常見(jiàn)、更靈活且性能更好的方法，而 @import 仍然可以在某些特定情況下使用。
去年，有一位開(kāi)發(fā)者創(chuàng)建了一個(gè)網(wǎng)站，用于跟蹤和記錄用戶數(shù)據(jù)，包括點(diǎn)擊，鼠標(biāo)移動(dòng)，瀏覽器類型和操作系統(tǒng)。通過(guò)Web應(yīng)用進(jìn)行用戶跟蹤大家已經(jīng)司空見(jiàn)慣，但是這個(gè)網(wǎng)站使用的方法卻有點(diǎn)"低端"，低端的讓大都為之內(nèi)心一顫，因?yàn)樗姆椒](méi)有用到動(dòng)態(tài)語(yǔ)言，甚至也沒(méi)有用到JavaScript，只是純HTML和一行CSS。這打破長(zhǎng)期以來(lái)大家認(rèn)為了CSS改只能靜態(tài)樣式顯示的的思維。蟲蟲今天就來(lái)給大家解析的他的方法，并附上如何防止此類跟蹤的方法。
這個(gè)方法利用了CSS的兩個(gè)特性：將內(nèi)容注入HTML元素的能力（操縱DOM），以及在用戶執(zhí)行操作后更改樣式的能力（渲染頁(yè)面）。該網(wǎng)站的工作原理是使用content屬性在執(zhí)行操作時(shí)設(shè)置URL。 URL調(diào)用一個(gè)PHP腳本，該腳本記錄有關(guān)操作的詳細(xì)信息，這些操作將作為URL參數(shù)傳遞。使用:: before和:: after CSS選擇器設(shè)置此URL可確保僅在執(zhí)行操作時(shí)調(diào)用URL，而不是在首次加載頁(yè)面時(shí)調(diào)用URL。
例如，以下CSS在每次單擊#link元素時(shí)調(diào)用URL：
跟蹤腳本包含記錄事件時(shí)間和執(zhí)行操作的代碼。它還可用于提取用戶的IP地址，用戶代理和其他識(shí)別信息。
以下是這樣一個(gè)腳本的PHP示例：
用戶可以設(shè)置瀏覽器的User-agent來(lái)欺騙服務(wù)器，但是該追蹤方法中使用@supports at-rule測(cè)試特定于瀏覽器的CSS屬性來(lái)規(guī)避它。例如，以下操作通過(guò)檢測(cè)-webkit-appearance可用，以及-ms-ime-align不可用，來(lái)檢測(cè)是否為Chrome瀏覽器：
為了正確檢測(cè)用戶操作系統(tǒng)，在這個(gè)跟蹤中動(dòng)用了字體檢測(cè)。例如，通過(guò)檢測(cè)瀏覽器是否支持Calibri字體系列，就可以判斷瀏覽器是不是在Windows中運(yùn)行：
方法也有個(gè)示例的頁(yè)面證明可以識(shí)別除了上述提到一些信，還有其他的數(shù)據(jù)，包括瀏覽器窗口的大小和方向，用戶是否點(diǎn)擊了鏈接，以及用戶將鼠標(biāo)懸停在元素上的時(shí)間。
下面是蟲蟲操作后跟蹤到的信息的展示頁(yè)面：
在瀏覽器中很難防止這種攻擊?？梢越柚粋€(gè)跨站注入漏洞來(lái)完美實(shí)現(xiàn)信息竊取，還非常難于發(fā)現(xiàn)。如果想要完全避免這種攻擊，除非禁用CSS，但是這樣一來(lái)網(wǎng)站也就掛掉了。雖然無(wú)法完全杜絕攻擊，但是我們可以使用內(nèi)容安全策略（CSP）增加其利用的難度。
CSP是一組規(guī)則，用于確定瀏覽器可以執(zhí)行和不執(zhí)行的操作。 CSP通常用于防止跨瀏覽器加載不受信任的腳本導(dǎo)致的跨站點(diǎn)腳本（XSS）和其他攻擊。雖然通常與JavaScript文件一起使用，但CSP也可以應(yīng)用于CSS樣式表。
我們假設(shè)由第三方提供商托管的樣式表的網(wǎng)站，攻擊者危及樣式表并將用戶跟蹤添加到頁(yè)面上的鏈接如下：
當(dāng)用戶單擊該鏈接時(shí)，他們的瀏覽器會(huì)其他網(wǎng)站上的跟蹤腳本。由于該行為是通過(guò)瀏覽器完成的，因此網(wǎng)站所有者完全不知道該漏洞。內(nèi)容安全策略通過(guò)設(shè)置允許的樣式以及來(lái)源網(wǎng)站，就可以避免調(diào)用非法來(lái)源的鏈接。
禁用內(nèi)聯(lián)樣式是CSP提供的最大安全優(yōu)勢(shì)之一。內(nèi)聯(lián)樣式是直接在HTML文檔中聲明（或通過(guò)JavaScript設(shè)置）的樣式，而不是從樣式表中加載的樣式。內(nèi)聯(lián)樣式，尤其是動(dòng)態(tài)生成的樣式或用戶創(chuàng)建的樣式，非常難以調(diào)試和保護(hù)。所以CSP通常會(huì)阻止所有內(nèi)聯(lián)樣式，并將那些經(jīng)過(guò)特別批準(zhǔn)的內(nèi)容列入白名單。
以下規(guī)則阻止所有內(nèi)聯(lián)樣式以及外部托管的樣式表：
Content-Security-Policy "style-src 'self';"
如果阻止內(nèi)聯(lián)樣式不能禁止，我們?nèi)匀豢梢允褂霉：碗S機(jī)數(shù)確保CSS的完整性。
在樣式表或內(nèi)聯(lián)樣式上執(zhí)行散列函數(shù)時(shí)，除非樣式更改，否則它應(yīng)該始終返回相同的結(jié)果。這對(duì)于將某些內(nèi)聯(lián)樣式和樣式表列入白名單非常有用，同時(shí)可以驗(yàn)證樣式是否未被修改或篡改。
Nonces則使用哈希類似的功能。但是加入了隨機(jī)數(shù)，為每個(gè)請(qǐng)求生成一個(gè)新的隨機(jī)數(shù)，使攻擊者更難以猜測(cè)其值。這避免了哈希的關(guān)鍵缺點(diǎn):多個(gè)輸入可能生成相同的哈希。
樣式表通常托管在第三方服務(wù)器上，例如CDN中，這會(huì)導(dǎo)致一個(gè)新的攻擊入口。如果CDN遭到入侵，怎么能阻止攻擊篡改托管的CSS呢？
答案是SRI，可以使用資源完整性（SRI）解決此問(wèn)題。
SRI使用哈希來(lái)驗(yàn)證腳本和樣式表的內(nèi)容。計(jì)算每個(gè)文件的哈希并將其附加到HTML元素的完整性屬性。當(dāng)瀏覽器下載腳本或樣式表時(shí)，它會(huì)計(jì)算其哈希值并將其與存儲(chǔ)在屬性中的值進(jìn)行比較。如果匹配，才會(huì)加載腳本或樣式。
雖然通過(guò)CSS跟蹤用戶的能力并不是什么新鮮事，但它確實(shí)需要我們對(duì)網(wǎng)絡(luò)上的隱私和安全性進(jìn)行不同的思考。CSS是現(xiàn)代網(wǎng)絡(luò)的基本語(yǔ)言之一，禁用網(wǎng)站的CSS戶導(dǎo)致大部分網(wǎng)站無(wú)法使用。 Content-Security-Policy是防止XSS攻擊和CSS泄露的最佳方法。關(guān)注蟲蟲，瀏覽更多技術(shù)原創(chuàng)文章。
端基礎(chǔ)，個(gè)人認(rèn)為就是html + js + css。無(wú)論過(guò)程如何，無(wú)論你用的是less還是sass，無(wú)論你用的vue還是react，輸出的結(jié)果，只有html + js + css。
此部分列舉，筆者覺(jué)得重點(diǎn)的知識(shí)點(diǎn)，如有遺漏，歡迎指出。
所謂，語(yǔ)義化的標(biāo)簽，說(shuō)明讓標(biāo)簽有自己的含義。也是近十年。最典型的例子就是header，footer等，它可以讓你在沒(méi)有樣式的情況下，就大概能想到，他就是個(gè)頭部或者底部。他存在的意義，就是讓前端開(kāi)發(fā)人員，在開(kāi)發(fā)過(guò)程中，更容易去閱讀代碼，以及明白這些代碼的意義。
它的好處是：1.能夠更好的展示內(nèi)容結(jié)構(gòu) 2.便于團(tuán)隊(duì)的維護(hù)與開(kāi)發(fā) 3.有利于SEO，爬蟲可以分析每個(gè)關(guān)鍵詞的權(quán)重。4.方便其他設(shè)備解析 (如屏幕閱讀器)
作為前端，你不得不知道的SEO，這涉及到公司的網(wǎng)站推廣。
SEO，中文稱搜索引擎優(yōu)化，一種利用搜索引擎的搜索規(guī)則來(lái)提高目前網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名的方式。他的實(shí)現(xiàn)原來(lái)分別為，頁(yè)面抓取，分析入庫(kù)，檢索排序。
有興趣深入SEO優(yōu)化的朋友：segmentfault.com/a/119000001…
前端經(jīng)常在html頭部看到DOCTYPE的聲明，一般常位于文檔的第一行。那么他的作用是什么，可能對(duì)新的瀏覽器或者新的網(wǎng)站暫無(wú)什么影響，但是相對(duì)古老的瀏覽器或者是網(wǎng)站，可能會(huì)出現(xiàn)不同。因?yàn)闉g覽器有標(biāo)準(zhǔn)模式與兼容模式，差異相對(duì)比較大。
標(biāo)準(zhǔn)模式的渲染方式和 JS 引擎的解析方式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示 ，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
而DOCTYPE的存在，就是為了聲明，該頁(yè)面使用標(biāo)準(zhǔn)模式。不聲明，可能一些舊的網(wǎng)站會(huì)出現(xiàn)兼容模式。
link與import , 本質(zhì)使用上，我們都是用它來(lái)引入css，但是他們有一定的區(qū)別。
首先這兩個(gè)東西為什么而存在的問(wèn)題。在日漸復(fù)雜的前端，異常已經(jīng)是程序的一部分。如果出現(xiàn)一些小問(wèn)題，或者服務(wù)器加載上出現(xiàn)延遲。而我們默認(rèn)的引入的script腳本，會(huì)阻塞后續(xù)的DOM渲染。一旦沒(méi)有部分異常無(wú)法及時(shí)加載完成，那么我們的頁(yè)面因?yàn)樽枞麊?wèn)題，將整個(gè)白屏。
也許我們可以保證自己服務(wù)器的正常，但是你決定保證不了第三方服務(wù)器的正常，于是引入了async和defer來(lái)優(yōu)化這個(gè)問(wèn)題。
再來(lái)談?wù)剆cript的默認(rèn)，async，defer的之前的差異。
默認(rèn)情況下：瀏覽器會(huì)立即加載并執(zhí)行指定的腳本。指定的腳本，指在script標(biāo)簽之上的腳本。所以，如果script放在header中，而對(duì)應(yīng)的文件還未加載完成，會(huì)形成阻塞。所以這就是現(xiàn)在很多頁(yè)面，都會(huì)使用默認(rèn)且把scipt放在頁(yè)面結(jié)尾的原因。
async情況下：async ，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。async是亂序的。
defer情況下：defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。defer是順序執(zhí)行。
此外，async跟defer，不支持或者不兼容IE9一下瀏覽器，總體來(lái)說(shuō)，筆者還是覺(jué)得script放最下方靠譜一些。
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
html章節(jié)，本文僅列出筆者任務(wù)相對(duì)重要的知識(shí)點(diǎn)，且介紹上，針對(duì)重點(diǎn)。當(dāng)然，遺漏很正常，希望能收到你的意見(jiàn)。
喜歡的老鐵，加個(gè)關(guān)注！今后會(huì)分享更多的前端干貨，歡迎點(diǎn)贊轉(zhuǎn)發(fā)關(guān)注[比心][比心][比心]
來(lái)源 https://juejin.im/post/6867715946941775885
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
