分享一次前端面试题及其详细答案剖析

分享一次前端面试题及其详细答案剖析

答 : 1、语义化标签,比如<header></header>、<section></section>、<footer></footer>等等;

    2、增强型表单,input输入类型增强,提供了更好的输入控制和验证,比如number(只能输入数字)、email(包含 e-mail 地址的输入域及简单验证)、range(一定范围内数字值的输入域)、month(选择一个月份)等等;新增表单元素,<datalist>、<keygen>、<output>;新增表单属性:placehoder (输入框提示)、required (值为boolean,用于非空验证)、pattern(设置正则表达式用于验证输入值)等等。

   3、音频和视频,音频: <audio> 标签,视频:<video>标签。

   4、Canvas绘图,使用标签<canvas>,通过 JavaScript 来绘制 2D 图形。是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象,且canvas不能实现DOM操作。

   5、SVG绘图,SVG是指可伸缩的矢量图形,使用 XML 描述 2D 图形的语言,放大不失真,DOM 中的每个元素都是可操作的,每个被绘制的图形均被视为对象,如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

   6、地理定位,Geolocation(地理定位)用于定位用户的位置。

   7、拖放API,即抓取对象以后拖到另一个位置,拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置的目标位置。

源对象的触发事件:dragstart:拖动开始、drag:拖动中、dragend:拖动结束。整个拖动过程的组成: dragstart*1 + drag*n + dragend*1;

目标对象触发的事件:dragenter:拖动着进入、dragover:拖动着悬停、dragleave:拖动着离开、drop:释放。

整个拖动过程的组成1: dragenter*1 + dragover*n + dragleave*1;

 

整个拖动过程的组成2: dragenter*1 + dragover*n + drop*1。

   8、Web Worker,web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行,详情请见W3C。

   9、Web Storage,使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。分为:

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后,数据会被删除。 

     10、WebSocket,WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

 如何处理新标签的浏览器兼容问题:HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器。IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签。或者使用html5shim框架,在浏览器头部引用就可以,

 

分享一次前端面试题及其详细答案剖析

(1)创建新节点3种: createDocumentFragment()    (创建一个DOM片段)、 createElement()(创建一个元素)、 createTextNode()(创建一个文本节点)

(2)添加: appendChild()

(3)移除:removeChild()    额外补充:替换replaceChild()

(4)查找:getElementsByTagName() (通过标签名)、getElementsByName() (通过name属性名)、getElementById()(通过ID值)、getElementByClass(通过class值)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdzwy.html