存储面试题分析及解析

网络&存储1.http响应中content-type包含哪些内容？
请求中的消息主题是用何种方式解码
application/x-www-form-urlencoded
这是最常见的post提交数据的方式，按照key1=val1&key2=val2的方式进行编码
application/json
告诉服务器端消息主体是序列化后json字符串
2.get和post有什么不同？
get是从服务器上获取数据，post是像服务器传送数据
get请求可以将查询字符串参数追加到url的末尾；post请求英国把数据作为请求的主体提交
get请求数据有大小限制；post没有
post比get安全性更高
3.cookie和session有什么联系和区别？
cookie数据存放在客户的浏览器上，session数据放在服务器上
session比cookie更安全
单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie
一般用cookie来存储sessionid
4.多页面通信有哪些方案，各有什么不同？
localstroge在一个标签页里呗添加、修改、删除时，都会触发一个storage事件，通过另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信
settimeout+cookie
5.输入网站后到页面展现是过程？
通过dns解析获取ip
通过dns解析获取ip
tcp链接
客户端发送http请求
tcp传输报文
服务器处理请求返回http报文
6.客户端解析渲染页面
　　构建DOM树->构建渲染树->布局渲染树：计算盒模型位置和大小->绘制渲染树
7.前端性能优化
代码层面：避免使用css表达式，避免使用高级选择器，通配选择器
缓存利用：缓存ajax，使用CDN，使用外部js和css文件以便缓存
添加expires头，服务器配置Etag，减少DNS查找
请数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载
请求带宽：压缩文件，开始GZIP
代码层面的优化：
用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化js性能
用setTimeout来避免页面是去响应
缓存DOM节点查找的结果
避免使用css Expression
避免全局查询
避免使用with（with会创建自己的作用域，会增加作用域链长度）
多少变量声明合并
避免图片和iframe等的空src，空src会重新加载当前页面，印象速度和效率
尽量避免写在HTML标签中写style属性
样式放在顶部，脚本放在底部
8.移动端性能优化
尽量使用css3动画，开启硬件加速
适当使用touch时间代替click时间
避免使用css3渐变阴影效果
可以用transform: translateZ(0) 来开启硬件加速
不滥用float。float在渲染时计算量比较大，尽量减少使用
不滥用web字体。web字体需要下载，解析，重绘当前页面
合理使用requestAnimationFrame动画代替setTimeout
css中的属性（css3 transitions、css3 3D transforms、opacity、webGL、video）会触发GUP渲染，耗电
9.分域名请求图片的原因和好处？
浏览器的并发请求数目限制是针对同一域名的，超过限制数目的请求会被阻塞
浏览器并发请求有个数限制，分域名可以同时并发请求大量图片
10.页面的加载顺醋
html顺序加载，其中js会阻塞后续dom和资源加载，css不会阻塞dom和资源的加载
浏览器会使用prefetch对引用的资源提前下载
没有defer或async，浏览器会立即加载并执行指定的脚本
有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（下载一部，执行同步，加载完就执行）
有defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成

11.计算机网络的分层概述
tcp/ip模型：从下往上分别是链路层，网络层，传输层，应用层
osi模型：从下往上分别是物理层，链路层，网络层，传输层，会话层，表示层，应用层
12.jscss缓存问题
浏览器缓存的意义在于提高了执行效率，但是也随之带来一些问题，导致修改了js、css，客户端不能更新
都加上了一个时间戳作为版本号

