我经常会听到一些想入行前端的人问，前端开发需要学习哪些技术？其实，除了核心的HTML、CSS、JavaScript技术外，像CSS预编译、前端框架，如Vue，React、Node、Angular；代码管理工具，如git，代码编辑器，sublime text，还有测试，网络安全等相关技术也是需要会一些。当然要求可能不会那么高，但至少要懂一些。所有今天准备了一些其他于前端相关的面试题供大家学习参考。希望对大家有所帮助。在大型项目中，为了提高CSS的可维护性，人们开始使用CSS预编译技术。
CSS预编译部分的面试题主要考察开发者对CSS预编译技术的使用。当然，CSS预编译技术中的变量、混合、方法、继承、作用域、语句、插值等也是应试者需要了解的。目前CSS预编译器主要有3种，分别是Less、 Sass、Stylus，应试者可以选择一种，了解它的使用方式。sass是CSS预处理语言，scss是Sass语言中一套语法的拓展名。scss的特征是可以将CSS当作函数编写，可以定义变量，可以嵌套定义，可以使用语句等。（1）通过npm安装css-loader、 node-loader、sass- loader等加载器模块。（2）在 webpack .config. js配置文件中定义Sass加载器。（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则相对清晰眀了，易于上手，对编译环境的要求比较宽松。预处理器（例如，Less、Sass、 Stylus）是用来把Sass或Less预编译成CSS的工具，増强了CSS代码的复用性。它有层级、 mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，能极大地提高工作效率。后处理器（如 PostCSS）通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效。目前最常做的是给CSS属性添加浏览器私有前缀，解决跨浏览器兼容性的问题。在多人开发中，势必要有一个理想的工具来管理每个人开发的代码，Git、SVN等就是这类版本控制工具的代表。版本控制工具部分的面试题主要考察应试者对版本控制工具的了解，例如，使用Git提交代码、解决冲突、发布到服务器端的方式，以及Git的架构理念、文件状态等。
SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而开发的时候，用的都是自己的PC端。所以，首先要从中央服务器那里得到最新的版本，然后开发，旦开发任务完成后，需要把自己开发的文件推送到中央服务器。集中式版本控制系统必须联网才能工作，如果在局城网环境下带宽够大，速度够快，还是很方便的。但如果在互联网环境下网速很慢，就会严重影响开发效率Gⅱt是分布式版本控制系统，它没有中央服务器，每个人的PC就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本库都是在自己的PC上。每个人的PC都有一个完整的版本库，当多人协作开发的时候，只须把各自的修改文件推送给对方，就可以互相看到对方的修改了。2、说说Git中 merge和 rebase的区别。在Git中， merge和 rebase从最终效果来看没有任何区别，都是将不同分支的代码融合在一起，但是生成的代码树稍有不同。rebase操作不会生成新的节点，而是将两个分支融合成一个线性的提交。而 merge操作生成的代码树会显得比较乱。4、如何管理你的项目代码？管理项目代码的过程中，大多数情况下使用命令行还是工具？在项目开发阶段就使用Git。在项目开始阶段，通常会单独拉取一个分支，在这个分支上开发新功能。做好之后让经理审核一下代码，如果代码没问题，他会把分支合并到主干上。当没有冲突的时候用命令行比较多。首先，在每次提交之前我会使用 Git pull拉取线上的代码，获取最新的代码。然后通过Git add，把新的代码写入缓冲区，再用 Git commit-m“备注”生成一个本地的版本，最后用 Git push推到线上库。5、Git fetch和Git pull的区别是什么？Git pull相当于从远程获取最新版本并合并到本地；Git fetch相当于从远程获取最新版本并存放到本地，而不会自动合并。网络安全是网站能够正常运行的保证，因此越来越多的人开始关注网络安全这一部分的内容。网络安全部分的面试题主要考察应试者对网络的认知，开发者需要了解常见的网络攻击方式，并在开发中避免漏洞。网络漏洞无法预知（如果能够预知新的漏洞就不会再有攻击者了），但是屏蔽掉已知的漏洞还是十分必要的。SQL注入就是把SQL命令插入Web表单、输入域名或页面请求的查询字符串中，最终达到欺骗服务器执行恶意的SQL命令。（1）始终不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式或限制长度，对单引号和双“-”进行转换等。（2）始终不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询与存取。（3）始终不要使用管理员权限的数据库连接，为每个应用使用单独的权限和有限的权限数据库连接，（4）不要把机密信息用明文存放，应通过加密或者散列处理密码和敏感的信息。XSS（ Cross Site Scripting）攻击指的是攻击者向Web页面里插入恶意HTML标签或者 JavaScript代码。比如，攻击者在论坛中放一个看似安全的链接，骗取用户单击并窃取 cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。要防范XSS攻击，首先，在代码里对用户输入的地方和变量都需要仔细检查长度和对“<” “>” “;” “ ' ”等字符做过滤。其次，在把任何内容写到页面之前都必须进行编码，避免泄露 htmltag。在这一个层面做好，至少可以防止超过一半的XSS攻击。首先，避免直接在 cookie中泄露用户隐私，例如E-mai、密码等。其次，使 cookie和系统ip绑定，降低 cookie泄露后的危险。这样攻击者得到的cookie没有实际价值，不可能拿来重放。如果网站不需要在浏览器端对 cookie进行操作，可以在 Set-Cookie末尾加上 HttpOnly防止 JavaScript代码直接获取 cookie。最后，尽量采用POST请求方式而非GET请求方式提交表单。XSS攻击用于获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF攻击用于代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤。（1）登录受信任网站A，并在本地生成 cookie。（2）在不登出A的情况下，访问危险网站B防范服务器端的CSRF攻击有很多种方法，但总的思想都是一致的，就是在客户端页面中增加伪随机数。（1）XSS攻击：通过存在安全漏洞的Web网站，注册到用户的浏览器内，渲染非法的HTML标签或者运行非法的 JavaScript进行攻击的一种行为。（2）SL注入攻击：通过把SQL命令插入Web表单、输入域名或页面请求的查询字符串中，最终达到欺骗服务器执行恶意的SQL命令。（3）CSRF攻击：攻击者通过设置陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等状态的更新。推荐阅读
【前端面试题】—18道有关混合开发的面试题(附答案)
【前端面试题】—21道有关移动端的面试题(附答案)
【前端面试题】—19道有关前端测试的面试题(附答案)
【前端面试题】—26道HTTP和HTTPS的面试题(附答案)
【前端面试题】—18道有关模块化开发的面试题(附答案)
【前端面试题】—21道关于性能优化的面试题(附答案)
【前端面试题】—44道常见Augluar基础面试题（附答案）
