全栈大前端

# 京东零售-基础平台

  • 1.你最近做的项目是哪些？举一个然后着重介绍一下业务和你说担任的角色及业绩

  • 2.XX平台的有哪些难点，你是怎么实现和解决这些难点的？事件调度中心的具体实现？

  • 3.谈一下性能优化？比如重绘和回流是什么并且如何优化避免？

  • 4.如果要实现一个弹窗组件，不用三方库你是如何设计并且实现的？

  • 5.Web Worker 和Service Worker 在项目中如何使用的？

  • 6.算法-快速排序的时间复杂度是多少？

  • 7.算法-如何判断一个链表是环形的？并且如何找到环的起点？

  • 8.网络-描述一下Https的形成全过程

  • 9.网络-TCP 的拥堵控制是什么？滑动窗口是什么？

# 网易云音乐

  • 1.ReactNative 和 Native 如何通信的？H5 与 Native 又是如何通信的？你们是如何封装的通信层

  • 2.JsBridge 的原理是什么？除了 JsBridge 还有什么通信方式？Url schema 和 JsBridge 有啥区别？

  • 3.React 的事件合成机制是怎样的？有哪些好处？React17 的事件有哪些变更？

  • 4.React 16 废弃了 15 里面哪些生命周期，为什么废弃这些？

  • 5.React 类组件与函数的区别？(答的越多越深越好)

  • 6.Node 如何开启多进程

  • 7.Egg 有几个进程？分别有什么作用

  • 8.你常用的数据库有哪些？它们之间有什么区别（MySql，Redis，Mongo，PG,ElasticeSearch）

  • 9.mySql 索引怎么建立使用

  • 10.Webpack 如何做到组件懒加载的？TreeShaking 是什么版本才有的？有哪些限制？commonjs 里面能用么？

  • 11.Js 闭包是什么？会产生什么问题？有哪些应用场景？

# 蔚来汽车

  • 1.微前端是什么？解决了什么应用场景？有什么明显的好处和作用？

  • 2.qiankun 基于什么封装的？Single Spa 是怎么实现的有哪些功能？Single 的 js 和 css 隔离机制是什么做的？

  • 3.你在项目中是怎么用 qiankun 的遇到了什么问题是？分别是怎么解决的？

  • 4.DNS 实现机制是怎么样的？如何优化 DNS 的速度？

  • 5.Https 是怎么保障安全的？为什么要用 RSA+AES 加密两者结合的好处是什么？

  • 6.浏览器什么时候会崩溃？有几种原因？分别是什么引起的？你是如何监控和优化的？

  • 7.浏览器内存溢出会有多少种出现的方式？怎么排查和解决问题？

  • 8.gzip 原理？他对图片类型文件压缩有效果么？

  • 9.React 17 都有哪些变化？有什么作用？

  • 10.React fible 架构有什么作用？链表结构和之前的树状结构有什么好处？链表是如何串联起整个 dom 的？顺序是什么？

  • 11.函数式编程是什么？有什么好处和作用

  • 12.setState 什么时候异步什么时候同步？异步是真的异步么？他的底层机制到底是什么？

  • 13.SSR 是什么有什么作用？同构的含义是？SSR 会带来什么问题？你是怎么优化的？

  • 14.Next 的服务端计算是怎么处理的？如果一个 SSR 应用有大量数据加载？你是如何优化？服务端怎么做？客户端又是怎么做？

# 哈罗单车

# 阿里-钉钉

  • postion 的属性
  • 文档流是什么？
  • get 和 post 请求区别
  • get 如何发送一个图片
  • Hybird WebView 权限控制的
  • WebView 安全漏洞及防护
  • Jsbrige 原理
  • xxApp 混合开发 难点及架构
  • 性能优化
  • cdn 外部引用的好处
  • Gzip 原理
  • 服务端渲染的优缺点

# 字节跳动

  • Jsbrige 原理

  • Jsbrige 加载速度检测过么？如何优化?

  • Hybird 性能优化

  • 手写 图片懒加载 （进入视口展示）

  • Node 模块机制

  • egg 怎么部署的，多进程如何通信

  • SSR 的流程

  • 首屏渲染 检测指标和具体的优化方式

  • 广告 sdk 嵌入网页如何防止 iframe 包裹覆盖

