前端各类面试题大全带详细答案

一、  列举几种后端通信的方法，分别使用的场景。

跨域请求存在的缘由：因为浏览器的同源策略，即属于不一样域的页面之间不能相互访问各自的页面内容。

跨域的场景：    

1.域名不一样 www.yangwei.com 和www.wuyu.com 即为不一样的域名）

2.二级域名相同，子域名不一样（www.wuhan.yangwei.com www.shenzheng.yangwei.com 为子域不一样）

3.端口不一样，协议不一样  （ http://www.yangwei.com 和https://www.yangwei.com属于跨域www.yangwei.con:8888和www.yangwei.con:8080)

跨域的方式：（内容较多，需掌握CORS和jsonp，其余内容也要了解）

1.前端的方式: possMessage，window.name,document.domain,image.src(得不到数据返回)，jsonP(script.src后台不配合得不到数据返回)，style.href（得不到数据返回)

一.imge.src,script.src,style.href 不受同源策略的影响能够加载其余域的资源，能够用这个特性，向服务器发送数据。最经常使用的就是使用image.src 向服务器发送前端的错误信息。image.src 和style.href 是没法获取服务器的数据返回的，script.src 服务器端配合能够获得数据返回。

二possMessage,window.name,document.domain 是两个窗口直接相互传递数据。

（1）possMessage 是HTML5中新增的，使用限制是 必须得到窗口的window 引用。IE8+支持，firefox，chrome,safair,opera支持

       （2）window.name ，在一个页面中打开另外一个页面时，window.name 是共享的，因此能够经过window.name 来传递数据，window.name的限制大小是2M，这个全部浏览器都支持,且没有什么限制。

3） document.domain 将两个页面的document.domain 设置成相同，document.domain 只能设置成父级域名，既能够访问，使用限制：这顶级域名必须相同

2.纯后端方式: CORS，服务器代理

CORS 是w3c标准的方式，经过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域能够访问本域的数据，ie8&9(XDomainRequest),10+,chrom4 ，firefox3.5,safair4，opera12支持这种方式。

服务器代理，同源策略只存在浏览器端，经过服务器转发请求能够达到跨域请求的目的，劣势：增长服务器的负担，且访问速度慢。

3.先后端结合:JsonP

script.src 不受同源策略的限制，因此能够动态的建立script标签，将要请求数据的域写在src 中参数中附带回调的方法，服务器端返回回调函数的字符串，并带参数。

如 script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback,服务器端返回 getInfoCallBack("name:yangwei;age:18") 这段代码会直接执行，在前面定义好getInfoCallBack函数，既能够得到数据并解析。 这种是最长见的方式。

4.webSocke（了解性拓展）

服务端推送websocket和sse场景及应用

应用场景

均可以进行服务端推送,而且都是使用长链接来进行.但二者的实现又有一点不一样,sse仍使用http协议,而且使用相同的连接发送正常的http协议报文.而websocket是使用http协议进行握手,而后再使用同一个连接进行websocket协议的通讯.

websocket能够进行双向的通讯,即服务端能够往客户端发信息,客户端也能够向服务端发信息.而sse是单向的,只能由服务端往客户端发.

websocket自带链接的保持,即经过ping/pong协议保证链接能够始终维持,sse没有这个保证,不过能够参考ping/pong协议,本身周期性地发送信息来一样地进行处理.好比,5秒往客户端发一个特别的信息(经过type/name进行区分).其次,由于是基于浏览器的使用,sse有一个特性,就是浏览器发现一个链接断掉了,就会自动地进行重联,即从新发送请求.这样,服务端也不用担忧链接被断开,不过须要处理新的请求必须和上一次请求的内容相连续,以及新的推送注册.

由于都是使用http协议进行起始处理,所以在签权上均可以使用到http协议自己的一些东西,好比header/cookie签权.在相应的握手阶段,经过读取cookie(session)来保证相应的请求必须是通过受权的,也能够用于定位使用人.甚至能够经过这些信息保证单个用户只能有一个请求,避免重复请求

