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

卡尔 等级 477 0 0

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

其实,除了核心的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攻击技术有哪些?

(1)XSS攻击:通过存在安全漏洞的Web网站,注册到用户的浏览器内,渲染非法的HTML标签或者运行非法的 JavaScript进行攻击的一种行为。

(2)SL注入攻击:通过把SQL命令插入Web表单、输入域名或页面请求的查询字符串中,最终达到欺骗服务器执行恶意的SQL命令。

(3)CSRF攻击:攻击者通过设置陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等状态的更新。

本文转自 https://mp.weixin.qq.com/s/obkaY_BI67qC2AAlqAz9Ow,如有侵权,请联系删除。

收藏
评论区

相关推荐

前端开发中79条不可忽视的知识点汇总
过往一些不足的地方,通过博客,好好总结一下。 1.css禁用鼠标事件 css .disabled { pointerevents: none; cursor: default; opacity: 0.6; } 2.get/post的理解和他们之间的区别 http 超文本传输协议(HTTP)的设计目的是保证客户机
《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
有关CSS预编译、管理工具和网络安全的相关面试题
我经常会听到一些想入行前端的人问,前端开发需要学习哪些技术?其实,除了核心的HTML、CSS、JavaScript技术外,像CSS预编译、前端框架,如Vue,React、Node、Angular;代码管理工具,如git,代码编辑器,sublime text,还有测试,网络安全等相关技术也是需要会一些。当然要求可能不会那么高,但至少要懂一些。所有今天准备了一些
Vue进阶(幺柒柒):Vue应用Sass、Scss、Less和Stylus
Vue项目中使用预处理器,可以有效减少css代码量, 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选择,内置的 webpack 仍然会被预配置为可以完成所有的处理,也可以手动安装相应的 webpack loader: Sassnpm
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
Vscode个性化设置:让一个小萌妹陪你敲代码
前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点: 开源,免费; 自定义配置 集成git 智能提示强大 支持各种文件格式(html/jade/css/less/sass/xml) 调试功能强大 各种方便的快捷键 强大的插件扩展 对前端这么友好
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?