前端面试题_k.docx

gyfniceAt Qunar给大家的前端面试题笔记FE-interview-questionsHTML31.HTML与XHTML的区别？32.doctype是做什么的？33. data- attributes有什么好处？44. script, script async and script defer有什么区别？45. cookie/localStorage/sessionStorage的区别？5localStorage and sessionStorage5Cookie5CSS61. 在CSS中ID、CLASS选择器有什么区别？62.CSS优先级规则 ？63.描述一下box-sizing？64. 有哪些隐藏内容的方法？65.解释下浮动和它的工作原理？75.1在CSS定位机制中，有3大流派85.2紧邻浮动元素的控制流：“clear”属性，清除浮动96. 描述 z-index 和 stacking context（层叠上下文）是怎么形成的？11Stacking Contexts and Stacking Levels12Stacking Order137. 描述BFC(Block Formatting Context) and how it works.16JAVASCRIPT191. Explain how this works in JavaScript?192.Whats the difference between .call and .apply and .bind?213.描述一下strict mode？214.描述一下原型继承的原理？235. foo.x的值是什么？24前端面试题by gyfnice2014/7/22HTML1.HTML与XHTML的区别？最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。XHTML标签名必须用小写字母，里面的属性必须有引号。XHTML 文档必须拥有根元素。2.doctype是做什么的？Doctype是html里必要的开场白，它被要求是因为浏览器发展的历史遗留原因。如果你忽略它，浏览器会采用不同的模式渲染页面，导致与一些标准产生冲突。如果指明了Doctype，浏览器会尽最大可能遵循相关标准，保证其渲染页面时一致性。（最典型的是盒子模型，在怪异模式下，其对宽度的计算是不一致的）。就像汽车里的安全带一样，就像你知道的一样，如果没有安全带，也不会对我开车的行为有任何影响，那你怎么才能知道你是否需要安全带呢？你不需要知道，因为当出事的时候再知道就已经晚了。安全最重要。3. data- attributes有什么好处？能语义化的在Dom上存储相关数据。能通过JavaScript中的Dom API简单的拿到数据。能利用CSS进行相应数据的布局4. script, script async and script defer有什么区别？HTML中的script标签允许把定义在页面中JavaScript代码开始执行。 正常执行scriptscript标签默认的执行行为是同步执行，也就是当加载执行脚本时会阻塞HTML的正常渲染。所以如果过多的脚本放在页面头部，会导致页面延迟加载等。延迟执行defer script延迟脚本执行直到HTML渲染完成的时候。它的好处就是能保证脚本在执行过程中相关Dom节点是已经存在的。然而因为不是每个浏览器都支持它，所以不要太依赖它。异步执行async script不关心脚本什么时候会被加载执行。异步是两全其美的：HTML在解析渲染的同时脚本也能同时被加载，当脚本加载成功时，这个时候HTML渲染会被阻塞，交给加载好的脚本去执行。使用这个属性建议加载一些第三方js插件（不依赖原页面）。5. cookie/localStorage/sessionStorage的区别？localStorage, sessionStorage and cookies 都是客户端存储情况。它们都遵循同一个规则：same-origin（同源策略），只允许来自同一站点的资源访问，不同站点是不能访问到它们的。localStorage and sessionStorage它们的功能近乎一样，唯一不同点就是生存周期。用sessionStorage存储的数据在关机后会被删除，而localStorage不会，所以如果想把数据持续的存在客户端上，localStorage比sessionStorage会好一些。CookieCookie也是可以存储数据（以字符串的形式），不过可以被用户篡改，所以要存储敏感的数据，session（服务器端的存储）是唯一的选择。因为每个请求发送时（包括原始页面请求、Ajax、图片、脚本、CSS、fonts）都会带着cookie一起发送，所以cookie不应该存储信