因为都是基于浏览器使用,所以建议的数据传输都是文本型.虽然websocket支持二进制frame传输,不过一些都不建议使用.sse只能传输文本

无论是websocket仍是sse,在用于通讯时,都建议只用于进行数据的推送,而不是进行完整的应用处理.这里能够理解为,常规的业务处理仍然交给后端的服务来处理.这样,便可以使用以前的业务开发的优点,又可使用推送的优点.而不是走向另外一个级端,即全部的信息都想经过推送来传递.

开发方式

websocket开发首选netty,由于netty对协议的封装已经作到了彻底的支持.经过 HttpServerCodec做为握手协议,WebSocketServerProtocolHandler做为协议处理,而后再加一个本身的handler,就完成了相应的业务处理.同时在性能上,netty在一个ws的请求创建起来以后,会自动地去除httpServerCodec相关的handler,这样保证后续的处理都是按照ws的协议来进行.

sse开发首选jersey,jersey-media-sse提供了相应的sse支持,而且经过与rest相集成,开发一个sse就跟普通的业务开发相同.

ws和sse在文本支持上都只支持utf-8编码,所以在处理上须要注册编码方式.同时在使用sse时,若是后端第一次进行响应时,相应的编码不对.chrome会直接报错,包括utf8都会报错(这是以前后端开发的一个问题),能够修正或者增长相应的拦截器,保证后端content-type响应中的charset=UTF-8.

ws和sse均可以经过nginx进行代理转发.ws的处理只须要设置http版本,以及从新转发前端的Upgrade和Connection头便可.而sse,也能够经过禁用buffer来处理.参考 http://stackoverflow.com/questions/27898622/server-sent-events-stopped-work-after-enabling-ssl-on-proxy

特定实现

为保证在开发时推送类的和业务类的系统不会耦合在一块儿,或者同一个应用内有两种处理模式的功能存在.建议直接在系统层就开发2个不一样的系统,一个专门用于推送,另外一个用于相应的业务处理.而后业务处理后的数据,须要再交由推送处理,则能够在后端进行经过消息系统进行中转,如kafka(持久保证)或redis(内存订阅)等

由于两者在ie上的支持都颇有限,所以不建议在ie上进行尝试

使用sse仍是websocket,取决因而否须要前台交互,还取决于对后端的支持技术的了解程序.好比,了解jersey多一点,仍是netty多一点.因为最近netty进行微服务化底层通讯支持愈来愈流行,我的更倾向于使用websocket.但若是仅仅是一个简单的推送功能,又不但愿修改代码,那也可使用jersey(毕竟以前的系统就是在上面进行开发的)

须要后端有的时候须要进行定向发送或者是群发,这种需求ws和sse的实现中都有相应的处理.如ChannelGroup和SseBroadcaster,这样在后端获取到一个消息,须要进行路由时就能够从这里面拿相应的channel信息.不过,前提是对各个channel上进行了特定的消息绑定,这样就好区分具体的路由信息.具体路由策略能够在创建时绑定session,后续经过session来路由.

二、  设计一个幻灯应用，须要列举选择的基础框架、项目的基础框 架和代码管理、幻灯数据的存储和读取，部分特效的实现，能够只写思路，后续面聊。

本题并无找到好的答案解析，本身也没有好的思路，有比较好想法的同窗能够分享一下。

三、  请写出至少20个HTML5标签

<article><aside><audio><canvas><datalist><command> <details><embed>

<figcaption><figure><footer><header><hgroup><keygen><mark><nav>

<section><time><video><summary>

四、  列举5种IE  hastlayout的属性及其值

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么本身对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不一样的概念，渲染引擎采用 了 hasLayout 的属性，属性值能够为true或false。当一个元素的 hasLayout 属性值为true时，咱们说这个元素有一个布局（layout）

