2020-02-18淘宝面试总结

人生第一场慌慌张张手忙脚乱的面试?


前言

前三个问题分别是:

  • 自我介绍
  • 因为之前有一段时间校企合作去了某家公司实习,被问学到了些什么
  • 平时是怎么学习的

主观题,自行发挥。


flex 的参数有哪些

  • flex-grow:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
  • flex-shrink:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
  • flex-basis:项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。

其默认是 0 1 auto,代表不扩展,会收缩且默认项目长度是自身长度:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
#father {
display: flex;
width: 300px;
height: 100px;
background-color: black;
}

#father > .son {
height: 100px;
width: 20px;
}
</style>
<div id="father">
<div class="son" style="background-color: red;"></div>
<div class="son" style="background-color: yellow;"></div>
<div class="son" style="background-color: green;"></div>
</div>

flex: 1 auto

会被解析为:

  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: auto;

flex: none

会被解析为:

  • flex-grow: 0;
  • flex-shrink: 0;
  • flex-basis: auto;

flex: 1

会被解析为:

  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: 0%;

flex: 2 1

会被解析为:

  • flex-grow: 2;
  • flex-shrink: 1;
  • flex-basis: 0%;

缓存专题

被问了很多有关 CookieStorage 的问题:

Session Storage 和 Local Storage 的区别是什么

Session Storage 是会话级别的存储,在 关闭会话或浏览器后 则会消失;而 Local Storage 用于持久化地存储本地数据,除非主动删除数据,否则是永远不会过期的。

  • Cookie 的大小只有 4KB 左右,而 Storage 可以存储 5MB 的数据;
  • Cookie 可以被携带在 HTTP 请求头中,而 Storage 则不会参与和服务器端的通信;
  • Cookie 需要程序员自己封装,且对原生接口不友好,而 Storage 可以接受原生接口且可以对其进一步封装以对 ArrayObject 有更好的支持;
  • Cookie 一般由服务器生成,可以设置失效时间,如果在浏览器端生成了 Cookie 则会保持到关闭浏览器,相比之下 Storage 的存储时间更久一些。
  • XName:这个 Cookie 的名称,一旦被设置则无法再被改变;
  • Value:代表了这个 Cookie 的值;
  • Domain:可以访问这个 Cookie 的域名;
  • Max Age:这个 Cookie 失效的时间,单位为秒。如果设置为正数则代表 X 秒后失效,如果设置为负数则代表关闭浏览器后失效;
  • Path:可以访问这个 Cookie 的路径,如 / 则表示根下所有都可访问,如 /path 则仅为 path 下的所有路径可以访问这个 Cookie
  • Size:这个 Cookie 的大小
  • HTTP:如果为 true,则只有 HTTP 头中才会携带这个 Cookie 的信息,而不能通过 document.cookie 去获取;
  • Secure:表示这个 Cookie 是否使用安全协议进行传输。

Storage 可以跨域吗

不行,但是可以通过 post Messageiframe 实现跨域。

什么情况下使用 Cookie,什么情况下使用 Session

Cookie 放在客户浏览器上,Session 放在服务器中。cookie 不是很安全,如果考虑到安全应该 用 Session

但 Session 在访问增多的情况下会影响服务器性能,如果考虑到性能应该用 Cookie,但很多浏览器限制一个站点最多保存 20 个 Cookie。


display: none 和 visibility: hidden 有什么区别

这个算是常见题目了,使用 display: none; 后,这个元素虽然没有被从 DOM 树中移除,但它消失且 不会占用文档流中的位置了

但是 visibility: hidden; 只是对这个元素设置了不可见,其仍然在文档流中占据着一块地方。


Promise 中常用的方法有哪些

我哭了,终于看到亲爱的 Promise 了,这篇博客 不是白写的。


用过图片懒加载吗?底层原理是什么?

用过 Vue 中的 vue-lazyload,多少知道一些:

<img> 标签是通过 src 属性中的地址去向服务器请求图片资源的,这个是定死的我们没法改变,但是可以先暂时不去写 src 属性,转而在这个节点上存储一个例如 data-src 这样的属性并把正确的地址放进去,先将 src 置为空。

通过 offsetclientscroll 三大家再配合 定时器 可以简单地判断出来这个图片是否已经出现在了视口中,如果出现了则将 data-src 中的值赋给 src,此时 src 有了值,就会去请求这一张图片。从而实现了懒加载的效果。


在 Vue 中修改了 data 的值会调用哪些生命周期钩子函数

在 Vue 组件的生命周期中,有八个回调函数,在 data 发生改变时会调用 beforeUpdateupdate 这两个函数:

1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
el: '#app',
data: {

},
beforeUpdate() {
// 此时数据变了,但页面中所渲染的还没有改变
},
updated() {
// 页面中的数据也发生了改变
}
});

什么是 Vue 中的虚拟 DOM

专门写了篇关于 VDOM 的博客


AMD、CMD、Common JS 规范的区别

Common JS 规范加载模块是同步的,AMD 规范是异步加载,允许使用回调函数。Common JS 一般在 Node 服务器编程上,所有的资源都在本地,请求快,但 AMD 从服务器端加载模块就需要异步方式。

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。AMD 默认 API 可以一个当多个用,CMD 的 API 职责单一。


