「 CSS篇 」

1. CSS 盒子模型，绝对定位和相对定位

2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

  当子元素设置了float属性之后，且父元素的高度和宽度没有进行设置，而是由子元素支撑起来，则会导致父元素的高度塌陷(原本的height后来被置为0)

   解决这种问题的方式主要有两种： 
   a.在父元素内添加冗余元素clear:both; 

   b.在父元素中设置属性overflow:hidden||auto

3. 如何保持浮层水平垂直居中

(1)利用绝对定位和transform

<div class="parent"><div class="children"></div>
</div>.children{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);background: black;
}

(2) 利用flexbox 

.parent{justify-content:center;align-items:center;display: -webkit-flex;
}

(3) 利用定位与margin: auto;

　　 <div class="parent"><div class="child">哈哈</div></div>.parent{width: 600px;height: 400px;background: red;position: relative;}.child{width: 200px;height: 200px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;background: black;}

 

4. position 和 display 的取值和各自的意思和用法

position:

1. static: 没有定位，正常状态下。可以快速取消定位，让top、right、bottom、left 失效

2. relative: 相对于其在正常流中的位置偏移，原本占据的空间依然会保留

3. absolute: 相对于第一个position属性不为static的父类定位，会脱离正常文档流，不占据空间位置。

4. fixed: 定位原点相对于浏览器窗口，而且不能变。

5. inherit: 从父类继承position属性的值，但是任何版本的IE都不支持该属性

6. sticky: 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置，这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。

7. 最后说一点，z-index属性是针对以上定位属性而出现的，它只在定位元素上有效。

display

display 属性规定元素应该生成的框的类型，文档内任何元素都是框，块框或行业框

(1) display:none和visiability: hidden 都可以隐藏div，前者不占据文档的空间，后者占据文档的位置。

(2) inline: 行内元素，以水平方式布局，垂直方向的margin和padding都是无效的，大小和内容一样，且无法设置宽高。

(3) block: 块元素，独占一行，可以使用margin来控制元素之间间距

(4) inline-block: 既具有block的宽度高度特性又具有inline的同行特性 

5. 样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，

1、样式的层级关系：一个是权重，另一个就是共用样式和私用样式了，比如说两个ul，它们的子元素除了背景色之外都一样，那可以直接用li {}来定义相同的公用样式，用 .ul_1 li {} ， .ul_2 li {} 来定义不相同的样式。可以根据元素之间的差别来选择用哪种方法。推荐用多层级的方式书写css选择器。

 

2、选择器优先级：（!important>）id选择器>class选择器（属性选择器/伪类选择器）>标签选择器（伪元素选择器） 同类选择符条件下层级越多的优先级越高。优先级就近原则，同权重情况下样式定义最近者为准。载入样式以最后载入的定位为准。

 

3、样式冲突：   如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
        选择器一样的情况下后面的会覆盖前面的属性。
        使用嵌套选择器时：
        　　一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
        　　p的特性是1（一个html选择器）
        　　div p的特性是2（两个html选择器）
        　　.tree的特性是10（1个class选择器）
        　　div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
        　　#baobab的特性是100（1个ID选择器）
        　　body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）

            基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。

 

4、抽离样式模块
    因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
        最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）


        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }

 

6. css3动画效果属性，canvas、svg的区别，CSS3中新增伪类举例

https://blog.csdn.net/qq_41696819/article/details/81531494

7. px和em和rem的区别，CSS中link 和@import的区别是?

PX特点

-1. IE无法调整那些使用px作为单位的字体大小；

-2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

-3. Firefox能够调整px和em，rem，但是有大部分的国产浏览器使用IE内核。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

-1. em的值并不是固定的；

-2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

-1. body选择器中声明Font-size=62.5%；

-2. 将你的原来的px数值除以10，然后换上em作为单位；

-3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem特点

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子：

p {font-size:14px; font-size:.875rem;}

5. 了解过flex吗?

JavaScript 的面向对象

1. JS 模块包装格式都用过哪些，CommonJS、AMD、CMD。定义一个JS 模块代码，最精简的格式是怎样。

https://www.jianshu.com/p/bd4585b737d7  

2. JS 怎么实现一个类。怎么实例化这个类。

var Clazz = function(){
this.name = 'javascript';

this.type = 'computer';

}
var clazz = new Clazz;
clazz.name;
clazz.type; 

