HTML5面试题

HTML5面试题

一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式?

声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，
混杂模式是一种向后兼容的解析方法。
触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明

二、语义化的理解？

1.html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
2.在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

<article>  <aside>  <audio>  <canvas>  <datalist>  <command>  <details> <embed>  <figcaption>  <figure>  <footer>  <header>  <hgroup>  <keygen>  <mark>  <nav>  <section>  <time>  <video>  <summary>  <meter>  <output>  <progress>  <source>

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

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图片更加小。例如50010的图片比10500的图片更加小
　　5.间隔渐进显示,Gif支持可选择性的间隔渐进显示
　　由以上特点看出只有256种颜色的gif图片不适合照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

Jpeg（jpg）格式特点:

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。
　　Fireworks既能导出布尔透明的PNG8，也能导出alpha透明的PNG8.

六、 能够设置文本加粗的样式属性是什么

字体加粗（font一weight） 　　
功能：用于设置字体笔划的粗细。 　　
属性值：正常度 一 normal 　　
相对度 一 bold, bolder, light, lighter 　　
渐变度 一 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100－900。 　　
语法为：h1 {font一weight: 属性值}

七、 Html和xhtml有什么区别?

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。

最主要的不同:

XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

八、 算法题：有一个长度为n一1的数组，包含1一n中不重复的乱序的数，求寻找范围内不在数组中的数，考虑空间占用，性能优化，溢出等情况，至少写两个算法

当n不太大时，可以考虑求和。先算出1~n的所有数的和，然后减去数组中出现的所有自然数的和。时间复杂度为O(n)，空间复杂度O(1)。这种方法的缺点是n不能太大，n比较大时，求和容易溢出。
用位图。从头到尾的扫描整个数组，把出现的数相应的位设置为1.然后再扫描位图，找出不为1的那一位，即为要找的数。这种方法的时间复杂度为O(n),空间复杂度为O(n)。
异或有个很巧妙的地方：同一变量和该变量与另一变量的异或值的异或等于这个变量自身。所以我们可以把1~n的所有数异或，再把数组中出现的所有数异或，然后再把这两个异或的结果异或，最后得到的值即为我们要找的值。这样时间复杂度为O(n),空间复杂度为O（1）。在空间上比第二种方法要好，而且不会出现第一种方法中所说的溢出问题。

九

十、

十一、 请使用javascript写出数组快速排序代码

<script>function quiktSort(arr){var  left =[],right=[];if(arr.length<1){return  arr;}var  index = Math.floor(arr.length/2);var  point = arr.splice(index,1);for(var i=0,len=arr.length;i<len;i++){if(arr[i]<point){left.push(arr[i]);}else{right.push(arr[i]);}}return quickSort(left).concat(point,quickSort(right));}</script>

十二

十三、 谈谈对html5的了解

1.良好的移动性，以移动设备为主。
2.响应式设计，以适应自动变化的屏幕尺寸
3.支持离线缓存技术，webStorage本地缓存
4.新增canvas，video，audio等新标签元素。新增特殊内容元素：article，footer，header，nav，section等，新增表单控件：calendar，date，time，email，url，search。
5.地理定位…
6.新增webSocket/webWork技术

十四、 Js面向对象的几种方式

1.对象的字面量 var obj = {}
2.创建实例对象 var obj = new Object();
3.构造函数模式 function fn(){} , new fn();
4.工厂模式：用一个函数，通过传递参数返回对象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);
5.原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();
首先，每个函数都有一个prototype(原型)属性，这个指针指向的就是clock.prototype对象。而这个原型对象在默认的时候有一个属性constructor，指向clock，这个属性可读可写。而当我们在实例化一个对象的时候，实例newClock除了具有构造函数定义的属性和方法外（注意，只是构造函数中的）,还有一个指向构造函数的原型的指针，ECMAScript管他叫[[prototype]]，这样实例化对象的时候，原型对象的方法并没有在某个具体的实例中，因为原型没有被实例。

十五、 在css中哪个属性会影响dom读取文档流的顺序

1.direction, writing一mode

十六、 前端页面由哪三层构成，分别是什么，作用是什么

