收录字节面试题：
一面
1.说一下浏览器缓存？
💁♀️ 浏览器缓存
2.cookie 与 session 的区别
Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式
https://zhuanlan.zhihu.com/p/27561547
3.浏览器如何做到 session 的功能的。
其实就是考察 http 怎么处理无状态是怎么处理的，具体可见 COOKIE 和 SESSION 有什么区别？里面的答案。
4.解释一下：csrf 和 xss
XSS：恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。
CSRF：CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。
详见：前端安全面试题
5.怎么防止 csrf 和 xss
详见：前端安全面试题
6.CORS 是如何做的？
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。
7.对于 CORS ，Get 和 POST 有区别吗？
其实想考察的就是什么时候会有预检请求(option 请求)。
8.了解 HTTPS 的过程吗？
推荐浪浪的 深入理解 HTTPS 工作原理
9.webpack 如何做性能优化
webpack 做性能优化主要是考虑打包体积和打包速度。
体积分析用 webpack-bundle-analyzer 插件，速度分析用：speed-measure-webpack-plugin 插件。
打包速度优化瓶子君的：玩转 webpack，使你的打包速度提升 90%。
10.跨域的处理方案有哪些
常用的：jsonp、CORS、nginx 代理，完整的大概是九种，可见：九种跨域方式实现原理（完整版）
11.es module 和 commonjs 的区别
高频题，考察 ES6 模块和 CommonJS 模块 的区别。关键点：1. 前者是值的引用，后者是值的拷贝。2.前者编译时输出接口，后者运行时加载。
推荐文章：前端模块化：CommonJS,AMD,CMD,ES6
12.react 里如何做动态加载
React.lazy ，另外通过 webpack 的动态加载：import() 和 ensure.require
13.动态加载的原理是啥，就是 webpack 编译出来的代码
讲道理 webpack 动态加载就两种方式：import()和 require.ensure，不过他们实现原理是相同的。
我觉得这道题的重点在于动态的创建 script 标签，以及通过 jsonp 去请求 chunk，推荐的文章是：webpack 是如何实现动态导入的
14.笔试题：页面结构包括页头（永远在顶部）、主体内容、页脚，页脚永远在页面底部（不是窗口底部），即内容高度不够时，页脚也要保证在页面底部
常规题，考察基本的布局
15.笔试题：写 new 的执行过程
我们先来看，new 实现的功能
// Otaku 御宅族，简称宅
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'games';
}
// 因为缺乏锻炼的缘故，身体强度让人担忧
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function() {
console.log("i, am "+ this.name);
}
var person = new Otaku("kevin", 18);
console.log(person.name); //kevin
console.log(person.habit); //games
console.log(person.strength); //60
person.sayYourName(); //i, am kevin
我们可以看出，返回一个新得对象 person，然后person可以访问构造函数 Otaku 的属性 和Otaku.prototype的属性。
new 的执行过程大致如下：
- 创建一个对象
- 将对象的 __proto__ 指向 构造函数的 prototype
- 将这个对象作为构造函数的 this
- 返回该对象
根据思路，这样我们就可以手写一个自己的new~
funtion myNew() {
let obj = new Object();
let Contructor = [].shift.call(arguments);
obj.__proto__ = Contructor.prototype;
let ret = Construct.apply(obj, arguments);
return typeof ret === 'object' ? ret :obj;
};
//或者
function myNew (Con, ...arges) {
var obj = Object.create(Con.prototype);
let res = Con.apply(obj, ...arges);
return typeof res === 'object' ? res: obj;
}
16.笔试题：写一个处理加法可能产生精度的函数，比如 0.1 + 0.2 = 0.3
思路：对于浮点数在底层处理是有问题的，所以目的就是想办法将所以的浮点数转化为整数进行处理，同时乘以一个倍数(A)，然后加起来后再除以这个倍数(A)，这个倍数应该是两个数中最小的那个数的倍数，比如 0.1 + 0.02 ,那么应该同时乘以 100，变为 10 + 2，然后再将值除以 100。
17.1000000000 + 1000000000 允许返回字符串 处理大数
大数问题就是通过字符串来处理，从后往前加，然后处理进位的问题。
二面
1.聊项目
项目基本是问：
项目难点以及怎么解决的
项目有哪些亮点？
2.写一个 es6 的继承过程
这个题我觉得出得很好，很考察基本功。
// 这个是要实现的方法
createClass = fun(sons, super) {
// TODO
return fn;
}
// 这是个 es6 的一个例子，要实现 extends 的功能。
class Man extends Human {
cons (args) {
super(args)
// xxxxx
}
speak() {
console.log('')
}
}
3.写一个大数相乘的解决方案。传两个字符串进来，返回一个字符串
function multi(str1, str2) {
}
这道题跟一面的时候思路差不多，只是进位的时候不一定是 1。
三面
1.聊项目
2.写一个防抖函数
3.算法题:https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/
小节
字节果然是出了名的考算法题比较多的，基本每面都会算法题和编程题，对编程能力比较看重吧。
讲道理一面还是比较常规的，二三面因为都是团队 leader 和更高级别的，问的技术细节也比较少了，重点考察一些技术方案和项目的问题。
转载：桃翁
原文详见：http://www.taoweng.site/index.php/archives/321/
加油，奥里给~~