# 掌门集团

  • 1 像素边框问题怎么解决

  • SSR 渲染流程

  • Hybird jsBridge 的原理？url schema 有几种类型？

  • WebView 的优化有哪些？

  • Ios WkWebview 会有哪些问题？

  • 描述一个你做过或解决的一个项目的疑难杂症问题，你是怎么解决的

  • 从发送请求到服务段接收的请求 都经历过哪些过程？

  • 关于 http 能系统的讲一下么？

  • 301、302、304，401 、402 、403 分别代表什么意思？

  • 一道场景题 要求用面向对象思想去设计和实现

  • js 的原型和原型链机制，延伸 js 的继承机制是怎样的和 java 的继承机制有什么区别

  • typeScript 的装饰器 是什么原理 和 java 的注解语法有什么类似的地方？

  • 小程序的 登录机制是怎样的？

  • Electron 的深入使用和架构特性和 Android 以及 ReactNative ，Taro 这些有什么区别？

# 百度

  • 1、请分析以下代码执行结果
['1', '3', '10'].map(parseInt);
1
  • 2、请分析以下代码执行结果
var number = 10;
function fn() {
  console.log(this.number);
}
var obj = {
  number: 2,
  show: function(fn) {
    this.number = 3;
    fn();
    arguments[0]();
  }
};
obj.show(fn);
1
2
3
4
5
6
7
8
9
10
11
12
13
  • 3、请写出 inner 的实际高度。
<style>
  .outer {
    width: 200px;
    height: 100px;
  }
  .inner {
    width: 60px;
    height: 60px;
    padding-top: 20%;
  }
</style>
<div class="outer"><div class="inner"></div></div>
1
2
3
4
5
6
7
8
9
10
11
12

  • 4、手写一个深拷贝函数。

  • 5、HTTP 状态码 301 302 304 403。

  • 6、手写发布订阅模式 EventEmitter。

  • 7、手写一个多表查询的 sql 语句。

    当时用的是 left join 实现。

  • 8、react 高阶函数的写法，通常有哪几种。

    第一种是通过工厂模式直接 wrapper，第二种是通过组件反向继承的方式。

