前端面经总结——平安科技四轮技术面+一轮HR面

[easonhuang123]

前言

前段面试平安科技的前端开发，四轮技术面一轮hr面，成功拿到了offer，下面总结了技术面被问到的一些题目，大家可以参考一下～

一面

一面比较顺利，问的都是比较基础的东西

类型检测

列举日常使用识别对象与基本类型的方法？

• typeof
• instanceof
• object.prototype.toString.call()
• constructor.toString()

this指向

列举不同情境下的this指向？

• 直接调用，this指向window
• 在函数里调用，this指向window
• new 调用构造函数，this指向创建的新对象
• 在对象的方法里调用，this指向该对象

列举日常使用改变this的方法？

• new
• call
• apply
• bind

闭包

什么是闭包？

• 函数嵌套函数
• 可以引用外部变量
• 参数和变量不会被回收

闭包使用场景？

• 保护变量，只有闭包函数才可以访问
• 在内存中维持一个变量

EventLoop

描述事件队列的过程？

• js是单线程的，会出现阻塞问题，因此有了异步队列的出现
• 主进程同步执行任务，异步操作将添加到异步队列中
• 等候主进程执行完毕后再执行异步队列中的操作

什么是宏任务什么是微任务？

• 异步队列中有宏任务微任务之分
• 一次事件循环：先运行宏任务队列中的一个，然后运行微任务队列中的所有任务。接着开始下一次循环

哪些是宏任务哪些是微任务？

• 宏任务
  • setTimeout
  • setImmediate
  • setIntarval
  • requestAnimationFrame
  • I/O
  • UI rendering
• 微任务
  • process.nextTick
  • Promise.then
  • Object.observe
  • MutationObserver

http缓存

了解http缓存吗？

谈谈控制http缓存的头部字段？

• 强缓存
  • cache-control
  • Expires
  • Pragma
• 协商缓存
  • last-modified
  • Etag

走不同缓存策略的状态码了解过吗？

• 304
• 200

对象深拷贝

平时如何处理对象深拷贝？他们之间的区别？

• JQ
  • $.extend(true, {}, xxx)
• lodash.cloneDeep()
  • 解决ES6一些新的内置对象的拷贝情况
  • 解决环对象的情况
• JSON
  • 只能处理能够被JSON直接表示的数据结构
• messagechannel
  • 利用postMessage(obj)
• history API
  • history.replaceState(obj, document.title)
• notification API
  • new Notification(‘’, {data: obj, silent: true}).data

自己实现一个对象深拷贝方法的话要注意哪些问题？

• 对正则对象，日期对象，函数的特殊处理
• 对环形引用对象的特殊处理

vue

了解过vue插件的调用方式吗？自己写过vue插件吗？

• vue.use()

• 插件提供公开方法install

• 插件出现的形式

  • 添加全局方法或者属性

  • 添加全局资源：指令/过滤器/过渡等

  • 通过全局 mixin 方法添加一些组件选项

  • 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现

vue的数据绑定原理了解过吗？

• Object.defineProperty()

• 依赖集Dep

• 观察者watcher

webpack

描述一下项目中使用过的webpack的一些优化配置和相关插件？

• happypack
• dllplugin
• commons-chunk-plugin
• html-webpack-plugin
• extract-text-webpack-plugin
• optimize-css-assets-webpack-plugin
• uglifyjs-webpack-plugin
• imagemin-webapack-plugin
• copy-webpack-plugin

二面

二面也是问基础，也考察了项目经历和个人软实力

项目经历考察

做过的项目？有亮点？遇到了什么困难？如何解决的？你在里面是什么角色？

• 略

个人软实力考察

你平时的学习途径是什么？看过什么书？有木有自己造过轮子？

• 笔者看的书不算多，知识更多的是从网络上而来，而且平时也有写博客总结啥的。。马马虎虎算是蒙骗过关了-.-

你们团队有什么提高效率的方法和措施？有什么代码规范约定？

• 略

网络基础

说说Etag的缺点？

• 服务器需要计算Etag，会有性能损失

• 不同操作系统，web服务器对于ETag的计算方法也不同，当使用不同操作系统，不同类型的web服务器做负载均衡的时候，如果用ETag作为判断条件，在被负载均衡到不同服务器后，则很容易导致缓存失效。

