FE面试

ahanpi
328 阅读4分钟

1.面试流程详解

1.0 轮数

  • 阿里：5~6轮，最后一面HR（小心），前五轮技术面试，周期1个月（电话面试）。
  • 腾讯：4~6轮，3~4次技术面试，HR（轻松），周期1个月。
  • 百度：4~5轮，1~3面，技术面试，HR（轻松），周期1~2天。
  • 头条：4轮，HR（轻松）1天，给一周时间。
  • 美团：4轮，一周结束战斗。

1.1 P6大致薪资

  • 头条（2-1）：T5~F0 * 15 + 300-500股（大小周）
  • 阿里（P6）：T8~T2 * 16
  • 百度（T5~T6）：T0 * 15 + 10w左右
  • 腾讯（2-3 ~ 3-1）：T8~T0

1.2 面试侧重点

  • 1面：CSS / 语法 / 框架 / 框架原理 / 性能优化 等
  • 2面：框架原理 / 网络安全 / 算法（必有） / 项目设计&工程化（必有） 等
  • 3面：算法（必有） / 项目设计&工程化（必有） / 项目经历（必有） 等
  • 4面：做过的项目经历（必有） / 新系统的设计题 等
  • 5面：沟通能力 / 价值观 等

2.简历

  • 个人项目：使用vue开发UI库：http://github/xxx
  • 项目： xx系统，使用xxx框架，并且自己增加了 loader/plugin/中间件/NPM/封装了xxx功能

3.前端从业类型

  • 3.1 PC开发（TO B / TO C 数量减少 / 数据图表 / 内部系统 / 工程效率系统 - 中台 / 做框架 / 持续集成）
  • 3.2 H5页面开发（TO C 减少）
  • 3.3 小程序（H5的业务迁移） / 公众号
  • 3.4 纯技术（框架weex / 微信SDK）
  • 3.5 融合开发（包括不限于hybrid / RN / flutter / electron）发版本（ios过审 / 版本残留 / 定时上线）
  • 3.6 Node.JS（中等需求量）

4. 需要的技能

  • 4.1 基础： CSS / 正则 / BOM / DOM / 闭包 / this / 节流防抖 / 数组方法
  • 4.2 语言：ES6 / TS / 各类DSL
    • 手写Promise
    • ascyn/await/const -> babel -> 产出
    • proxy -> babel -> defineProperty, []无法代理
    • TS -> 重载(Vue3.0)、泛型
  • 4.3 框架：React / Vue / Angular
      1. 用法篇：HOC ( @decorators ) / render-props / 生命周期
      1. Vue双向绑定 ( defineProperty 代理 get set / 数组无法代理 pop push拦截 )
      1. Vue/React vdom的实现： DFS复杂度，手写一个简单的diff
      diff(oldVnode, newVnode){ 
    patch() 
}
      1. 路由：Vue-Router/React-Router（hash 、pushState） onpopstate / onhashchange
      1. 数据流框架：redux / mobx / vuex （手写）
      1. React fiber架构的实现
      1. 跨端框架（weex / uniapp）
  • 4.4 服务端： Node.JS / 中间件
      1. 登陆、存储、并发、缓存、抽奖 - redis
      1. 中间件（尝试抽离一下）
  • 4.5 融合开发：Hybrid / React-Native / 小程序 / nw / electron
      1. Hybrid
      • jsbridge -> ios几种实现方式 -> android几种实现方式，小程序也是Hybrid的一种 -> JS和客户端发消息setData
      • 看底层SDK
      wx.getLocation = (...args) => {
    callMethod(...args);
}
callMethod() {
    window.messageHandler.xxx.call('just an example');
}
      1. RN/小程序的渲染逻辑，渲染层和逻辑JS不在一起
  • 4.6 工程化： xxx-cli / webpack / eslint / NPM / 单测 / 流水线
      1. 前端工程化 -> webpack -> loader/plugin规约的一些通用小功能
      1. NPM -> package.json
      "scripts": {
    "build": "npx webpack",
    "precommit": "./node_modules/.bin/eslint src",
    "test": "echo 'test'"
},
// 执行前先执行eslint检查代码
  • 4.7 基础技能： 设计模式 / 算法 / 性能优化 / 网络
    • 1.网络：
      • http：缓存系列
      • 'Cache-Control', 'expire' -- 200 （客户端拦死）
      • 'Etag' + 'last-modify' -- 304 （会向服务端发起）
      • 200 + 304 = hash
      • cookies：cookile / set-cookie
      • location
      • transfer-encoding：bigpipe(facebook)
    • 2.性能优化
      • react.memo -> react-router
      • （动态懒加载组建的技术）code split, react.lazy / 动态组件
      • SSR, 降级方案，在检测到某一个QPS量级时，退化为普通前端方案
    • 3.算法
      • 动态规划（给数组求最大最小，背包的变种）
      const dp = arr => {
    let res = [].concat(arr);
    let arrLen = arr.length;
    for (let i = 0; i < arrLen; i++){
        for ( let j = 0; j < arrLen; j++){
            if (arr[i] ( > or < ) arr[i-j] + xxx){
                arr[i] = 重新赋值;
            }
        }
    }
}
      • 搜索算法（dfs深度->递归或栈解决, bfs->队列）
      const dfs = arr =>{
    if (shot(xx)){   //最终终结条件
        return xxx;
    }
    if (judge(xxx)){
        // 递归
        dfs();
    }
}

      const bfs = () => {
    while (queue.length) {    // 队列不空时
       const point = queue.shift();  // 某个临界值 
       for (可达的点 in point) {
           queue.push(point);
           if(shot(可达的点)) {
               return 可达的点;
           }
       }
    }
}
      • 排序
  • 4.8 图形： SVG / Canvas
  • 4.9 软技能：技术方案 / 文档 / 调研 / 推动能力（出方案出文档出流程）
  • 4.10 编码能力：风格与最佳实践，如函数式等

5. 创新与自驱动产出

  • 1.准备一些做好的xxx-loader，或者xxx库（比较适合做中台类型的项目）
  • 2.准备一些runtime的插件，比如做一个UBB的js-parser，还能兼容 rn/flutter/小程序等
  • 3.多学一些非js的东西，比如 shell / java等
  • 4.做一些中间件，比如登陆业务 / 内部的业务的RPC吊用或特殊格式解析

1. 技能模型

  • 编程能力 => 解决逻辑难，写不出来的问题（刷题）
  • 架构能力 => 解决的是系统大，写不出来的问题，不能是简单的组装，包含对复杂系统分析，设计，以及对代码协同管理（读源代码）
  • 工程能力 => 解决的是人的问题，人多协作的问题（争取资源 or 选择更合适的工作）

2. 面试

avatar
文章
阅读
粉丝