认识达内从这里开始

随着互联网的不断发展，前端编程开发可以说是目前的热门求职岗位了，今天我们就一起来了解一下，在前端技术面试中都有哪些常见的面试问题是需要我们掌握的。

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

cookie是网站为了标示用户身份而储存在用户本地终端(ClientSide)上的数据(通常经过加密)。

cookie数据始终在同源的http请求中携带(即使不需要)，记会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：

cookie数据大小不能超过4k。

sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：

localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;

sessionStorage数据在当前浏览器窗口关闭后自动删除。

cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

2.iframe有那些缺点?

iframe会阻塞主页面的Onload事件;

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

3.如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker

也可以调用localstorge、cookies等本地存储方式。

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意quirks：Safari在无痕模式下设置localstorge值时会抛出QuotaExceededError的异常。

4.如何在页面上实现一个圆形的可点击区域?

(1)map+area或者svg

(2)border-radius

(3)纯js实现需要求一个点在不在圆上简单算法、获取鼠标坐标等等

5.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?

(1)有两种，IE盒子模型、W3C盒子模型。

(2)盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。

(3)区别：IE的content部分把border和padding计算了进去。

6.CSS优先级算法如何计算?

优先级就近原则，同权重情况下样式定义近者为准;

载入样式以后载入的定位为准;

优先级为:

!important>id>class>tag

important比内联优先级高(style)

7.为什么要使用CSSsprites

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长;请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。

8.display:none和visibility:hidden的区别?

display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。

visibility:hidden隐藏对应的元素，但是在文档布局中仍保留原来的空间。

9.position的absolute与fixed区别

absolute浮动定位是相对于父级中设置position为relative或者absolute近的父级元素

fixed浮动定位是相对于浏览器视窗的

10.IE8以下版本的浏览器中的盒模型有什么不同?

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。