协商缓存304发生了什么事情？

• 缓存过期后向服务器发起请求验证缓存是否有效，有效的话则返回304，不包含任何主体部分，直接使用缓存资源。

了解https的原理和过程吗？

• CA证书，非对称密钥对对称密钥加密，对称密钥加密对话内容

情景：公司的网站遇到劫持，页面在上面出现一些未知的内容，原因会是啥？

• 运营商劫持？不是

• 做https了吗？做了

• 做CSP了吗？做了

跨域了解过吗？为什么会存在跨域问题？为什么浏览器会有同源策略？跨域的方式有哪些？

• 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

• CORS

• JSONP

• iframe

  • document.domain
  • window.name
  • location.hash
  • postMessage

vue

vue的异步队列更新机制了解过吗？

• 基于JS的EventLoop

vuex怎么做到全局共享的？原理是什么？为什么要使用vuex？

• 全局注入vuex

• 内部使用vue进行数据绑定 

• 获取options中的store，假如是根组件，则赋值给$store；假如是子组件则获取父组件的$store，这样就保证所有组件引用同一份store实例啦。

JSBridge

项目中JSBridge是如何实现的？有哪几种方法？利弊是什么？

• 全局注入API

• 伪协议URL scheme-使用iframe

• 监听prompt/alert/console

事件

事件捕捉和冒泡了解是吗？事件委托呢？

移动端的点击事件有300ms的延迟，了解过吗？原因是什么？有采取过什么解决方法吗？

• fastClick使用原理

三面

三面应该是前端leader了，考察项目经历和一些实际场景的解决方案。

设计模式的了解

• 哗哗哗说了一大堆设计模式名字，，

闭包

闭包的使用情景？写一个你刚提到的单例模式，里面使用闭包实现

• 经过引导了一下，写出来了

promise

情景： 发起一个请求，若请求在1秒内成功返回，则显示loading菊花图直到1秒结束，若请求超过1秒返回，返回成功后loading菊花图直接消失

• new Date() 计时，计算时间差来判断菊花图是否关闭（这是我回答的也是最蠢的答案）

• 使用setTimeout优化一下（这是引导后的做法）

// 菊花图
let loading = true
// 请求标志
let pending = true
// 定时标志
let timer = true

setTimeout(() => {
    // 定时结束
    timer = false
    // 若请求已结束，则关闭菊花图
    if (!pending) {
        loading = false
    }
}, 1000)

p.then(() => {
    // 请求结束
    pending = false
    // 若定时已结束，则关闭菊花图
    if (!timer) {
        loading = false
    }
})

• 使用promise.all（经过引导后，原来面试官是想我从这个角度出发）

// 菊花图
let loading = true

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    }, 1000)
})

let p2 = function (resolve, reject) {
    return fetch(...).then((res) => {
        return res
    })
}

Promise.all([p1, p2]).then(() => {
    loading = false
})

四面

我猜应该是web端leader，，问了好多网络基础的知识，有部分和前面三轮重复的知识就不再赘述了。

网络基础

DNS协议了解过吗？DNS劫持了解过吗？

• DNS服务器通过多层查询将解析域名为IP地址

• 域名劫持是指在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则返回假的IP地址或者什么都不做使请求失去响应，其效果就是对特定的网络不能访问或访问的是假网址。

TCP握手过程了解过吗？说说TCP握手滑动窗口？

• 三次握手原理

• 滑动窗口真的不熟悉。。大家可以根据以下方面回答一下

  • 滑动窗口机制提供的功能，解决的问题

  • 发送方窗口分为4类，接收方窗口分为3类

  • 窗口缩放原理

谈谈TCP/IP？网络层了解过吗？数据链路层了解过吗？从传输层拿到IP地址后发生了什么？

• 网络层的协议
  • IP
  • ICMP
  • ARP 与 RARP

职业规划

• 略

最后

hr面没啥分享的，就是讨论一下职业规划，跳槽原因和期望薪酬，大家不要撒谎就行啦～

在hr面试通过后拿到了offer，整个过程下来还是比较顺利的，考察了很多基础知识，特别是网络方面的；有一点就是，全程没有问到数据结构和算法。

最后提醒一下大家一定要注重web基础知识和数据结构算法，这些几乎是每个公司每场面试的考察点噢～！

完。