有关CSS预编译、管理工具和网络安全的相关面试题

我经常会听到一些想入行前端的人问，前端开发需要学习哪些技术？

其实，除了核心的HTML、CSS、JavaScript技术外，像CSS预编译、前端框架，如Vue，React、Node、Angular；代码管理工具，如git，代码编辑器，sublime text，还有测试，网络安全等相关技术也是需要会一些。当然要求可能不会那么高，但至少要懂一些。所有今天准备了一些其他于前端相关的面试题供大家学习参考。希望对大家有所帮助。

CSS预编译面试题

在大型项目中，为了提高CSS的可维护性，人们开始使用CSS预编译技术。

CSS预编译部分的面试题主要考察开发者对CSS预编译技术的使用。

当然，CSS预编译技术中的变量、混合、方法、继承、作用域、语句、插值等也是应试者需要了解的。

目前CSS预编译器主要有3种，分别是Less、 Sass、Stylus，应试者可以选择一种，了解它的使用方式。

1、scss是什么？有哪几大特性？

sass是CSS预处理语言，scss是Sass语言中一套语法的拓展名。scss的特征是可以将CSS当作函数编写，可以定义变量，可以嵌套定义，可以使用语句等。

2、安装和使用Sass的步骤是什么？

具体步骤如下。

（1）通过npm安装css-loader、 node-loader、sass- loader等加载器模块。

（2）在 webpack .config. js配置文件中定义Sass加载器。

3、Sass和Less有什么区别？

区别如下。

（1）编译环境不一样。Sass的安装需要Ruby环境，是在服务器端处理的。而Less需要引入 less.js来处理，然后Less代码输岀CSS到浏览器中；也可以在开发环境中使用Less，然后编译成CSS文件，直接放到项目中运行。

（2）变量名不一样。Less中使用@，而Sass中使用$。

（3）插值语法不同，Less中使用@{key}，Sass中使用#{$key}。

（4）Sass的混合相当于Less的方法，Sass的继承相当于Less的混合。

（5）输出设置不同。Less没有输出设置。Sass提供4种输出选项：nested、compact、 compressed和 expanded。nested选项用于嵌套缩进的CSS代码（默认）， expanded选项用于展开多行CSS代码， compact选项显示简洁格式的CSS代码， compressed选项显示压缩后的CSS代码。

（6）Sass支持条件语句，如if…else、for循环等，而Less不支持。

（7）引用外部CSS文件的方式不同。Sass引用外部文件时必须以“ _”开头，文件名如果以下划线“_”命名，Sass会认为该文件是一个引用文件，不会将其编译为CSS文件。Less引用外部文件和CSS中的@ import没什么差异。

（8）Sass和Less的工具库不同。Sass有工具库 Compass。简单说，Sass和 Compass的关系有点像 JavaScript和 jQuery的关系， Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充和强化了Sass的功能。Less有UI组件库 Bootstrap, Bootstrap是Web前端开发中一个比较有名的前端UI组件库， Bootstrap中样式文件的部分源码就是采用Less语法编写的。

总之，不管是Sass，还是Less，都可以将它们视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。Sass的功能比Less强大，可以认为Sass是种真正的编程语言；Less则相对清晰眀了，易于上手，对编译环境的要求比较宽松。

4、什么是CSS预处理器/后处理器？

预处理器（例如，Less、Sass、 Stylus）是用来把Sass或Less预编译成CSS的工具，増强了CSS代码的复用性。它有层级、 mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，能极大地提高工作效率。

后处理器（如 PostCSS）通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效。目前最常做的是给CSS属性添加浏览器私有前缀，解决跨浏览器兼容性的问题。

版本管理工具面试题

在多人开发中，势必要有一个理想的工具来管理每个人开发的代码，Git、SVN等就是这类版本控制工具的代表。版本控制工具部分的面试题主要考察应试者对版本控制工具的了解，例如，使用Git提交代码、解决冲突、发布到服务器端的方式，以及Git的架构理念、文件状态等。

1、说说SVN和Git的区别。

SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而开发的时候，用的都是自己的PC端。所以，首先要从中央服务器那里得到最新的版本，然后开发，旦开发任务完成后，需要把自己开发的文件推送到中央服务器。集中式版本控制系统必须联网才能工作，如果在局城网环境下带宽够大，速度够快，还是很方便的。但如果在互联网环境下网速很慢，就会严重影响开发效率Gⅱt是分布式版本控制系统，它没有中央服务器，每个人的PC就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本库都是在自己的PC上。每个人的PC都有一个完整的版本库，当多人协作开发的时候，只须把各自的修改文件推送给对方，就可以互相看到对方的修改了。

2、说说Git中 merge和 rebase的区别。

在Git中， merge和 rebase从最终效果来看没有任何区别，都是将不同分支的代码融合在一起，但是生成的代码树稍有不同。rebase操作不会生成新的节点，而是将两个分支融合成一个线性的提交。而 merge操作生成的代码树会显得比较乱。

3、你都使用哪些工具来测试代码的性能？

Profiler、 JSPerf等。

4、如何管理你的项目代码？管理项目代码的过程中，大多数情况下使用命令行还是工具？

在项目开发阶段就使用Git。在项目开始阶段，通常会单独拉取一个分支，在这个分支上开发新功能。做好之后让经理审核一下代码，如果代码没问题，他会把分支合并到主干上。

当没有冲突的时候用命令行比较多。首先，在每次提交之前我会使用 Git pull拉取线上的代码，获取最新的代码。

然后通过Git add，把新的代码写入缓冲区，再用 Git commit-m“备注”生成一个本地的版本，最后用 Git push推到线上库。

5、Git fetch和Git pull的区别是什么？

区别如下。

Git pull相当于从远程获取最新版本并合并到本地；

Git fetch相当于从远程获取最新版本并存放到本地，而不会自动合并。

网络安全面试题

网络安全是网站能够正常运行的保证，因此越来越多的人开始关注网络安全这一部分的内容。

网络安全部分的面试题主要考察应试者对网络的认知，开发者需要了解常见的网络攻击方式，并在开发中避免漏洞。网络漏洞无法预知（如果能够预知新的漏洞就不会再有攻击者了），但是屏蔽掉已知的漏洞还是十分必要的。

1、SQL注入是什么？如何防护？

SQL注入就是把SQL命令插入Web表单、输入域名或页面请求的查询字符串中，最终达到欺骗服务器执行恶意的SQL命令。

总的来说，有以下几点防护措施。

（1）始终不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式或限制长度，对单引号和双“-”进行转换等。

（2）始终不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询与存取。

（3）始终不要使用管理员权限的数据库连接，为每个应用使用单独的权限和有限的权限数据库连接，

（4）不要把机密信息用明文存放，应通过加密或者散列处理密码和敏感的信息。

2、XSS攻击是什么？如何防护？

XSS（ Cross Site Scripting）攻击指的是攻击者向Web页面里插入恶意HTML标签或者 JavaScript代码。比如，攻击者在论坛中放一个看似安全的链接，骗取用户单击并窃取 cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

要防范XSS攻击，首先，在代码里对用户输入的地方和变量都需要仔细检查长度和对“<” “>” “;” “ ' ”等字符做过滤。其次，在把任何内容写到页面之前都必须进行编码，避免泄露 htmltag。在这一个层面做好，至少可以防止超过一半的XSS攻击。

3、如何避免 cookie信息被盗取？

首先，避免直接在 cookie中泄露用户隐私，例如E-mai、密码等。

其次，使 cookie和系统ip绑定，降低 cookie泄露后的危险。这样攻击者得到的cookie没有实际价值，不可能拿来重放。如果网站不需要在浏览器端对 cookie进行操作，可以在 Set-Cookie末尾加上 HttpOnly防止 JavaScript代码直接获取 cookie。

最后，尽量采用POST请求方式而非GET请求方式提交表单。

4、XSS攻击与CSRF攻击有什么区别？

XSS攻击用于获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF攻击用于代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

5、如何防范CSRF攻击？

要完成一次CSRF攻击，受害者必须依次完成两个步骤。

（1）登录受信任网站A，并在本地生成 cookie。

（2）在不登出A的情况下，访问危险网站B防范服务器端的CSRF攻击有很多种方法，但总的思想都是一致的，就是在客户端页面中增加伪随机数。

6、你所了解的Web攻击技术有哪些？