2020社招个人面试题目以及知识点整理：4399/六一/交易猫/网易/浩鲸云/小满/建信金融/美团

螺旋静
270 阅读16分钟

写在前面：今年还没系统复习时投了简历试试水，证明了我真的很菜……整理了一份答案总结(也有两家没整理…)，仅供参考，互相学习。 本文原发于我的个人github博客

4399-笔试-2019

  1. 强制缓存与协商缓存的区别

    浏览器是否向服务器发送请求

    http缓存机制主要在http响应头中设定，响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。

    • 强缓存：浏览器不会像服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK

image

200 form memory cache : 不访问服务器，一般已经加载过该资源且缓存在了内存当中，直接从内存中读取缓存。浏览器关闭后，数据将不存在（资源被释放掉了），再次打开相同的页面时，不会出现from memory cache。

image

200 from disk cache： 不访问服务器，已经在之前的某个时间加载过该资源，直接从硬盘中读取缓存，关闭浏览器后，数据依然存在，此资源不会随着该页面的关闭而释放掉下次打开仍然会是from disk cache。

  • 访问次序：先访问内存memory cache，再访问磁盘disk cache

  • 协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源

image

参考强制缓存和协商缓存

  1. Cookie 和 Session 的区别

    • 共同：

      cookie和session都是用来跟踪浏览器用户身份的会话方式

    • 差异：

      cookie数据保存在客户端，session数据保存在服务器端。

    • cookie：一种发送到客户浏览器的文本串句柄，保存在客户机硬盘上，可以用来某个web站点会话间持久的保持数据

    • session：访问者从到达某个特定主页到离开为止的那段时间。session利用cookie进行信息处理的，当用户首先进行了请求后，服务端就在用户浏览器上创建了一个cookie，当这个session结束时，意味这个cookie就过期了

  2. Vue怎样实现登陆拦截

    大致流程：在进行路由跳转时，利用vue-router提供的钩子函数beforeEach()对路由进行判断，符合条件就next()，不符合便跳转到登录页面。在发送请求时，统一处理所有http请求和响应，用上axios的拦截器，通过配置http resquest interceptors为http头增加Authorization字段，其内容为Token，通过配置http response interceptors对返回的数据处理。

  3. Vue导航守卫是什么

    vue-router提供的导航守卫主要用来通过跳转或者取消的方式守卫导航。

    全局前置守卫、全局解析守卫、全局后置钩子、路由独享守卫

    导航被触发。

    在失活的组件里调用离开守卫。

    调用全局的 beforeEach 守卫。

    在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

    在路由配置里调用 beforeEnter。

    解析异步路由组件。

    在被激活的组件里调用 beforeRouteEnter。

    调用全局的 beforeResolve 守卫 (2.5+)。

    导航被确认。

    调用全局的 afterEach 钩子。

    触发 DOM 更新。

    用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

  4. 什么是钩子函数

    钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。

    钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

