初级前端高频面试题总结二

1:cookies、sessionStorage和localStorage解释及区别

1）相同点是都是保存在浏览器端、且同源的
2）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
3）存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
6）web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
7）web Storage的api接口使用更方便

2:margin塌陷和合并问题(知道就行了)

首先，margin塌陷是相对于父子级关系的两个元素，而margin合并是相对两个兄弟级关系的两个元素

两个兄弟级关系的元素，垂直方向上的margin，其外边距会发生重叠现象，两者两个的外边距取的是两个所设置margin的最大值，就是所说的margin合并问题

两个父子级关系的元素，垂直方向上的margin会粘合在一起，外层和模型的margin-top取两个元素中margin-top的最大值，发生margin塌陷的内层元素相对于整个文档移动

3:CSS定位的方式有哪些分别相对于谁

static(默认值)
absolute(绝对定位，相对于最近已定位的父元素，如果没有则相对于)
relative(相对定位，相对于自身)
fixed(固定定位，相对于窗口)
sticky(2017年浏览器开始支持，粘性定位,这里只做了解)

4:解释一下变量提升

JavaScript引擎会先进行预解析，获取所有变量的声明复制undefined，然后逐行执行，这导致所有被声明的变量，都会被提升到代码的头部（被提升的只有变量，值不会被提升），也就是变量提升（hoisting）

console.log(a) // undefined

var a = 1
function b(){
    console.log(a)
}
b() // 1

预解析阶段会先获的变量a赋值undefined，并将var a = undefined放在最顶端，此时a = 1还在原来的位置，实际就是：

var a = undefined
console.log(a) // undefined

a = 1
function b(){
    console.log(a)
}

b() // 1

5:你在工作中接触到的前端性能优化的方案有哪些

前端性能优化七大常用的优化手段：减少请求数量，减小资源大小，优化网络连接，优化资源加载，减少回流重绘，使用更好性能的API和构建优化

减少请求数量: 如使用精灵图减少图片请求次数,再如使用雪碧图，将图片转码base64内嵌到HTML中，使用字体图片代替图片
文件合并，并按需分配（公共库合并，其他页面组件按需分配）
减少重定向：尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输
使用缓存：即利用浏览器的缓存,减少请求次数
不使用CSS @import：CSS的@import会造成额外的请求
避免使用空的src和href：a标签设置空的href，会重定向到当前的页面地址，form设置空的method，会提交表单到当前的页面地址
压缩：静态资源删除无效冗余代码并压缩
使用CDN
并行连接：由于在HTTP1.1协议下，chrome每个域名最大并发数是6个。使用多个域名，可以增加并发数
**减少重绘回流:**尽量减少DOM操作
构建优化：如使用webpack打包构建