// 反向继承方式写法如下
class A extends B{
  render() {
    return (
      <div>component1 start</div>
        super.render()
      <div>component1 end</div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10

  • 9、delete 数组的 item，数组的 length 是否会 -1。

    不会。

  • 10、mongoDB 中的 BSON 是什么？

    B 代表二进制。

  • 11、关系型数据库和 nosql 查询效率谁高？

    关系型是 B+ tree 查询效率相对较高。

  • 12、使用 node app.js 开启服务，如何让它在后台运行。

    开启守护进程，在命令后加上 & 符号，表示开启守护进程来执行。

node app.js &

  • 13、尽可能写出更多数组副作用方法。

splice、push、pop、shift、unshift。

sort、fill、reverse。

# 百度三面：

  • 1、实现一个周岁函数，例如 fn('2018-8-8') 输出 1，只要是过了生日就 +1。

  • 2、不断优化刚才实现的函数，用尽一切办法，多问一问还有吗？跳出自己的固定思维圈。

# 阿里

  • 1、vue 双向数据绑定原理，依赖收集是在什么时候收集的？

    是在 created 生命周期之前，render 生成虚拟 dom 的时候。

  • 2、react hooks 原理是什么？

    hooks 是用闭包实现的，因为纯函数不能记住状态，只能通过闭包来实现。

  • 3、useState 中的状态是怎么存储的？

    通过单向链表，fiber tree 就是一个单向链表的树形结构。

# 爱奇艺

  • 1、浏览器渲染 js，html，css 的顺序。

  • 2、react dom diff 算法，list 比较首先比较的是什么？

    首先比较同层级元素，从左到右。

  • 3、为什么 react 要做成异步的呢？

因为 state 更新会导致组件重新渲染，在渲染后，才能把新的 props 传递到子组件上，所以即使 state 做成同步，props 也做不成，为了保证 state 和 props 的一致性。

为了性能优化，state 会根据不同的优先级进行更新。

为了让 react 更加灵活，如实现异步过渡，例如页面在切换的时候，如果延时很小，就在后台自动渲染了，渲染好之后再进行跳转；如果延时相对较长，可以加一个 loading。

  • 4、对象的 {…} 解构，是 rest 吗？

    是。

  • 5、自己实现一个 Symbol Interator 。

// 给一个对象设置Symbol Interator
var obj = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};
1
2
3
4
5
6
7
8
  • 6、options 头是在什么时候会进行发送。

检测服务器所支持的请求方法

CORS 中的预检请求

  • 7、sessionStorage 在两个 tab 窗口能共享吗？

    不能，和后端的 session 类似，每一个窗口对应一个会话层。

  • 8、localStorage 存放的只能是 string 类型。

    插入时需要将对象转换为字符串，读取时需要做 JSON.parse 转换。

  • 9、写一个 0-100 的正则表达式。

/^(\d|[1-9]\d|100)$/;

  • 10、linux 中怎么查看内存和磁盘。

top 命令，查看内存。

free 命令，查看内存。

ps aux 列出当前内存中正在运行的程序。

df 命令，查看磁盘。

  • 11、meta 标签用过吗，都用来做些什么？

seo 优化

viewreport 设置手机端适配

设置 charset 字符编码

模拟 http 标头字段

<meta name="keywords" content="电商,物流" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<!-- 模拟 html 缓存头部 -->
<meta http-equiv="expires" content="Sunday 22 July 2016 16:30 GMT" />
1
2
3
4
5

# 字节跳动2

  • 1、请分析以下代码执行结果
async function a() {
  var result = Promise.resolve();
  result.abort = function() {
    console.log('xxx');
  };
  return result;
}
var p = a();
p.abort();
1
2
3
4
5
6
7
8
9

  • 2、手写一个节流函数

    手写节流函数

  • 3、什么是装箱和拆箱

    装箱和拆箱操作，能够在值类型和引用类型中架起一座桥梁。换言之,可以轻松的实现值类型与引用类型的互相转换。

    装箱是将值类型转换为引用类型，拆箱是将引用类型转换为值类型。

  • 4、什么是委托

    粗略来说，一个类想执行一个方法，但它本身没有这个方法，这个方法在另一个类中，于是它“委托”那个类来帮它执行。

using System;
using System.Collections.Generic;
using System.Text;
namespace Delegate
{
    //定义委托，它定义了可以代表的方法的类型
    public delegate void GreetingDelegate(string name);
    class Program
    {
        private static void EnglishGreeting(string name)
        {
            Console.WriteLine("Morning, " + name);
        }
        private static void ChineseGreeting(string name)
        {
            Console.WriteLine("早上好, " + name);
        }
        //注意此方法，它接受一个 GreetingDelegate 类型的参数，该参数是返回值为空，参数为 string 类型的方法
        private static void GreetPeople(string name, GreetingDelegate MakeGreeting)
        {
            MakeGreeting(name);
        }
        static void Main(string[] args)
        {
            GreetPeople("yhlben", EnglishGreeting);
            GreetPeople("yhlben", ChineseGreeting);
            Console.ReadKey();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  • 5、手写一个 reduce 方法。
Array.prototype.reduce = function(reducer, initVal) {
  for (let i = 0; i < this.length; i++) {
    initVal = reducer(initVal, this[i], i, this);
  }
  return initVal;
};
1
2
3
4
5
6
  • 6、手写一个模板字符串替换方法
function template(html, obj) {
  return html.replace(/\{\{(.*?)\}\}/g, function(match, key) {
    return obj[key.trim()];
  });
}

template('{{name}}很厉name害，才{{ age }}岁', { name: 'jawil', age: '15' });
1
2
3
4
5
6
7

  • 7、看过 antd 源码吗，如何实现一个 Model，Message 组件？

    只能猜想到 React Portals，未曾看过源码，有待提升。

  • 8、如果要设计一套微前端架构，说说你的具体思路？如何实现主页面事件注册机制？如何解决多个 iframe 同时通信？

    需要有落地实战项目，不然很难答好，消息加锁等。

# 其他

最近两周出去面试遇到的面试题（前端初级、长更） (opens new window)

← 面试资料 →