13.说说tcp传输的三次握手 四次握手策略
　　三次握手：
为了准确无误地吧数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，他一定会向对方确认是否送达，握手过程中使用TCP的标志：SYN和ACK
发送端首先发送一个带SYN的标志的数据包给对方，接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息
最后，发送端再回传一个带ACK的标志的数据包，代表“握手”结束
如在握手过程中某个阶段莫明中断，TCP协议会再次以相同的顺序发送相同的数据包
　　断开一个TCP连接需要“四次握手”
第一次挥手：主动关闭方发送一个FIN，用来关注主动方到被动关闭方的数据传送，也即是主动关闭方告诫被动关闭方：我已经不会再给你发数据了（在FIN包之前发送的数据，如果没有收到对应的ACK确认报文，主动关闭方依然会重发这些数据）。但是，此时主动关闭方还可以接受数据
第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号收到序号 +1（与SYN相同，一个 FIN占用一个序号）
第三次挥手：被动关闭方发送一个 FIN。用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会给你发送数据了
第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次握手
14.TCP和UDP的区别？
TCP是基于连接的协议，也就是说，在正式收发数据前，必须和对方简历可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP是与TCP相应的协议。他是面向非连接的协议，他不与对方建立连接，而是直接就把数据包发送过去了
UDP适用于一次只传送少量数据，对可靠性要求不高的应用环境
15.HTTP和HTTPS
HTTP协议通常承载与 TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
默认HTTP的端口号为80，HTTPS的端口号为443
16.为什么HTTPS安全
　　因为网络请求需要中间有很多的服务器路由的转发，中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有，https之所有说比http安全，是因为他利用ssl/tls协议传输。包含证书，流量转发，负载均衡，页面适配，浏览器适配，refer传递等，保障了传输过程的安全性
17.关于http 2.0
http/2 引入了“服务端推”的概念，它允许服务端在客户端需要数据之前就主动的将数据发送到客户端缓存中，从而提高性能
http/2提供更多的加密支持
http/2使用多路技术，允许多个消息在一个连接上同时交差
它增加了头压缩，因此即使非常小的请求，其请求和响应和header都只会占用小比例的带宽
18.defer 和 async
defer并行加载js文件，会按照页面上script标签的顺序执行
async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行
19.Cookie的弊端
　　cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但是有很多局限性
第一：每个特定的域名下最多生成20个cookie
IE6或更低的版本，最多20个cookie
IE7和之后的版本最多50cookie
chrom和safari没有做硬性限制
第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
IE提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个月名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，就一直会在
优点：极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小
通过加密性和安全传输技术（SSL），减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗也不会有重大损失
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie
缺点：
cookie数量和长度的限制，每个domain最多只能有20调cookie，每个cookie的长度不超过4KB，否则会被截掉
安全性问题，如果cookie被人拦截了，那人就可以取得所有的session信息，即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就行
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器保存一个计数器，如果我们把这个计数器保存在客户端，那么他起不到任何作用
20.浏览器本地存储
较高版本的刘拉你中，js提供了sessionStorage和globalStorage。在HTML5提供了localStorage来取代globalStorage
HTML5中的web storage包括了两种存储方式：sessionStorage和 localStorage
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
而localStorage用于持久化的本地存储，除非主要删除数据，否则数据是永远不会过期的
21.web storage 和 cookie的区别
web storage的概念和cookie相似，区别是为更大容量存储设计的，cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用
除此之外，web storage拥有serItem,getItem,removeItem,clear等方法，cookie得自己封装setCookie,getCookie
但是cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而web stroage仅仅是为了在本地“存储”在存在
浏览器的支持除了IE7及以下不支持外，其他标准都会完全支持（ie及FF需要在web服务器里进行），值得一提的是IE总是办好事，例如IE7,IE6的userData其实就是js本地存储的解决方法，通过简单的代码封装就可以同意到所有的浏览器都支持web storage
localStorage和sessionStorage都具有相同的操作方法，例如setItem,getItem,removeItem等
22.cookie 和 session的区别
cookie数据存放在客户的浏览器上，session数据放在服务器上
cookie不是很安全，别人分析存放在本地的cookie进行cookie欺骗
考虑到安全应当使用session
session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用cookie
单个cookie保存的数据不能超过4k，很多浏览器都限制一个站点最多保存20个cookie
所以个人建议：
将登陆信息等重要信息放在session
其他信息如果需要保留，可以放在cookie
23.常见兼容性问题？
png24位的图片在ie6浏览器上出现背景，解决方案是做成png8，也可以引用一段脚本处理
浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin: 0;padding:0;}来统一
IE6双边距BUG：块属性标签float后，又有横行的margin情况下，在ie6显示margin得比设置的大
浮动ie产生的双边距距离（IE6双边距问题：在IE6，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍）
这种情况之下ie会产生20px的距离，解决方案是在float的标签样式控制中加入
_display：inline；将其转化为行内属性（_这个符号只有ie6识别）
渐进识别的方式，从总体中逐渐排除局部
首先，巧妙的使用“\9”这一标记，将ie浏览器从所有情况中分离出来
接着，再次使用“+”将IE8和IE7，IE6分离出来，这样IE8已经独立识别

怪异模式问题：漏写DOCTYPE声明。firefox仍然会按照标准模式来解析网页，但是IE中会触发怪异模式，为了避免不必要的麻烦，最好声明 良好习惯