3. 理解闭包吗?请讲一讲闭包在实际开发中的作用;闭包建议频繁使用吗?

闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。eg:

function outer() {var  a = '变量1'var  inner = function () {console.info(a)}return inner    // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}
var  inner = outer()   // 获得inner闭包函数
inner()   //"变量1"

 

4. 说一下了解的js 设计模式，解释一下单例、工厂、观察者。

单例：任意对象都会单例，不需要特别处理；（单例模式中的单件确保类有且仅有一个）；
工厂：同样形式参数返回不同的实例；
代理：新建类调用老类的接口，包一下；
观察者：就是事件模式比如按钮事件；
发布者，订阅者：发布一个对象/字符串到所有订阅者；
观察者模式就是处理对象间一对多的依赖关系的，当一个对象发生变化，其它依赖他的对象都要得到通知并更新。
抽象工厂的目的是要提供一个创建一系列相关或相互依赖对象的接口，而不需要指定它们具体的类。这种模式可以汽车制造厂所使用的金属冲压设备中找到。这种冲压设备可以制造汽车车身部件。同样的机械用于冲压不同的车型的右边车门、左边车门、右前挡泥板、左前挡泥板和引擎罩等等。通过使用转轮来改变冲压盘，这个机械产生的具体类可以在三分钟内改变。
装饰模式
工厂模式：把实现同一件事情的相同代码放到一个函数中，之后如果用到这个功能就不用再重新写代码，直接调用，也叫函数的封装；减少页面的冗余代码，提高代码的重复利用率；达到开发软件时的低耦合高内聚。
 

5. ajax 跨域有哪些方法，jsonp 的原理是什么，如果页面编码和被请求的资源编码不一致如何处理?

ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现:(注意，是ajax请求，请不要说为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是不行的) 

No 'Access-Control-Allow-Origin' header is present on the requested resource,并且The response had HTTP status code 404

 

如何解决ajax跨域

• JSONP方式：基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)
• CORS方式：后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)
• 代理请求方式：端给我们提供了接口，但是在本地开发环境开发的时候会遇到跨域的问题，这个时候，后端由于一些安全性的考虑，不愿意配置跨域信息。这个时候，我们就要自己搭建 node 服务器来转发请求，以实现跨域

https://segmentfault.com/a/1190000012469713

「 开源工具 」

1)是否了解开源的架构工具 bower、npm、yeoman、gulp、webpack，有无用过，有无写过，一个 npm 的包里的 package.json 具备的必要的字段都有哪些(名称、版本号，依赖)

2)github常用不常用，关注过哪些项目

3)会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别什么时候用。如何优化图像、图像格式的区别

4)说一下你常用的命令行工具

5)会不会用git，说上来几个命令，说一下git和svn的区别，有没有用git解决过冲突

SVN的特点是简单，只是需要一个放代码的地方时用是OK的。

Git的特点版本控制可以不依赖网络做任何事情，对分支和合并有更好的支持(当然这是开发者最关心的地方)

「 计算机网络基础 」

 

1)说一下HTTP 协议头字段说上来几个，是否尽可能详细的掌握HTTP协议。一次完整的HTTP事务是怎样的一个过程?