用过 ES6 吗,const 和 let 的区别

let 与 const 都是只在声明所在的块级作用域内有效。

let 声明的变量可以改变,值和类型都可以改变,没有限制。

const 声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即初始化,不能留到以后赋值。

对于复合类型的变量,如数组和对象,变量名不指向数据,而是指向数据所在的地址。const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变.


DNS 解析流程是什么

害。真的就最怕被问啥就来啥。

简单地说就两步:

  1. 当应用过程需要将一个主机域名映射为 IP 地址时,就调用域名解析函数,解析函数将待转换的域名放在 DNS 请求中,以 UDP 报文方式发给本地域名服务器;
  2. 本地的域名服务器查到域名后,将对应的 IP 地址放在应答报文中返回。

HTTP 状态码 300 是什么

(我傻了,我是真的从来没遇到过这个状态)

1 开头的 HTTP 状态码

1 开头,表示临时响应并需要请求者继续执行操作的状态代码

  • 100:(继续)请求者应当继续请求。服务器返回此代码表示已经收到请求的一部分,正在等待其余部分;
  • 101:(切换协议)请求者已经要求服务器切换协议,服务器以确认并准备切换。

2 开头的 HTTP 状态码

2 开头,表示请求成功

  • 200:成功处理请求;
  • 201:请求成功并且服务器创建了新的资源;
  • 202:请求成功,但服务器没有创建资源;
  • 203:返回了另一个资源的请求;
  • 204:服务器成功处理了请求,但没有返回任何内容;
  • 205:服务器成功处理了请求,但没有返回任何内容;
  • 206:服务器处理了部分请求;

3 开头的 HTTP 状态码

3 开头,表示重定向

  • 300:(多种选择)针对请求,服务器可以执行多种操作。服务器可以根据请求者(user agent)选择一项操作,或提供操作列表供请求者选择;
  • 301:(永久移动)请求网页已经永久移动到新位置,服务器返回对 GET 和 HEAD 请求的响应时,会自动将请求者跳转到新的位置;
  • 302:(临时移动)服务器目前从不同位置的网页响应请求,但请求者继续使用原有位置进行以后的请求;
  • 303:(查看其他位置)请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码;
  • 304:(未修改)自从上次请求后,请求的网页未修改过。服务器返回这个响应时不会返回网页的内容;
  • 305:(使用代理)请求者只能使用代理访问请求的网页。
  • 307:(临时重定向)服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

4 开头的 HTTP 状态码

4 开头,表示请求出错

  • 400:服务器不理解请求的语法;
  • 401:请求要求验证身份,对于要登录的网页可能返回此响应;
  • 403:服务器拒绝了请求;
  • 404:服务器找不到请求的网页;
  • 405:禁用请求中指定的方法;
  • 406:无法使用请求的内容特性响应请求的网页;
  • 407:与 401 相似,但指定请求者应当授权使用代理;
  • 408:服务器等候请求时发生超时;
  • 409:服务器在完成请求时发生了冲突,服务器必须在响应中包含有关冲突的信息;
  • 410:如果请求的资源已经永久删除,服务器就会返回此响应;
  • 411:服务器不接受不含有效长度标头字段的请求;
  • 412:服务器未满足请求者在请求中设置的其中一个前提条件;
  • 413:服务器无法处理请求,因为请求的实体过大,超出了服务器的处理能力;
  • 414:请求的 URI 过长,服务器无法处理;
  • 415:请求的格式不受请求页面的支持;
  • 416:如果页面无法提供请求的范围,则服务器会返回此状态码;
  • 417:服务器未满足“期望”请求标头字段的要求。

5 开头的 HTTP 状态码

5 开头,表示其他错误

  • 500:(服务器内部错误)服务器内部错误导致无法完成请求;
  • 501:(尚未实施)服务器不具备完成请求的功能,例如无法识别请求方法;
  • 502:(错误网关)服务器作为网关或代理,从上游服务器收到了无效响应;
  • 503:(服务不可用)服务器目前无法使用(超载或停机维护);
  • 504:(网关超时)服务器作为网关或代理,但是没有及时从上游服务器得到请求;
  • 505:(HTTP 版本不支持)服务器不支持请求中所用到的 HTTP 协议版本。

总结

没经验吧,真的慌了,很多特别简单的问题都会脑子抽抽没想出来,在回答 displayvisibility 的区别时都口误说成和去掉 DOM 树的 v-if 相同了,懒加载也没答上来(为什么当时满脑子都是实现双向绑定的 Object.defineProperty() ???)。

但说白了还是个人技术不到位,在缓存那一块掌握的也并不是很好。

回炉重造吧。

-------------本文结束 Euphoria 在此感谢您的阅读-------------

本文标题:2020-02-18淘宝面试总结

文章作者:王钦弘

发布时间:2020年02月18日 - 13:46

最后更新:2020年02月18日 - 22:21

原始链接:https://www.wqh4u.cn/2020/02/18/2020-02-18%E6%B7%98%E5%AE%9D%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

您的支持将鼓励 Euphoria 继续创作!
(如果你还是学生请千万不要打赏!留点钱在学习上啊!)