金山办公2020校招前端开发工程师笔试题

每天看看面试题，巩固知识，冲鸭

---

一 、写出如下代码的执行结果

考察了 promise，以及任务处理顺序。promise值得单写一篇文章，这里不过多赘述。

new Promise((resolve) => {
    console.log('1')
    resolve()
    console.log('2')
}).then(() => {
    console.log('3')
})
setTimeout(() => {
    console.log('4')
})
console.log('5')

1. 首先需要搞清楚JS中是单线程的，并且执行的优先级是同步大于异步，并且是所有同步执行完后才回来执行异步操作
2. 异步操作中又分为微任务（promise等）和宏任务（setTimeOut、I/O操作等）。顾名思义，微任务是具体的点，而宏任务是大的一个块儿。
3. 微任务和宏任务的执行顺序为前者优先

所以，正确答案：1 2 5 3 4

二 、请列举几种除了px外的CSS度量单位并解释其含义。

1. rem 相对于根字体大小的单位，比如可以设置 1rem=50px
2. em 相对于font-size，比如font-size：16px（浏览器默认），则2em=32px
3. vm 即viewpoint width，视窗宽度，比如1vm的宽度为相对于视窗的宽度的百分之一
4. vh 即viewpoint height ，同上

三 、new操作符做了什么？

考察原型和原型链，这个知识不在赘述

简单点来说，new操作符会先创建一个空对象，然后将this指向这个空对象，并且进行赋值，最后返回这个this。
但是其中还涉及到了proto 、prototype,不过多赘述

四 、简述cookie/session记住登录状态机制原理。

这里不写答案，但是要知道cookie和session的作用。同时还要了解一下token。

五 、网页中接收事件的顺序（事件流）有哪些？它们之间的区别是什么？

首先说一下什么是事件流，个人理解为假设在牛客网做题，当我点击了提交按钮，浏览器是如何知道我点击了什么东西呢？这个时候就需要使用到事件流

最开始有两种，一个是冒泡，一个是事件捕获。

先说说冒泡：和冒泡排序一样（虽然这是个憨批算法），都是从最底层开始，即那个点击按钮的标签

假设这是个DOM,那么冒泡流就是从p开始，到div，然后body、html、document

html
  head
    body
      div
        p 提交

再来说说事件捕获流：不用说太多，因为这刚好和上面是冒泡流相反，即从最外层的标签开始，最后才到达p标签。

最后来说说现在标准，DOM2级事件流，即首先进行事件捕获流，然后到达事件所在的标签后，进行处理，然后在开始进行事件冒泡流，类似于koa2中的洋葱模型

六 、简述你对HTTP控制访问（CORS）的理解

首先要搞明白什么是同源，什么是跨域。

打一个简单的比方，你自己从你家里拿东西，不会有人说，这是同源；但是你要从隔壁的邻居的冰箱去拿可乐，你觉得可能吗，这就是跨域。

从比方中回来，事实其实没有那么简单。理解了概念后，得知道如何去判断同源还是跨域。web服务器有三要素：协议（http、https）、端口号（不过多说）、web服务器域名（比如https://github.com/mamba666
中https://github.com就是域名）。三要素必须全部一致才算同源

个人认为写完上面的东东后已经理解了同源跨域已经如何区分。接下来就来看看真正的干货，不讲同源，只讲跨域（以下参考MDN）

浏览器端

如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。

服务器端

当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪儿些方法可以执行。

响应回到浏览器端

此时浏览器会根据这个响应自动判断，然后在做决定。

服务器端返回给浏览器端的东西

• Access-Control-Allow-Origin 允许跨域的Origin列表
• Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
• Access-Control-Allow-Headers 允许跨域的Header列表
• Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
• Access-Control-Max-Age 最大的浏览器缓存时间，单位为s

跨域请求形式

有两种，简单和非简单请求。这里说说我常遇到的 application/json 。这就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

其实写了这么多，最重要的就是对CORS的理解，已经这个流程是怎么样的。