1、 Accept：告诉WEB服务器自己接受什么介质类型，*/* 表示任何类型，type/* 表示该类型下的所有子类型，type/sub-type。

2、 Accept-Charset： 浏览器申明自己接收的字符集 
Accept-Encoding： 浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate） 
Accept-Language：浏览器申明自己接收的语言 
语言跟字符集的区别：中文是语言，中文有多种字符集，比如big5，gb2312，gbk等等。

3、 Accept-Ranges：WEB服务器表明自己是否接受获取其某个实体的一部分（比如文件的一部分）的请求。bytes：表示接受，none：表示不接受。

4、 Age：当代理服务器用自己缓存的实体去响应请求时，用该头部表明该实体从产生到现在经过多长时间了。

5、 Authorization：当客户端接收到来自WEB服务器的 WWW-Authenticate 响应时，用该头部来回应自己的身份验证信息给WEB服务器。

6、 Cache-Control：请求：no-cache（不要缓存的实体，要求现在从WEB服务器去取） 
max-age：（只接受 Age 值小于 max-age 值，并且没有过期的对象） 
max-stale：（可以接受过去的对象，但是过期时间必须小于 max-stale 值） 
min-fresh：（接受其新鲜生命期大于其当前 Age 跟 min-fresh 值之和的缓存对象） 
响应：public(可以用 Cached 内容回应任何用户) 
private（只能用缓存内容回应先前请求该内容的那个用户） 
no-cache（可以缓存，但是只有在跟WEB服务器验证了其有效后，才能返回给客户端） 
max-age：（本响应包含的对象的过期时间） 
ALL: no-store（不允许缓存）

7、 Connection：请求：close（告诉WEB服务器或者代理服务器，在完成本次请求的响应后，断开连接，不要等待本次连接的后续请求了）。 
keepalive（告诉WEB服务器或者代理服务器，在完成本次请求的响应后，保持连接，等待本次连接的后续请求）。 
响应：close（连接已经关闭）。 
keepalive（连接保持着，在等待本次连接的后续请求）。 
Keep-Alive：如果浏览器请求保持连接，则该头部表明希望 WEB 服务器保持连接多长时间（秒）。例如：Keep-Alive：300

8、 Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip

9、Content-Language：WEB 服务器告诉浏览器自己响应的对象的语言。

10、Content-Length： WEB 服务器告诉浏览器自己响应的对象的长度。例如：Content-Length: 26012

11、Content-Range： WEB 服务器表明该响应包含的部分对象为整个对象的哪个部分。例如：Content-Range: bytes 21010-47021/47022

12、Content-Type： WEB 服务器告诉浏览器自己响应的对象的类型。例如：Content-Type：application/xml

13、ETag：就是一个对象（比如URL）的标志值，就一个对象而言，比如一个 html 文件，如果被修改了，其 Etag 也会别修改，所以ETag 的作用跟 Last-Modified 的作用差不多，主要供 WEB 服务器判断一个对象是否改变了。比如前一次请求某个 html 文件时，获得了其 ETag，当这次又请求这个文件时，浏览器就会把先前获得的 ETag 值发送给WEB 服务器，然后 WEB 服务器会把这个 ETag 跟该文件的当前 ETag 进行对比，然后就知道这个文件有没有改变了。

14、 Expired：WEB服务器表明该实体将在什么时候过期，对于过期了的对象，只有在跟WEB服务器验证了其有效性后，才能用来响应客户请求。是 HTTP/1.0 的头部。例如：Expires：Sat, 23 May 2009 10:02:12 GMT

15、 Host：客户端指定自己想访问的WEB服务器的域名/IP 地址和端口号。例如：Host：rss.sina.com.cn

16、 If-Match：如果对象的 ETag 没有改变，其实也就意味著对象没有改变，才执行请求的动作。

17、 If-None-Match：如果对象的 ETag 改变了，其实也就意味著对象也改变了，才执行请求的动作。

18、 If-Modified-Since：如果请求的对象在该头部指定的时间之后修改了，才执行请求的动作（比如返回对象），否则返回代码304，告诉浏览器该对象没有修改。例如：If-Modified-Since：Thu, 10 Apr 2008 09:14:42 GMT

19、 If-Unmodified-Since：如果请求的对象在该头部指定的时间之后没修改过，才执行请求的动作（比如返回对象）。

20、 If-Range：浏览器告诉 WEB 服务器，如果我请求的对象没有改变，就把我缺少的部分给我，如果对象改变了，就把整个对象给我。浏览器通过发送请求对象的 ETag 或者 自己所知道的最后修改时间给 WEB 服务器，让其判断对象是否改变了。总是跟 Range 头部一起使用。

21、 Last-Modified：WEB 服务器认为对象的最后修改时间，比如文件的最后修改时间，动态页面的最后产生时间等等。例如：Last-Modified：Tue, 06 May 2008 02:42:43 GMT

22、 Location：WEB 服务器告诉浏览器，试图访问的对象已经被移到别的位置了，到该头部指定的位置去取。例如：Location：http://i0.sinaimg.cn/dy/deco/2008/0528/sinahome_0803_ws_005_text_0.gif

23、 Pramga：主要使用 Pramga: no-cache，相当于 Cache-Control： no-cache。例如：Pragma：no-cache

24、 Proxy-Authenticate： 代理服务器响应浏览器，要求其提供代理身份验证信息。Proxy-Authorization：浏览器响应代理服务器的身份验证请求，提供自己的身份信息。

25、 Range：浏览器（比如 Flashget 多线程下载时）告诉 WEB 服务器自己想取对象的哪部分。例如：Range: bytes=1173546-

26、 Referer：浏览器向 WEB 服务器表明自己是从哪个 网页/URL 获得/点击 当前请求中的网址/URL。例如：Referer：http://www.sina.com/

27、 Server: WEB 服务器表明自己是什么软件及版本等信息。例如：Server：Apache/2.0.61 (Unix)

28、 User-Agent: 浏览器表明自己的身份（是哪种浏览器）。例如：User-Agent：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.14) Gecko/20080404 Firefox/2、0、0、14

29、 Transfer-Encoding: WEB 服务器表明自己对本响应消息体（不是消息体里面的对象）作了怎样的编码，比如是否分块（chunked）。例如：Transfer-Encoding: chunked

30、 Vary: WEB服务器用该头部的内容告诉 Cache 服务器，在什么条件下才能用本响应所返回的对象响应后续的请求。假如源WEB服务器在接到第一个请求消息时，其响应消息的头部为：Content-Encoding: gzip; Vary: Content-Encoding那么 Cache 服务器会分析后续请求消息的头部，检查其 Accept-Encoding，是否跟先前响应的 Vary 头部值一致，即是否使用相同的内容编码方法，这样就可以防止 Cache 服务器用自己 Cache 里面压缩后的实体响应给不具备解压能力的浏览器。例如：Vary：Accept-Encoding

31、 Via： 列出从客户端到 OCS 或者相反方向的响应经过了哪些代理服务器，他们用什么协议（和版本）发送的请求。当客户端请求到达第一个代理服务器时，该服务器会在自己发出的请求里面添加 Via 头部，并填上自己的相关信息，当下一个代理服务器收到第一个代理服务器的请求时，会在自己发出的请求里面复制前一个代理服务器的请求的Via 头部，并把自己的相关信息加到后面，以此类推，当 OCS 收到最后一个代理服务器的请求时，检查 Via 头部，就知道该请求所经过的路由。例如：Via：1.0 236.D0707195.sina.com.cn:80 (squid/2.6.STABLE13)

 

2)cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制

想象一下你去某个涉密工厂参观，每个门都需要刷卡才能进。

你进大门之前，保安会把你的身份信息登记到他们的门禁系统里（服务器），比如姓名ABC，记到他们的访客状态（SESSION）。之后给你发一张 参观卡（cookie）。

你走到这个公司的每个厂房，都要刷卡才能开门。你一刷卡，门禁上就提示：欢迎参观，ABC。

当你参观完成，离开工厂前，保安说，这个门禁卡送给你留作纪念啦，但是明天这卡就刷不进来了（cookie还在你手里），之后转身在他们系统上记录访客状态ABC：参观结束（SESSION 过期）。

现在再回答你的问题：
1、cookie到底是存在浏览器还是服务器？
答：你的浏览器上，对应服务器上存的叫SESSION。浏览器就相当于故事中的你，门禁卡就相当于cookie，工厂相当于服务器网站，SESSION相当于工厂的访客记录

2、获取cookie时是从浏览器还是服务器获取cookie？
答：cookie是在必要时（比如你要访问工厂，而工厂也要确认你的身份和权限），由服务器发送给浏览器的。

3、获取到cookie数据时 还要发送回服务器？
答：向这个服务器每次发起请求，都会带上cookie，相当于进入每个厂房之前都会刷卡，每次都会确认你的身份。

请描述一下cookies，sessionStorage和localStorage的区别

1.存储大小

• cookie数据大小不能超过4k。
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

• localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage  数据在当前浏览器窗口关闭后自动删除。
• cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

3)从敲入 URL 到渲染完成的整个过程，包括 DOM 构建的过程，说的约详细越好。

整个过程大致如下：
1. 输入URL，浏览器根据域名寻找IP地址
2. 浏览器发送一个HTTP请求给服务器，如果服务器返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
3. 服务器接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
4. 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理
5. 浏览器开始显示HTML 
6. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件——包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

那么，一个页面，究竟是如何从我们输入一个网址到最后完整的呈现在我们面前的呢？还需要了解一下浏览器是如何渲染的：
浏览器渲染引擎在获取到内容后的基本流程：
1. 解析HTML
2. 构建DOM树
3. DOM树与CSS样式进行附着构造呈现树
4. 布局
5. 绘制
上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
 

4)是否了解Web注入攻击，说下原理，最常见的两种攻击(XSS 和 CSRF)了解到什么程度。

常见的Web攻击分为两类：一是利用Web服务器的漏洞进行攻击，如CGI缓冲区溢出，目录遍历漏洞利用等攻击;二是利用网页自身的安全漏洞进行攻击，如SQL注入，跨站脚本攻击等。常见的针对Web应用的攻击有：缓冲区溢出攻击者利用超出缓冲区大小的请求和构造的二进制代码让服务器执行溢出堆栈中的恶意指令Cookie假冒精心修改cookie数据进行用户假冒认证逃避攻击者利用不安全的证书和身份管理非法输入在动态网页的输入中使用各种非法数据，获取服务器敏感数据强制访问访问未授权的网页隐藏变量篡改对网页中的隐藏变量进行修改，欺骗服务器程序拒绝服务攻击构造大量的非法请求，使Web服务器不能相应正常用户的访问跨站脚本攻击提交非法脚本，其他用户浏览时盗取用户帐号等信息SQL注入构造SQL代码让服务器执行，获取敏感数据

 

第一种 代码注入

攻击者通过网站类型注入相应的代码，这个代码以当前网站用户的权限执行系统命令，在高级事件中，攻击者可能溢出来提权导致真个 web服务器的沦丧.

第二种 CRLF注入

攻击者注入一个特殊的CRLF字符，这个字符被用来区分http回复头和正文，导致可以写任意正文内容，这种攻击一般和xss结合使用。

第三种 XSS

攻击者注入任意脚本（一般是javascript）到合法网站或者web程序中，这个脚本执行在客户端

第四种 Email头注入

这种攻击和CRLF攻击很相似，攻击者发送恶意的IMAP/SMTP 命令

第五种 Host头注入

攻击者乱用HTTP Host头的绝对信任来篡改密码重设功能和web缓存

第六种 LDAP 注入

攻击者注入LDAP语句来执行任意 LDAP命令，获得修改LDAP树的内容的权利

第七种 OS命令注入

攻击者用当前web应用程序的权限来注入系统命令，在高级案例中，攻击者通过溢出获得权限提升导致系统沦丧

第八种 SQL 注入

攻击者注入sql语句来读取和修改数据 库数据，在高级sql注入案例中，攻击者能执行sql语句写服务器上的任意文件和甚至执行系统命令，这会导致系统沦丧

第九种 XPath 注入

攻击者注入数据到应用程序中来执行精心准备的XPath查询，以此来获得无授权访问和bypass授权
 

5)是否了解公钥加密和私钥加密。如何确保表单提交里的密码字段不被泄露。验证码是干嘛的，是为了解决什么安全问题。

私钥和公钥是一对，谁都可以加解密，只是谁加密谁解密是看情景来用的：
第一种情景是签名,使用私钥加密,公钥解密,用于让所有公钥所有者验证私钥所有者的身份并且用来防止私钥所有者发布的内容被篡改.但是不用来保证内容不被他人获得。
第二种情景是加密,用公钥加密,私钥解密,用于向公钥所有者发布信息,这个信息可能被他人篡改,但是无法被他人获得。
 

6)编码常识：文件编码、URL 编码、Unicode编码 什么含义。一个gbk编码的页面如何正确引用

简单来说，文本文件是基于字符编码的文件，每个字符对应一个固定的编码，顺序流式存取，在任何操作系统下的解释和编码结果都是一致的，文本文件除了所包含的字符以外没有任何其他信息。
常用文本编码类型有：

• ASCII
• GB2312
• Unicode
• UTF-8
• UTF-16

URL编码

   foo://example.com:8042/over/there?name=ferret#nose  
   \_/  \______________/ \________/\_________/ \__/ 
     |                 |                        |                    |             | 
scheme     authority               path             query      fragment

URI是统一资源标识的意思，通常我们所说的Url只是URI的一种。典型Url的格式如上面所示。下面提到的Url编码，实际上应该指的是URI编码。

「 前端框架 」

1) 对 MVC、MVVM的理解

2) vue、angularjs等 相对于 jQuery在开发上有什么优点?

3)前后分离的思想了解吗?

4)你上一个项目都用到了那些方法优化js的性能?

5)angular的生命周期?

6)说一下你对vue和vuex的使用方法，vue的组件复用机制