美文网首页
金山办公2020校招前端开发工程师笔试题

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

作者: edisonTechBlog | 来源:发表于2020-03-03 12:43 被阅读0次

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


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

    考察了 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的理解,已经这个流程是怎么样的。

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/htzflhtx.html