往年经典前端面试题.docx

《往年经典前端面试题.docx》由会员分享，可在线阅读，更多相关《往年经典前端面试题.docx（31页珍藏版）》请在优知文库上搜索。

1、往年经典前端面试题一、HTML/CSS篇1、HTML5标准提供了哪些新的API?【仅供参考】HTML5提供很多新的APL包括MediaAPITextTrackAPI、ApplicationCacheAPI、UserInteractionAPIDataTransferPICommandAPI、ConstraintionValidationAPI和HistoryAPI2、HTML5为浏览器提供了哪些数据存储方案？【仅供参考】在较高版本的浏览器中，提供了sessionStorage：和globalStorage0在HTML5规范中,用IOCalStOrage取代globalStorage。HTML5

2、中的WebStOrage包括两种存储方式，分别是SeSSionStOrage和IocalStorageoSeSSiOnStorage用于在本地存储一个会话（session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。IOCalStOrage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。IOCalStorage和SeSSionStorage都具有相同的操作方法，例如setitem、getltem和removeItem等3、如何区别HTML和HTML5?【仅供参考

3、】用DOCTYPE声明新增的结构元素和功能元素来区别它们。4、请描述一下cookies,sessionStorage和IOCaIStorage的区别？【仅供参考】cookie其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。SessionStorage是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失

4、效了，并且SessionStorage只能被同一个窗口的同源页面所访问共享。IocalStorage也是html5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和SessionStorage不同的是，除非手动删除它，否则它不会失效，并且IoCalStOrage也只能被同源页面所访问共享。相关资料：SessionStorage,LocalStorage,Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于1ITML5WebStorage,创建它们的目的便于客户端存储数据。而cookie是网站为了标示用户身份而储存在用户本地终端上

5、的数据（通常经过加密）。CoOkie数据始终在同源（协议、主机、端口相同）的http请求中携带（即使不需要），会在浏览器和服务器间来回传递。存储大小：1、cookie数据大小不能超过4ko2、SessionStorage和IocalStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：kIocalStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。2、SessionStorage数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化

6、一个新的会话。3、cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域：1、SessionStorage只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。2IocalStorage在所有同源窗口中都是共享的。3、cookie在所有同源窗口中都是共享的。5、介绍一下你对浏览器内核的理解？【仅供参考】主要分成两部分：渲染引擎（IayOUtengineer或RenderingEngine）和JS引擎。渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后渲染到用户的屏幕上。JS引擎则：解析和执

7、行javascript来实现逻辑和控制DOM进行交互。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。6、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？【仅供参考】HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS图像和JaVaSeriPt脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。7、COOkie和SeSSiOn的区别是什么？【仅供参考】区别如下：(1) COokie数据存放在客户的浏览器上，SeSSiOn数据存放在服务器上

8、。(2) CoOkie不是很安全，别人可以分析存放在本地的CoOkie并进行cookie欺骗。考虑到安全问题应当使用sessiono(3) SeSSiOn会在一定时间内保存在服务器上。当访问增多时，会占用较多服务器的资源。为了减轻服务器的负担，应当使用COOkie0(4)单个CoOkie保存的数据不能超过4KB,很多浏览器都限制一个站点最多保存20个Cookie0所以个人建议可以将登录信息等重要信息存放在SeSSiOn中，其他信息(如果需要保留)可以存放在COOkie中。8、如何让老版本IE也支持H5【仅供参考】你可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽

9、视这段代码，也就不会有无谓的http请求了。下面这段代码仅会在IE浏览器下运行：以下是js文件中的代码：(function()if(!/*cc_on!*/0)return;vare=z,abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”split(,),i=e.IengthjwhiIe(i-)document.CreateElement(ei)(

10、)9、如何让Websocket兼容低版本浏览器？【仅供参考】使用AdobeFlashSocketActiveXHTMLFile(E)、multipart编码发送XHR与长轮询发送XHR等，可以实现不支持WebSocketAPl的浏览器对WebSocket的兼容。10、的title和alt有什么区别【仅供参考】通常当鼠标滑动到元素上的时候显示alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。11、行内元素有哪些？块级元素有哪些？空(VOid)元素有那些？【仅供参考】定义：CSS规范规定，

11、每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为block，则为“块级”元素；span默认display属性值为inline,是“行内”元素。行内元素有：abspanimginputselectstrong(强调的语气)块级元素有：divulolIidldtddhlh2h3h4p空元素：常见：brhrimginputlinkmeta不常见：areabasecolcommandembedkeygenparamsourcetrackwbr【仅供参考】几乎所有的浏览器(如Safari、Chrome、FirefoxOPera、IE)

12、都支持HTML513、IOCalStOrage和Cookie的区别是什么？【仅供参考】IocalStorage的概念和cookie相似，区别是IocalStorage是为了更大容量的存储设计的。COokie的大小是受限的，并且每次请求一个新页面时，cookie都会被发送过去，这样无形中浪费了带宽。另外，Cookie还需要指定作用域，不可以跨域调用。除此之外，IocalStorage拥有setlten,getltemremoveltemclear等方法，CoOkie则需要前端开发者自己封装SetCOokie和getCookie0但Cookie也是不可或缺的，因为Cookie的作用是与服务器进行交

13、互，并且还是HTP规范的一部分，而1。CaIStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。14、HTML5如何实现跨域？【仅供参考】在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。response.SetHeader(zzAccess-Control-Allow-0rigi11z,“*)；response.SetHeader(zzAccess-Control-AlIow-Methodszz,POST)；response.SetHeader(Access-Control-AlIow-Headerszz,zz-requested-with,COntent-t

14、ype)；15、如果把HTML5看成一个开放平台，它的构建模块有哪些？【仅供参考】如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如oWnav标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确标签用来定义文档的页眉。标签用来描述文档的结构。footer)标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息【仅供参考】HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、SiIVerLight等的额外插件，这些内容来自动画、视频、富GUl等HTML5是万维网联盟(W3C)和网络超文本应用技术工作组(

15、WHATWG)合作输出的。17、calc,support,Inedia各自的含义及用法？【仅供参考】support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。CaIC()函数用于动态计算长度值。CaIC()函数支持“+”，“*”，运算；media查询，你可以针对不同的媒体类型定义不同的样式。18、哪些css属性可以继承？【仅供参考】答案：可继承：text-alignfontcolor、Iine-height、letter-spacingsword-spacingstext-indent不可继承：borderpaddingmarginwidt