部分的 IE 显示的错误，均可以经过激发元素的 haslayout 属性来修正。能够经过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。以下所示，经过设置如下 css 属性便可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不彻底列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

五、  简述jpg。Gif。png-8.png-24的区别，分别使用场景

gif、jpg、png格式的图片在网站制做中的区别

Gif格式特色:
　　1.透明性,Gif是一种布尔透明类型，既它能够是全透明，也能够是全不透明，可是它并无半透明（alpha透明）。
　　2.动画,Gif这种格式支持动画。
　　3.无损耗性,Gif是一种无损耗的图像格式，这也意味着你能够对gif图片作任何操做也不会使得图像质量产生损耗。
　　4.水平扫描,Gif是使用了一种叫做LZW的算法进行压缩的，当压缩gif的过程当中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小
　　5.间隔渐进显示,Gif支持可选择性的间隔渐进显示
　　由以上特色看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（好比说图标，图表等），它并非最优的选择，咱们会在后面中看到png是最优的选择。
Jpeg格式特色:
　　1.透明性,它并不支持透明。
　　2.动画,它也不支持动画。
　　3.损耗性,除了一些好比说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据以外，全部其它操做对jpeg图像的处理都会使得它的质量损失。因此咱们在编辑过程通常用png做为过渡格式。
　　4.隔行渐进显示,它支持隔行渐进显示（可是ie浏览器并不支持这个属性，可是ie会在整个图像信息彻底到达的时候显示）。
　　由上能够看出Jpeg是最适web上面的摄影图片和数字照相机中。
　　Png格式特色:
　　1.类型,Png这种图片格式包括了许多子类，可是在实践中大体能够分为256色的png和全色的png，你完成能够用256色的png代替gif，用全色的png代替jpeg
　　2.透明性,Png是彻底支持alpha透明的（透明，半透明，不透明），尽管有两个怪异的现象在ie6（下面详细讨论）
　　3.动画,它不支持动画
　　PNG图片格式如今包含三种类型：
　　1.PNG8256色PNG的别名
　　2.PNG24全色PNG的别名
　　3.PNG32全色PNG的别名
　　基本上PNG32就是PNG24，可是附带了全alpha通道。就是说每一个像素上不只存储了24位真色彩信息还存储了8位的alpha通道信息，就如同GIF能存储透明和不透明信息同样。当咱们把图片放到不太搭配的背景上的时候，透明PNG图片的边缘会显示得更加平滑。
　　固然，我也知道你的想法，“可是Photoshop也能生成带透明通道的PNG图片！”我也知道，它只是表面上这么说是PNG24，让我也产生困惑了。
　　做为一个伤感的Fireworks倡导者，我只使用PNG32支持附带alpha通道的真色彩图片。无论怎样，若是你习惯使用Photoshop，你就应该知道，Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。
　　我敢确定你常常会勾选“支持透明”选项，以得到带有透明度的PNG图片，可是这样你就获取了一张PNG32图片。——Photoshop只是以为把PNG32这个名称给隐藏掉了。奇怪吧？……
　　对png8的误解
　　Png8的在ie中的怪异表现：
　　半透明的png8在ie6如下的浏览器显示为全透明。
　　Alpha透明的全色PNG（png32）在ie6中会出现背景颜色（一般是灰色）。
　　由上面能够总结：
　　（a）全透明的png8能够在任一浏览器正常显示（就像gif同样）。半透明的png8在除了ie6及其如下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不须要特殊对待，由于在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的增强版。
　　（b）第二个bug没有什么好的方法解决，只能经过影响性能的方法AlphaImageLoader与须要加特殊标签（VML）。
　　所以得出结论就是：请使用PNG8。
　　Png8的软件问题：
　　Photoshop只能导出布尔透明的PNG8。

1. 　　Fireworks既能导出布尔透明的PNG8，也能导出alpha透明的PNG8.