前端面试题

1，http强制缓存和协议缓存

（：为了服务器压力，加快网页访问速度

（：浏览器提供两种控制策略，强制缓存和协商缓存

（：强制缓存就是强制使用浏览器缓存下来的资源

（：协商缓存就是浏览器要和服务器协商一下是使用浏览器缓存还是服务器的Cache-Control

（：强制缓存实施，第一次请求资源的时候，后台在返回头加上Cache-Control，指定一个使用强制缓存的时间长度

（：协商缓存实施，第一次请求资源的时候，后台在发给前台的返回头上加上Etag表示文件的版本信息，告诉浏览器下次请求这个资源的时候，要先问一下服务器应该使用前端缓存还是重新发，服务器会看一下Etag文件版本信息有没有变化来决定浏览器使用什么资源

（：强制缓存的优先级比协商缓存的高，两者都存在的时候，按照强制缓存来使用资源

（：强制缓存的缺点，服务器资源有新版本的时候，浏览器还是用的老版本

（：协商缓存缺点，浏览器每次使用资源之前都要询问一下服务器应该怎么使用资源，可能有不必要的时间和流量浪费

（：前端主要解决方案是添加文件指纹，对html文件永远不用缓存，只用最新版本的资源

（：然后将用到的css文件，图片文件等资源设置成使用强制缓存，然后资源变更的时候，比如图片变了，就级联修改引用它的css的文件的指纹也就是文件名

（：这样的话html中引用的css的文件名就会变化，缓存中并没有这个名字的css文件，访问html的时候会请求最新的资源去了

（：百度就是这样做的

2、一个请求地址切割，key重复的就将值放到一个数组中

（：取？开头的后面一串

window.location.search

（：取&分割的键值对字符串

window.location.search.split('?')[1]

（：取到每一个=分隔的键值对字符串的数组

window.location.search.split('?')[1].split('&')

（：先将所有的键值对变成key:[value]，不管有几个相同的

var obj={}

for(var i=0,len=arr.length;i<len;i++){
var kv=arr[i].split('=');
var key=kv[0];
var value=kv[1];
if(obj[key]){
obj[key].push(value)
}else{
obj[key]=[]
obj[key].push(value)
}

}

//如果key:[value]只有一个元素，就将里面的value拿出来

for(var k in obj){
if(obj[k].length=1){
obj[key]=obj[key][0]
}

}

window.location.search
"?name=a&name=b&name=c&age=1&home=bj"
var arr=window.location.search.split('?')[1].split('&')
undefined
arr
(5) ["name=a", "name=b", "name=c", "age=1", "home=bj"]
for(var i=0,len=arr.length;i<len;i++){
var kv=arr[i].split('=');
var key=kv[0];
var value=kv[1];
if(obj[key]){
obj[key].push(value)
}else{
obj[key]=[]
obj[key].push(value)
}
}
for(var k in obj){
if(obj[k].length==1){
obj[key]=obj[key][0]
}
}
undefined
obj
{name: Array(3), age: Array(1), home: "bj"}

3、flex=1是什么的简写

（：flex是flex-grow,flex-shrink,flex-basis的简写，默认值0 1 auto,后两个值可选

（：flex-grow属性定义项目的放大比例，默认是0，即

（：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

 (:flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

(:flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

(:flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。