常见面试题(一)1. 请描述一下 cookie, sessionStorage 和 localStorage的区别？存

cookie 详细信息
- 仅在同源的http请求中携带，发送给客户端
- 存储在本地终端
- 存储大小不能超过 4k，一般设置为 4095
  - 不同的浏览器，对于cookie的个数限制不同
- 过期时间之前一直有效，即使浏览器窗口关闭
- 会带来额外的性能开销
- 有被拦截的风险，被拦截会获取所有的 session 信息
- 谨慎使用
  - IE 和 Opera 会清理近期使用最少的 cookie
  - Firefix 会随机清理 cookie
sessionStorage详细信息
- 存储在本地
- 关闭页面后，数据会被清除
- 相同url的数据，数据相互隔离
- 存储大小因各个浏览器不同而不同，特别在移动端。在操作系统的要求下，空间不足的时候，会偶尔进行清除
localStorage
- 存储在本地
- 持久存储数据，浏览器关闭后数据不会丢失，除非主动删除数据
- 存储大小可以到 5M或者更大

Doctype 不区分大小写。
<!Doctype> 声明位于文档的最前面，且处于 html标签之前。是用来告诉浏览器，当前文档是什么类型，需要使用什么类型规范来解析这个文档，规范浏览器的行为。
html4时，html4 是基于SGML的，所以需要对 DTD进行引用，才能告知浏览器文档所用的类型。
html5不基于SGML,所以不需要引用。

FOUC -> Flash of Unstyled Content
- 在用户自定义的样式表没有加载完成前，浏览器使用默认样式显示文档，用户自定义样式加载渲染之后，再重新加载渲染样式，造成的页面闪烁
解决方法
- 将样式表放在文档的标签head
- 使用 link 加载 css 样式
- 使用 style 标签加载 css 样式
- @import 执行顺序为串行，谨慎使用
  - 使用 css 编译器 sass less stylus

BFC
- Block Formatting Context
- 一个页面是由很多 Box组成，Box 有大小，位置，显示方式。决定这个盒子的类型
- 不同的盒子，会组成不同的上下来，所以盒子内的元素渲染方式不同
- BFC环境，让每个盒子的内外部不受影响，形成独立的渲染区域
形成条件
- float 值不为 none
- overflow 值不为 visible
- display 值为 [table-cell || table-caption || inline-block] 之一
- position 值为 [static || relative] 之一
- IE 下，layout zoom:1
BFC 解决了什么问题
- 阻止 margin 重叠
- 清除盒子的内部浮动
- 自适应的两栏布局
- 阻止元素被浮动元素覆盖
引申 -> 盒模型 && box-sizing
- 标准盒模型尺寸应该由，盒子本身的 width = width + padding + border
- 模型分类
  - 例如，盒子 width:200,padding:100,border:10,margin:40
  - margin 不计算为盒子的实际宽度
  - 标准盒模型（W3C盒模型）
    - box-sizing的值为content-box
    - 例子的盒子宽度 width = 200 + 100 + 100 + 10 + 10
  - 怪异盒模型 (IE盒模型)
    - box-sizing的值为border-box
    - 盒子宽度为：width = (width + padding + border)
    - 例子的盒子宽度 width = 200

使用技术栈
- css3 使用 animate && transform && transition
- js ，根据具体的动效确定具体实现方式
下一次逐帧动画的执行方式
- window.requestAnimationFrame
- 根据设备的刷新率，换算当前的执行时间
  - 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

重绘
- 当渲染树中的元素长相(color .....)改变，排列位置不动时，产生重绘
回流
- 当渲染树中的元素布局(即位置，尺寸，显示方式)发生改变，产生回流
- 计算当前的 layout 属性，也会引起回流，因为计算时，浏览器需要通过回流计算最新值
- 回流必将会引起重绘
重绘与回流的性能优化
- 准备对元素做复杂操作时，先将元素 display: none
- 对dom元素进行增删改查时，使用元素片段，尽量不要使用 innerHtml 做复杂的修改，以防创建的节点未回收，造成内存溢出
- css相关
  - 使用复合属性，如 font``background``border``flex...等
  - 使用 class 避免直接修改 style
  - 避免使用 css 表达式

常见面试题(一)