前端面试题整理2-2018.7.4

HTML部分

1.描述一下 cookies，sessionStorage 和 localStorage 的区别

项目	cookies	sessionStorage	localStorage
存储大小	不能超过4k	可以大于5M	可以大于5M
有效时间	设置的cookie过期时间之前一直有效	数据在当前浏览器窗口关闭后自动删除	浏览器关闭后数据不丢失除非主动删除数据
是否发送服务器	网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）,始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递	不会自动把数据发给服务器，仅在本地保存	不会自动把数据发给服务器，仅在本地保存

2.iframe有那些缺点?
1) 阻塞主页面的Onload事件
2) 搜索引擎的检索程序无法解读这种页面，不利于SEO
3) iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
解决方法：通过javascript动态给iframe添加src属性值

3.Label的作用是什么？是怎么用的?
作用：label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上
用法：

  <label for="Name">Number:</label>
  <input type=“text“name="Name" id="Name"/>

  <label>Date:<input type="text" name="B"/></label>

4.HTML5的form如何关闭自动完成功能?
给不想要提示的 form 或某个 input 设置为 autocomplete=off

5.如何实现浏览器内多个标签页之间的通信?
1）WebSocket、SharedWorker；
2）调用localstorge、cookies等本地存储方式；
3）localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

6.webSocket如何兼容低浏览器？
1） Adobe Flash Socket 、
2）ActiveX HTMLFile (IE) 、
3）基于 multipart 编码发送 XHR 、
4）基于长轮询的 XHR

7.页面可见性（Page Visibility API） 可以有哪些用途？
1）通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
2）在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

8.如何在页面上实现一个圆形的可点击区域？
1）map+area或者svg
2）border-radius
3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

9.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

10.网页验证码是干嘛的，是为了解决什么安全问题？
1）区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

11.title与h1的区别、b与strong的区别、i与em的区别？
1）title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
2）strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容
3）i内容展示为斜体，em表示强调的文本；

Physical Style Elements – 自然样式标签
b, i, u, s, pre
Semantic Style Elements – 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。