一开始让我自我介绍,讲自己的前端经历。(自己当时只学到JS和ES6,所以面试官问的比较基础。)
-
说一下http缓存
我不会,跟他扯到了cookie
http缓存指的是: 当用户向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力。
http缓存分为强制缓存和协商缓存,分别是根据缓存时效和文件是否修改来判断是否使用浏览器缓存。
强制缓存有一个cache-control属性,内含一个max-age字段,这个max-age字段的值就是缓存时效,如果在缓存时效内,这个请求会从浏览器缓存中取副本;如果超过了缓存时效,用户就需要向服务器请求资源,并把这个资源副本缓存到浏览器中。
对于协商缓存,客户端第一次向服务器请求资源后,会把这个文件和它的最后修改时间Last-Modified和内容修改标识etag缓存到浏览器中。(为什么需要这两个值呢?如果只修改了,没有修改内容还需要向服务器重新请求就很浪费时间了,所以还需要一个内容修改标识)。之后的请求会先根据文件的最后修改时间与服务器校验,Last-Modified一样,再判断etag,如果都一样,说明文件没有修改,返回304状态码,客户端可以直接从浏览器缓存中取;如果Last-Modified不一样,etag一样,还是返回304;最后一种情况就是Last-Modified和etag都不一样,用户就需要向服务器请求资源。 -
既然你说到了cookie,那就说一下cookie
我只是谈到cookie可以缓存用户名和密码,不需用户重新输入。之后他又问cookie在不同域名下干什么来着。。。。
HTTP 协议是一种无状态协议,即每次服务端接收到客户端的请求时,都是一个全新的请求,服务器并不知道客户端的历史请求记录; Cookie 和Session的主要目的就是为了弥补 HTTP 的无状态特性。Cookie用来解决客户端如何保存信息的问题,Session来解决多用户问题,即每个客户端会对应一个session,当前会话产生的信息可以保存在session中,使用Cookie和Session的关联性来解决这个问题。
用一个通俗的例子解释cookie,就像去超市买东西我们办的会员卡,会员卡记录你的余额、积分等,之后每次到超市买东西,我们可以根据这个会员卡查询和更新自己的相关信息。同理,在Web应用中,Cookie的功能就类似于上面的例子中的会员卡,第一次请求时,会创建一个Cookie,当用户再次访问服务器时,就会携带上Cookie(会员卡),服务端也会根据处理结果,将一些信息放到Cookie中,以保存在客户端。 -
说一下html语义化
我一时间记不起来,脑子里第一个反应的是无障碍阅读还有比如img的alt属性。
面试官的解释就是比如说一个div,咱们并不能看出这个写哪个部分。一些语义化标签比如header,我们一看就知道这是头部,其他的还有footer底部,nav导航栏。
有什么用?一是爬虫根据标签来确定关键字的权重,可以和搜索引擎建立良好的沟通。二是便于开发和维护,便于其他人阅读。 -
http状态码
我只能答出404和304,太菜了。
1xx:指示信息–表示请求已被接收,继续处理
2xx:成功–请求被成功接收
3xx:重定向–要完成请求必须进行下一步操作
4xx:客户端错误
5xx:服务端错误200:OK 客户端请求成功
206: 服务器成功处理了部分 GET 请求
301:所请求的页面已转移到新的URL
302:所请求的页面已临时转移到新的URL
304:可以从浏览器缓存中获取副本
400: 客户端有语法错误,服务器不理解请求的语法。
401:(未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
403:(禁止) 服务器拒绝请求,禁止访问请求页面。
404:(未找到) 服务器找不到请求的网页。
500:(服务器内部错误) 服务器遇到错误,无法完成请求,浏览器缓存还可以用。
503:请求未完成。服务器临时过载,一段时间后可能恢复正常 -
那你说说ES6有什么新特性
脑海里只想到了继承class,set,map,promise
let,const,模板字符串,箭头函数,Symbol,promise,set,map,模块化,async,await -
set有什么特性
这个太简单了,set的元素的唯一的,不想数组一样可以存在重复的元素,另外set有比较方便的内置方法,比如说添加add删除delete一个元素等。。。 -
如何利用promise保证三个请求完成
-
你知道JSON.stringify吗?如何过滤一个对象中我们不需要的属性,比如{a:1,b:1}这个对象,咱们只要b这个属性,如何过滤a属性?
JSON.stringify将对象或数组转换成JSON 字符串,利用JSON.stringify()的第二个参数把需要的属性以数组的方式传入,或者第二个参数是函数,把不必要的属性返回undefined过滤。 -
如何实现自适应?
一种方法是媒体查询,另一种是引用js,用rem代替px
总结:可以看出面试官放水已经很严重了,可我还是不会,只能说自己太菜了,还得学。(感谢耐心引导我的面试官!!!)