Html (结构) : 超文本标记语言, 由 HTML 或 xhtml之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
Css (表现) : 层叠样式表 , 由css负责创建。css对“如何显示有关内容”的问题做出了回答。
Js (行为) : 客户端脚本语言 , 内容应该如何对事件做出反应

十七、 Css的基本语句构成是？

语法:
（自定义的样式名称）｛
样式内容（属性：属性值；）
｝

十八、 如何对网站的文件和资源进行优化

1．文件合并（目的是减少http请求）
2．文件压缩 （目的是直接减少文件下载的体积）
3．使用cdn托管资源
4．使用缓存
5．gizp压缩需要的js和css文件
6．meta标签优化（title,description,keywords）,heading标签的优化,alt优化
7．反向链接，网站外链接优化

十九、 Javascipt的本地对象，内置对象和宿主对象

本地对象：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError, 简单来说，本地对象就是 ECMA一262 定义的类.

内置对象：

ECMA一262 把内置对象（built一in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。
同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA一262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）。
如此就可以理解了。内置对象是本地对象的一种。而其包含的两种对象中，Math对象我们经常用到，可这个Global对象是啥东西呢？
Global对象是ECMAScript中最特别的对象，因为实际上它根本不存在，有点玩人的意思。大家要清楚，在ECMAScript中，不存在独立的函数，所有函数都必须是某个对象的方法。
类似于isNaN()、parseInt()和parseFloat()方法等，看起来都是函数，而实际上，它们都是Global对象的方法。而且Global对象的方法还不止这些.

宿主对象:

ECMAScript中的“宿主”就是我们网页的运行环境，即“操作系统”和“浏览器”。所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有的BOM和DOM对象都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。自定义的对象也是宿主对象。

二十、 输入url后的加载过程

1. 查找域名对应IP地址
2. 建立连接(TCP的三次握手)
3. 构建网页
4. 断开连接(TCP的四次挥手)

二十一、 说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
断开一个TCP连接则需要“四次挥手”：
第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

二十二、 JQuery中有几种类型的选择器

1.层叠选择器$(“form input”)
2.基本过滤选择器 :first :last :not()
3.内容过滤选择器:odd:eq():animated
4.可视化过滤选择器 :hidden :visible
5.属性过滤选择器：div[id]
6.子元素过滤选择器:first一child :last一child :only :child
7.表单元素过滤选择器 :enabled :disabled :checked :selected
8.id,类，类型,元素…

二十三、 jQuery中的Delegate()函数有什么作用

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。$(“div”).delegate(“button”,“click”,function(){
$(“p”).slideToggle();});

二十四、 行内元素有那些。块级元素有那些。空元素有哪些

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span select strong（强调的语气）img input（内联元素）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：<br> <hr> <img> <input> <link> <meta> 鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

二十五、 说几条javasprit的基本规范

1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for一in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。

二十六、 介绍一下标准的css盒模型，低版本ie盒模型有什么不同

（1）盒模型有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的width部分把 border 和 padding计算了进去;

二十七、 说出三种减少页面加载的方法（加载时间指感知的时间或实际加载的时间）

CSS Sprites；
JS、CSS源码压缩、图片大小控制合适；
网页Gzip；
CDN托管；
data缓存 ；
图片服务器；

二十八、

二十九、 Html5中datalist是什么

<datalist> 标签定义选项列表，与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

<input id="myCar" list="cars" /><datalist id="cars">  <option value="BMW">  <option value="Ford">  <option value="Volvo"></datalist>

三十、 Ajax同步和异步的区别，如何解决跨域问题

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

三十一、 列举几种后端通讯的方法及其使用的场景，关于跨域的理解。

1.后端程序可以通过session来进行通讯，session有过期时间，主要用于验证码的验证，登录过期等的应用。
2.数据库，数据库支持多种语言的操作，那么通过数据库就可以通讯。
关于跨域：
跨域请求存在的原因：由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容。
跨域的场景：
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（得不到数据返回)
一.image.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.webSocket（了解性拓展）
服务端推送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来路由.

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

本题无标准答案，同学们可以自己研究考虑一下，

三十三、 Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
区别：
1、 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2、 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3、 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4、 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

三十四、 说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

