都2024了 居然面试还有人问link和@import区别，还不如问less scss或者import require符合实际工作

---

前言

这段时间面试被问到了前端的link和@import区别是什么？当时脑壳就炸了，我以为穿越到2016年。
不过吐槽归吐槽，但是技术还是掌握，了解区别就行了。

一、link和@import

link和@import都是css的引入方式，不过区别也是有的
1、关系 ： link是html标签，用于外链css文件，而@import是css里的一部分，可以理解为语法糖，用于在css里再加载其他的css文件。
2、兼容：link作为古老的存在，几乎所有浏览器都支持，但是import在一些老旧的IE浏览器中可能不支持，但是现在还有谁用那么旧的IE，恐怕也不是企业的目标用户吧。
3、异常：link加载css文件如果出现错误，一般会忽略或者跳过，并不影响其他css文件的加载和渲染，但是@import加载异常时，可能会导致整个样式表，从而影响页面的渲染。

注: 其实在常规项目开发中，编译之后都都是静态的css文件，只有前端在工程源码内可能会引入一些css变量。

二、less和scss

less和scss都是目前常用css常用开发处理模式，可以设定变量、计算、嵌套等操作，但项目编译后都会形成css文件，通过页面标签link引入。
主要还是关键字的区别：两者的关键字有很大区别，甚至有些功能是特有，如声明变量less用@符号标识，而scss用$标识。Less不支持条件语句、循环语句，但是scss支持 @if () {} @else{} 和@for … {}
其他还有些小区别，比如引入命名要加下划线、颜色函数。
而嵌套方式都是一样的，直接写在子集就行。

三、import和require

import和require都是模块化编程中用于引入其他模块的语句，两者功能相似，由于出处不同所以使用上有些区别，目前都是工程化开发，用到的都是import，对于require确实很久没有碰到了。
1、处出
require来自CommonJS，配合目标文件中exports使用，一般使用在node端。
import来自ECMAScript2015（ES6），配合目标文件中export使用，一般用在前端工程内，如vue、react。
**2、加载时间 **
require/exports 是运行时动态加载，import/export 是静态编译。
因为是静态编译，所以import获得是引用，而require是运行时的对象拷贝。
**3、其他 **
一般都是将import和require写在文件顶部，不过import可以放在非顶部位置，但是不建议，因为同事看到了会问候家人。
注： 一般的前端程序员主要就用到import，接触node服务端开发才用的require多一些。

总结

虽然2024的就业环境真不咋滴，但不管是否真招人的面试好歹问一些当前应用的技术问题吧。

以上文章中如有问题，欢迎留言或私信指出