六一教育-前端-2020.8.21

  1. HTTP的头部有什么

    通用头、请求头、响应头、实体头。

    参考：header头部字段汇总 / HTTP请求行、请求头、请求体详解 / 详解 HTTP 头部信息

    • 根据实际用途划分：

    1. 通用首部字段：请求报文和响应报文两方都会使用到的首部。

      • 作用：通用头部是客户端和服务器都可以使用的头部，可以在客户端、服务器和其他应用程序之间提供一些非常有用的通用功能，如Date头部。但与最终消息主体中传输的数据无关的消息头。
      首部字段说明
      Cache-Control控制缓存行为
      Connection逐跳首部、连接的管理
      Date创建报文的日期时间
      Pragma报文指令
      Transfer-Encoding指定报文传输主体的编码方式
      Upgrade升级为其他协议
      Via代理服务器的相关信息
      Warning错误通知

    2. 请求首部字段：从客户端向服务器发送请求报文时使用的首部。

      • 作用：是请求报文特有的，为服务器提供了一些额外信息，比如客户端希望接收什么类型的数据，如Accept头部。补充了请求的附加内容、客户端信息、响应内容相关优先级等信息。
      首部字段说明示例
      Accept用户代理可以处理的媒体类型Accept: text/html
      Accept-Charset优先的字符集
      Accept-Encoding优先的内容编码。浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法Accept-Encoding: gzip, deflate
      AuthorizationWeb认证信息
      Except期待服务器的特定行为
      if-Match比较实体标记（ETag）
      if-Modified-Since比较资源的更新时间
      Range实体的字节范围请求
      Refer实体的字节范围请求
      TE传输编码的优先级
      User-AgentHTTP客户端程序的信息

      请求报文示例：

      GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

    3. 响应头首部字段：从服务器端向客户端返回响应报文时使用的首部。

      • 作用：便于客户端提供信息。客服端在与哪种类型的服务器进行交互，如Server头部。补充了响应时的附加内容，也会要求客户端附加额外的内容信息。
      首部字段说明
      Accept-Ranges是否接受字节范围请求
      Age推算资源创建经过的时间
      ETag资源的匹配信息
      Location令客户端重定向至指定UPI
      Proxy-Authenticate代理服务器对客户端的认证信息
      WWW-Authenticate服务器对客户端的认证信息
      ServerHTTP服务器的安装信息。客服端在与哪种类型的服务器进行交互。
      Vary代理服务器的管理信息

    4. 实体首部字段：针对请求报文和响应报文的实体部分使用到的首部。

      • 作用：可以用实体头部来说明实体主体部分的数据类型，如Content-Type头部。补充了资源内容更新时间等与实体有关的信息。
      首部字段说明
      Allow资源可支持的HTTP方法
      Content-Encoding实体主体适用的编码方式
      Content-Language实体主体的自然语言
      Content-Length实体主体的大小
      Content-Location替代对应资源的URI
      Content-MD5实体主体的报文摘要
      Content-Range实体主体的位置范围
      Content-Type实体主体的媒体类型
      EXpires实体主体过期的日期时间
      Last-Modified资源的最后修改日期时间

  2. 数组和链表的区别

    数组链表
    数据结构：类型数据元素的集合节点的无序链接元素的集合
    使用索引直接找到元素从头开始找，所以链接列表的时候需要线性时间，速度也慢得多
    数组具有固定大小链接列表是动态和灵活的，可以扩展和缩小其大小
    数组中插入和删除等操作会占用大量时间链表插入、删除很快
    在编译期间分配内存在执行或运行时分配内存
    元素连续存储在数组中元素随机存储在链接列表中
    对内存的要求较少由于存储了额外的下一个和前一个引用元素，因此链接列表中需要更多内存

  3. 怎么判断是尾指针

    普通链表：p->next == NULL

    循环链表：p->next == HEAD

  4. 怎么判断链表是闭环

    快慢指针判断：让指针1每次向下移动一个节点，让指针2每次向下移动两个节点，然后比较两个指针指向的节点是否相同。如果相同，则判断出链表有环，如果不同，则继续下一次循环。

  5. vue的js函数为什么被称为第一公民

    函数式编程的特性：

    • 函数可以存储在变量中

    • 函数作为参数（高阶函数）

    • 函数作为返回值（高阶函数）

  6. vue的data的return有什么作用

    • 不使用return包裹的数据会在项目的全局可见，会造成变量污染

    • 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件

    • **后者的data是一个方法，**也就是：

      data:function(){
    return{
        
    }
}

  7. vue和react的区别

    • 监听数据变化的实现原理不同

      1. Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
      2. React 不精确监听数据变化：React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）可能导致大量不必要的VDOM的重新渲染

    • 数据流的不同

      1. Vue 组件 <--> DOM 之间的双向绑定

