JS面试经典题目合集
1、谈谈Cookie的弊端
缺点：
1)Cookie的数量和长度的限制
每个域的cookie总数有限
a）IE6或更低版本最多20个cookie
b）IE7和之后的版本最多可以有50个cookie
c）Firefox最多50个cookie
d）Chrome和Safari没有做硬性限制
长度：每个cookie长度不超过4kb，否则会被截掉
2）潜在的安全风险
Cookie可能被拦截、篡改，如果cookie被拦截，就有可能取得所有的session信息。
3）用户配置为禁用
有些用户禁用了浏览器或客户端设备接受cookie的能力，因此限制了这一功能。
4）有些状态不可能保存在客户端
例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
优点：极高的扩展性和可用性
1)数据持久性
2）不需要任何服务器资源。cookie存储在客户端并在发送后由服务器读取。
3）可配置到期规则。控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到过期的cookie
4）简单性。基于文本的轻量结构。
5）通过良好的编程，控制保存在cookie中session对象的大小。
6）通过加密和安全传输技术（SSL），减少cookie被破解的可能性
7）在cookie中存放不敏感数据，即使被盗也没事。
2、简单说一下浏览器本地存储是怎样的
在较高版本的浏览器中，js提供了sessionstorage和globalstorage。在h5中提供了localstorage来取代globalstorage。
h5中的web Storage包括了两种存储方式：localstorage和sessionstorage
sessionstorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localstorage用于持久话的本地存储，除非主动删除数据，否则数据是永远不会过期的。
3、web storage和cookie的区别
1）存储空间的不同。
web storage能提供5MB的存储空间（不同浏览器的提供空间不同），cookie仅4kb。
web storage每个域的（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。
2）与服务器交互
web storage 中的数据仅仅是保存在本地，不会与服务器进行交互。cookie的内容会随着请求一并发送到服务器（每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽）
3）接口
web storage 提供更多丰富易用的接口，拥有setitem、getitem、removeitem、clear等方法，操作数据更方便。
cookie需要前端开发者自己封装setcookie，getcookie。
4）跨域问题
cookie需要指定作用域，不可跨域调用。
说明：cookie也是不可或缺的，cookie作用是与服务器进行交互，作为http规范的一部分而存在，而web storage仅仅是为了在本地“存储”数据而生。
4、display：none和visibility：hidden的区别
display:none隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在。
visibility：hidden隐藏对应的元素，但在文档布局中仍保留原来的空间。
5、CSS中 link和@import的区别
1）link属于HTML标签，而@import是CSS提供的
2）导入语法不同
<link rel="stylesheet" href="css.css">
<style>
@import url("css.css");
</style>
3）加载时间
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
4）兼容性
import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
6、position的absolute与fixed共同点与不同点
共同点：
1）改变行内元素的呈现方式，display被置为inline-block
2）让元素脱离普通流，不占据空间；
3）默认会覆盖到非定位元素上。
不同点：
absolute的“根元素”是可以设置的，fixed的根元素固定为浏览器窗口，当你滚动网页时，fixed元素与浏览器窗口之间的距离是不变的。
7、简单介绍一下CSS的盒子模型
1）盒模型：根据字面我们可以理解，CSS盒子也是像生活中的盒子一样拿来装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。它包含四个部分，从里到外依次是：内容（content）、填充（padding）、边框（border）、边界（margin）
2）有两种盒子模型。IE盒子模型、标准W3C盒子模型；W3C的content包含了IE盒子模型的content、padding和border。
8、CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS新增伪类有哪些？
1）CSS选择符
id选择器
类选择器
标签选择器
相邻选择器（+）
子选择器（>）
后代选择器（空格）
通配符选择器（*）
属性选择器（a[ rel = "external"]）
伪类选择器（a:hover，li:nth-child）
2）可继承属性
font-size
font-family
color
text-indent
3）不可继承属性
border
padding
margin
width
height
4）id是100，类是10，标签是1，内联样式表为1000
5）CSS新增伪类
first-of-type
last-of-type
only-of-type
only-child
nth-child(n)
:enable:disabled 控制表单控件的禁用状态
：checked 单选框或复选框被选中
9、列出display的值，说明他们的作用。position的值，relative和absolute分别是相对于谁进行定位的？
display：
1）display：block 像块元素一样显示
2）display：inline 像行内元素一样显示
3）display：inline-block 像行内元素一样显示，但其内容像块元素一样显示
4）display: list-item; 像块元素一样显示，并添加样式列表标记
position：
1）absolute 绝对定位，相对于第一个祖先元素进行定位
2）fixed 相对于浏览器窗口进行定位（老IE不支持）
3）relative 相对定位，相对于在普通流中的位置进行定位
4）static 默认值，没有定位，出现在正常的流当中
5）inherit 规定从父元素继承position的值
10、CSS3有哪些新特性
1）