三十五、 什么是ajax和json，它们的优缺点

ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。实现无刷新状态更新页面和异步提交
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
Ajax实现过程：
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
优点：
不需要插件支持
用户体验极佳
提升Web程序性能
减轻服务器和宽带的负担
缺点：
前进后退按钮被破坏
搜索引擎的支持不够
开发调试工具缺乏
JSON（JavaScript Object Notation）和XML一样也是一种简单文本格式。是一种比较流行的标准格式，是数据的载体，相对于XML，JSON更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。
优点：
作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。
JSON不需要从服务器端发送含有特定内容类型的首部信息。
缺点：
语法过于严谨
代码不易读
eval 函数存在风险

三十六、 Html5有那些新增的表单元素

表单控：color，calendar，date，datetime，datetime一local，time，mouth，week，email，url，search，range，tel
新的表单元素：datalist，keygen，output

三十七、 h1ttp状态码有那些，分别代表什么意思

简单版:
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
完整版
1**(信息类)：表示接收到请求并且继续处理
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
2**(响应成功)：表示动作被成功接收、理解和接受
200——表明该请求被成功地完成，所请求的资源发送回客户端
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
3**(重定向类)：为了完成指定的动作，必须接受进一步处理
300——请求的资源可在多处得到
301——本网页被永久性转移到另一个URL
302——请求的网页被转移到一个新的地址，但客户访问仍继续通过原始URL地址，重定向，新的URL会在response中的Location中返回，浏览器将会使用新的URL发出新的Request。
303——建议客户访问其他URL或访问方式
304——自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容，代表上次的文档已经被缓存了，还可以继续使用
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
4**(客户端错误类)：请求包含错误语法或不能正确执行
400——客户端请求有语法错误，不能被服务器所理解
401——请求未经授权，这个状态代码必须和WWW一Authenticate报头域一起使用
HTTP 401.1 一 未授权：登录失败
　　HTTP 401.2 一 未授权：服务器配置问题导致登录失败
　　HTTP 401.3 一 ACL 禁止访问资源
　　HTTP 401.4 一 未授权：授权被筛选器拒绝
HTTP 401.5 一 未授权：ISAPI 或 CGI 授权失败
402——保留有效ChargeTo头响应
403——禁止访问，服务器收到请求，但是拒绝提供服务
HTTP 403.1 禁止访问：禁止可执行访问
　　HTTP 403.2 一 禁止访问：禁止读访问
　　HTTP 403.3 一 禁止访问：禁止写访问
　　HTTP 403.4 一 禁止访问：要求 SSL
　　HTTP 403.5 一 禁止访问：要求 SSL 128
　　HTTP 403.6 一 禁止访问：IP 地址被拒绝
　　HTTP 403.7 一 禁止访问：要求客户证书
　　HTTP 403.8 一 禁止访问：禁止站点访问
　　HTTP 403.9 一 禁止访问：连接的用户过多
　　HTTP 403.10 一 禁止访问：配置无效
　　HTTP 403.11 一 禁止访问：密码更改
　　HTTP 403.12 一 禁止访问：映射器拒绝访问
　　HTTP 403.13 一 禁止访问：客户证书已被吊销
　　HTTP 403.15 一 禁止访问：客户访问许可过多
　　HTTP 403.16 一 禁止访问：客户证书不可信或者无效
HTTP 403.17 一 禁止访问：客户证书已经到期或者尚未生效
404——一个404错误表明可连接服务器，但服务器无法取得所请求的网页，请求资源不存在。eg：输入了错误的URL
405——用户在Request一Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content一Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If一Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求长。
5**(服务端错误类)：服务器不能正确执行一个正确的请求
HTTP 500 一 服务器遇到错误，无法完成请求
　　HTTP 500.100 一 内部服务器错误 一 ASP 错误
　　HTTP 500一11 服务器关闭
　　HTTP 500一12 应用程序重新启动
　　HTTP 500一13 一 服务器太忙
　　HTTP 500一14 一 应用程序无效
　　HTTP 500一15 一 不允许请求 global.asa
　　Error 501 一 未实现
HTTP 502 一 网关错误
HTTP 503：由于超载或停机维护，服务器目前无法使用，一段时间后可能恢复正常