image

 2. React一直提倡的是单向数据流，他称之为 onChange/setState()模式

  • HoC 和 mixins

    1. Vue 中我们组合不同功能的方式是通过 mixin.Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数
    2. 在React中我们通过 HoC (高阶组件）。高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对React来说非常简单

  • 组件通信的区别

    1. Vue中有三种方式可以实现组件通信：

      - 父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而通过 事件的机制来处理子组件向父组件的通信

      - 子组件通过事件向父组件发送消息

      - 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。

    2. React也有三种：

      - 父组件通过 props 可以向子组件传递数据或者回调

      - 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多

    3. 综上：React 本身并不支持自定义事件，在 React 中我们都是使用回调函数的；Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件

  • 模板渲染方式的不同

    1. Vue是通过一种拓展的HTML语法进行渲染 / Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现
    2. React 是通过JSX渲染模板 / React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值、条件、循环等，都是通过JS语法实现的

参考：个人理解Vue和React区别

  1. 为什么移动端要使用react

    • React最大的好处就是省去了细粒度操作的繁琐，又有大工程项目的可维护性

    • React可以服务端渲染

    • 虚拟DOM

    • 组件化

    • 兼容性确实比vue好

    • 但暴力依赖diff算法

  2. elementUI相关问题

  3. 如何解决项目中遇到的困难

交易猫-20.9.15-笔试

  1. 请写一段原生JS，以深度优先的方式遍历下的所有节点并收集所有的
    元素。除此之外，还有没其他方式做到这一点？ 思路：使用递归遍历节点，深度遍历就是纵向遍历节点，并且每个节点只遍历一次。同时广度遍历也可以做到。
var root = document.documentElement//获取根节点
tree(root)
fuction tree(i,data){
	for(var i in data){
	if(data.hasChildNodes){
	tree(data.item(i))
}
}
}
  1. JS中，声明函数，通过var和通过function，有什么不同？
  • var声明的函数是一个表达式；function声明函数是一个语句
  • var声明的函数被调用时才会被初始化，而function则在程序执行前初始化完成
  • var的作用域在全局范围内
  1. 前端让元素垂直居中的方法有哪些？
  • 插入table，设置vertical-align:middle
  • height = line-height
  • 父元素设置postion:relative，子元素设置postion:absolute;top:50%;translateY(-50%)
  1. 如何使用 CSS3 的 animation 做逐帧动画（ sprite 动画），要求不依赖 js，举个例子。
.animation{
-webkit-animation-name: test;
animation-name:test;
-webkit-animation-duration:0.8s;
animation-duration;0.8s;
-webkit-animation-iteraation-count:1;
animation-iteraation-count:1;
-webkit-animation-timing-function:steps(2s);
timing-function:steps(2s);
}

  1. 在做手机页面滴时候，列举一下在css中定义尺寸可以使用的单位有哪些？简述他们的差异？ 1px = 1像素，相对于显示屏幕分辨率而言 em相对长度单位，长度不固定 1rem = 14px，相对于HTML根元素而言 1rpx = 0.5px，小程序专用，750个物理单位

  2. 如何使用 JS 将图片转成 base64 格式？

  • new一个XMLHttpRequest对象
  • 将此对象的responseType声明为blob类型，得到一个blob对象
  • 使用XMLHttpRequest对象的onload方法加载这个blob对象
  • new一个FileReader对象进行onloadend操作，最后的result结果便是base64格式

  1. 什么是JS闭包, 闭包有那些好处？ 闭包：函数和周围的状态的引用捆绑在一起形成闭包。 好处：可以在另一个作用域中调用一个函数的内部函数并访问到该函数的作用域内成员。

  2. 在JS中频繁的元素事件监听（动画、行为）有哪些优化的方法？

  • 设置一个setTimeout定时器定时监听行为
  • 尽可能少使用全局变量，例如使用let声明元素，保持在作用域内使用变量；重复使用的变量也可以事先保存到局部变量中
  • for循环语句变为递减迭代
  1. 在中如何清空画布？
  • 宽高被重新设置时
  • 使用当前节点的clearCanvas方法
  1. 使用过哪些工程构建工具？并在自己认知范围内，选一个你最喜欢的工具说出他的优劣？ grunt/gulp/vue-cli/webpack glup相弥补了grunt默认支持同步模式，使用异步模式必须使用this.async的缺点，它每个任务都必须是异步任务，大大提高了效率。 相比webpack小巧轻便，便于开发，并且相比vue-cli这样的专用脚手架工具，gulp可支持vue、react等

浩鲸云广州-9.22-面试+笔试

  • 基础部分
  1. ES特性：let、const / 箭头函数与普通函数的区别
  2. 详细说一下作用域
  3. promise的作用
  4. 循环的用法，比较几种循环有何差别（我乱说了内存泄漏，对自己很无语）
  5. 内存泄漏啥时候产生？什么时候会垃圾回收？垃圾回收的机制？垃圾的定义？
  6. 列举弹性布局的用法（我不会……）
  7. rem和em的区别？em的相对长度是相对谁？
  • 场景题
  1. 父组件向子组件传值的方式？
  2. 用户依次点击1、2、3按钮，同时期待依次渲染，但2渲染响应时间过长，造成了最后才渲染了2，这是什么原因？我们怎么解决它？ 面试官：创建一个异步队列

笔试：

  1. image
  2. image

image

9.24-小满面试

  1. 如何实现树形秒级渲染
  • 懒加载

9.29-建信金融

  1. 盒子是什么？包括了什么属性？ image
  • W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分 image
  • IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
  1. vue如何将新的内容渲染到浏览器
  • 数据响应式

  1. vue的生命周期？ lifecycle

  2. 父组件和子组件怎么通信（老是记不住啊） ①父传子props： image 第一步：在子组件里声明 props:['childmovies'] 用来接收父组件中要传递给子组件的 message 变量 第二步：在组件占位符上写数据绑定：<cpn v-bind:childmovies="message"></cpn>

②子传父 第一步：在子组件中监听自身的点击，并通过 emit()方法来触发事件‘‘‘this.emit() 方法来触发事件 ```this.emit('itemclick',item)第二步：在父组件中，通过 v-on 来监听子组件事件 <cpn @itemclick="cpnClick">```

  1. 跨域如何产生的？有什么解决跨域的方式？ 域名协议端口不一致。
  • 解决方式1：跨域资源共享（CORS），使用的CORS的前提是API必须支持，并不是任何情况下API都应该支持。如果同源部署就没有必要使用CORS
  • 解决方式2：Webpack Dev Server支持配置代理
  1. flex有什么属性？ Flex 是 Flexible Box 的缩写，意为"弹性布局"。
flex-direction：决定主轴的方向（即项目的排列方向）
flex-wrap：如何换行
flex-flow
justify-content
align-items
align-content
  1. ES6的新特性？箭头函数的this指向是什么？举个例子？
  2. 有做过性能优化吗？具体说说
  3. 异步和同步的区别？异步怎么实现呢？
  4. 闭包的原理？举例
  5. nodejs的传值绑定关系（？
  6. Cookie 和 Session 的区别

美团

image

avatar
文章
阅读
粉丝