link与@import的区别和分别对应的例子

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 仍然可以在某些特定情况下使用。

SS代码实现用户跟踪及反跟踪方法

去年，有一位开发者创建了一个网站，用于跟踪和记录用户数据，包括点击，鼠标移动，浏览器类型和操作系统。通过Web应用进行用户跟踪大家已经司空见惯，但是这个网站使用的方法却有点"低端"，低端的让大都为之内心一颤，因为他的方法没有用到动态语言，甚至也没有用到JavaScript，只是纯HTML和一行CSS。这打破长期以来大家认为了CSS改只能静态样式显示的的思维。虫虫今天就来给大家解析的他的方法，并附上如何防止此类跟踪的方法。

跟踪原理

这个方法利用了CSS的两个特性：将内容注入HTML元素的能力（操纵DOM），以及在用户执行操作后更改样式的能力（渲染页面）。该网站的工作原理是使用content属性在执行操作时设置URL。 URL调用一个PHP脚本，该脚本记录有关操作的详细信息，这些操作将作为URL参数传递。使用:: before和:: after CSS选择器设置此URL可确保仅在执行操作时调用URL，而不是在首次加载页面时调用URL。

例如，以下CSS在每次单击#link元素时调用URL：

跟踪脚本包含记录事件时间和执行操作的代码。它还可用于提取用户的IP地址，用户代理和其他识别信息。

以下是这样一个脚本的PHP示例：

浏览器探测

用户可以设置浏览器的User-agent来欺骗服务器，但是该追踪方法中使用@supports at-rule测试特定于浏览器的CSS属性来规避它。例如，以下操作通过检测-webkit-appearance可用，以及-ms-ime-align不可用，来检测是否为Chrome浏览器：

操作系统探测

为了正确检测用户操作系统，在这个跟踪中动用了字体检测。例如，通过检测浏览器是否支持Calibri字体系列，就可以判断浏览器是不是在Windows中运行：

方法也有个示例的页面证明可以识别除了上述提到一些信，还有其他的数据，包括浏览器窗口的大小和方向，用户是否点击了链接，以及用户将鼠标悬停在元素上的时间。

下面是虫虫操作后跟踪到的信息的展示页面：

反追踪方法

在浏览器中很难防止这种攻击。可以借助一个跨站注入漏洞来完美实现信息窃取，还非常难于发现。如果想要完全避免这种攻击，除非禁用CSS，但是这样一来网站也就挂掉了。虽然无法完全杜绝攻击，但是我们可以使用内容安全策略（CSP）增加其利用的难度。

CSP是一组规则，用于确定浏览器可以执行和不执行的操作。 CSP通常用于防止跨浏览器加载不受信任的脚本导致的跨站点脚本（XSS）和其他攻击。虽然通常与JavaScript文件一起使用，但CSP也可以应用于CSS样式表。

我们假设由第三方提供商托管的样式表的网站，攻击者危及样式表并将用户跟踪添加到页面上的链接如下：

当用户单击该链接时，他们的浏览器会其他网站上的跟踪脚本。由于该行为是通过浏览器完成的，因此网站所有者完全不知道该漏洞。内容安全策略通过设置允许的样式以及来源网站，就可以避免调用非法来源的链接。

禁用内联样式

禁用内联样式是CSP提供的最大安全优势之一。内联样式是直接在HTML文档中声明（或通过JavaScript设置）的样式，而不是从样式表中加载的样式。内联样式，尤其是动态生成的样式或用户创建的样式，非常难以调试和保护。所以CSP通常会阻止所有内联样式，并将那些经过特别批准的内容列入白名单。

以下规则阻止所有内联样式以及外部托管的样式表：

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

使用哈希和随机数验证样式

如果阻止内联样式不能禁止，我们仍然可以使用哈希和随机数确保CSS的完整性。

在样式表或内联样式上执行散列函数时，除非样式更改，否则它应该始终返回相同的结果。这对于将某些内联样式和样式表列入白名单非常有用，同时可以验证样式是否未被修改或篡改。

Nonces则使用哈希类似的功能。但是加入了随机数，为每个请求生成一个新的随机数，使攻击者更难以猜测其值。这避免了哈希的关键缺点:多个输入可能生成相同的哈希。

对外部样式表进行验证

样式表通常托管在第三方服务器上，例如CDN中，这会导致一个新的攻击入口。如果CDN遭到入侵，怎么能阻止攻击篡改托管的CSS呢？

答案是SRI，可以使用资源完整性（SRI）解决此问题。

SRI使用哈希来验证脚本和样式表的内容。计算每个文件的哈希并将其附加到HTML元素的完整性属性。当浏览器下载脚本或样式表时，它会计算其哈希值并将其与存储在属性中的值进行比较。如果匹配，才会加载脚本或样式。

虽然通过CSS跟踪用户的能力并不是什么新鲜事，但它确实需要我们对网络上的隐私和安全性进行不同的思考。CSS是现代网络的基本语言之一，禁用网站的CSS户导致大部分网站无法使用。 Content-Security-Policy是防止XSS攻击和CSS泄露的最佳方法。关注虫虫，浏览更多技术原创文章。

端基础，个人认为就是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，但是他们有一定的区别。

link是一种引入资源的标签，import是引入css的方式。所以，import引入的只能是css，而link可以引入所有的资源，包括图片，RSS等。
加载顺序上也有一些差异。link引用的CSS会同时被加载。import引用的CSS会等到页面全部被下载完再加载。
兼容性的差别。link无任何兼容问题，import兼容IE5以上。（当然，IE5估计也找不到了）
动态引入样式 link可以后期引入样式，而import是不可以后期引入的，只能初始化页面之前引入。
复用率的问题 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

在线咨询

上一篇：前端入门-html 表单
下一篇：HTML DOM 事件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商