霖呆呆的近期面试128题汇总(含超详细答案)

前语

你盼国际，我希望你无bug。Hello 我们好！我是霖呆呆！

哈哈，这是一篇面试总结文章，抱愧，webpack和HTTP系列的先暂缓一下更新哈，Sorry~

这篇文F N V y &章是呆呆自己近期的一些面试汇总，阅历是2年，算了一下有128道，根柢都写了比较完善的答案，就6 6 8 S ) ?算没有写也有举荐一些好的文章链接，文章篇幅较大，拾掇总结也花费了许多的时间和汗水，标题也是根据公司规划的大小从易到难，算是见证了呆呆面试进3 ; | { C D程中的缺少与成长吧。还希望能协助到正在一起努力求生存的小伙伴们。

其他，看到标题了吗？"掘金技术征文"，嘻嘻，要不要考虑帮这么"用心"的呆呆拿拿大奖呢？定心定心，要真成了利益少不了你们。

"风云没暂停我宣告奔跑的含义"

"这不是背叛我只是淋了一V | t场雨"

全部文章内容都已拾掇至 github.com/LinDaiDai/n… 快来给我Star呀~

(因为近期面的首要都是一些深圳的中小公司，他们也还在招聘中，所以不便当透露公司称谓，还请我们了解…)

深圳某做海外加速器公司

4月22日上午

1. DIV+C: Y I l E t /SS布局的利益

代码精简，且结构与样式别E 5 O离，易于保护
代码量削减了，削减了许多的带宽，页面加载的也更快，提升了用户的体会
对SEO搜索引擎更加友爱，且H5又新增. = c ? . 0 `了许x @ 2 | m i J O G多语义化标签更是如此
容许更多炫酷的页面作用，丰盛了页面
符合7 l { u | J , c OW3C标准，保证网站不会因为网络使用的升级而被淘汰

缺点:
不同阅览器对web标准默许值不同，所以更容易呈现对阅览器的兼容性问题。

2. 怎样处理a标点击后hovn g Q C c = ^ aer工作失效的问题?

改动a标签css特征的摆放次第

只需求记住LoVe HAte原则就可以了：

link→visited→hover→active

比如下面差错的代码次第：

a:hover{
color: green;
text-decoration: none;
}
a:visited{ /* visited在hover后$ c n边，这样的J q $ a %话hover工作就失效了k j c 9 K z */
color: red;
text-decoration: none;
}

正确的做法是将两个工作的方位调整一下。

留心⚠️各个阶段的意Y b C义：

a:liJ . 1nk：未访问时的样式，一般省略成a
a:visited：现已访问后的样式
a:hoverw y Q：鼠标移上去时的样式
a:active：鼠标按下时的样式

3. 点击一个input依次触发的工作

const text = document.getElementById('` R ? / @text& 9 R');
text.onclick = function (e) {
console.log('onclick')
}
text.onfocus = function (e) {
console.+ % 3 , ^ X Nlog('onfocus')
}
text.onmousedoj | $ Q 1 Iwn = function (e) {
console.log('onm? T [ { ; Zousedown')
}
text# B # ].onmouseenter = function (e) {
console.log('onmouseenter')
}

答Z w n } y a案：

'onmouseenter'
'onmousedown'
'on4 0 5 ( E }focus'
'onclick'

4. 照应式的利益

对某些数据的批改就能自动更新视图，让开发者不用再去操作DOM，有A : g更多的时间去考虑事务逻辑。

5. Vue的长4 ; G } )处及缺点

首要Vue最中心的两个特征，照应式和B } q W Q 9 2组件化。

照应式：这也就是vue.js最大的利益，通过MVVM思维结束数据的双向绑定，通过虚拟DOM让我们可以用数据来操作DOM，而不用去操作实在的DOM，提升了功用。且让开发者有更多的时间去考虑事务逻辑。

组件化：把一个单页使用中的各个模块拆分到一个个组件当中，或许把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的利益就是，进步了开发功率，便当重复运用，使项目的可保护性更强。

虚拟DOM，当然，这个不是vue中独有的。

缺点：根据政策配备文件的写法，也就是optionF m l . vs写法，开发时不利于对一个特征的L k 3查找。其他一些缺点，在小项目中: P f # r O } 1感觉不太出什么，vuex的魔法字符串，对ts的支撑。兼容性上存在一些问题。

其他还有议论区掘友黎生供应的一些缺点：

不利于搜索引擎优化。
导航不行用，假设必定要导航需求自行结束跋涉、撤离。（由所以单页面不能用阅览器的跋涉撤离功用，所以需求自己建立仓库处理）。
初度加载时耗时多。

6. Vue中hash方法和history方法的差; I I G ^ 7 u . f异

最明显的是在闪现上，hash方法的URL中会夹杂着#号，@ : 4 @ *而h| S _ y L V } H .istoE R b _ { Try没有。
Vue底层对它们的结束方法不同。has= 1 Th方法是依托onhashchK n [ x O Q ]ange工作(监听location.hash的改动)，而history方法是首要是依托的HTML5 history中新增的两个方法，pushStat` j R R n e _ C Ee()可以改动url地址且不会发送央求，replaceState()可以读取历史记载c Z – ~ v栈,还可以对阅览器记载进行批改, Q 4 R }。
确实正需求通过URL向后端发送HTTP央求的时分，比如常见的用户手动E _ y m & % *输入URL后回车，或许是改写(重启)阅览器，这时分history方法需求s S {后端的支撑。因为history方法下，前端的URL有必要和实践向后端发送央求的URLN - 0 ~ s % S !一起，例如有一个URL是带有途径pat? O I n F T o yh的(例如www.lindaidai.wak m H J H . Hng/blogs/id)，假设后端没有对这个途径做处理的话，就会回来404差错。所以需求后端增加一个掩盖全部情况的候选资源，一般会协作前端给出的一个404页面。

hash:

window.onhashchange = functiom ( o } G 3n(event){
// location.hash获取到的是包括#号的，如"#heading-3"
// 所以可以截取一下
let hash = location.hash.slice(1);
}

7. react的结束原理？有什么优缺点？

8. react的控制组[ , ) 8 , K件和非控制组件

深圳某电商公司

4月K Q 2 / ! V z Q !22日下午

1. null和undefined的差异

null标明一个"无"的政策，2 W | p 4 [也就是该处不该该有值；而undefined标明未定义。
在转化为数字时作用不同，NumS ` q , m c X jber(null)为0，而undefined为NaN。

运用场景上：

null：

作为函) w W L O数的参数，标明该函数的A Y = p @参数不是政策
作为政策原型链的终点

undefined? 5 R % ^:

变量被声明晰，但没有赋值时，就等于uW i o ] + _ X yndefined
调用函数时，应该供应的参数没有供应，该参数等于undefined
政策没有赋值特征，该特征的值为undefined
函数没有回来值时，默许回来h ; & J J B W I Iundefined

2. 冒泡排序算法和数组去重

冒泡排序：

function bubbleSort (v X U 5 . @ Barr) {
for (let i =c y S _ W . L D N 0; i &lS , P Q dt; arr.length; i++) {
let flag = trueN 9 J;
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
flag = false;
let temp = arr[j];
arr[j] = arB J W e = T H +r[j + 1];
arr[j + 1] = temp;
}
}
if (flag) breaC  A W R Bk;
}
return arr;
}

这个是优化往后的冒泡排序。用了一个flag来优化，它的意思是：假设某一次循环中没有交流过元素，那么意味着排序现已结束了。

冒泡排序总会履G = 3 M P F h K H行(N-1)+(N-2)+(N-3)+..+2+1趟，但假设工作到当中某一趟时排序现已结束，或许输入的是一个有序数组，那么后边的比较就都是剩下的，为了避免这种情况，我们增加一个flag，判别排序是否在半途就现已结束（也就是判别有无发生元素交流）

数组去重：

Arrayt ? s | 4 + ? k s.froq * ; / G $ j v fm(new Set(arr))
[...new Set(arr)]
for循环嵌套，运用splice去重M 5 * o : G i
新建数组，运用indexOf或许includes去重
先用sort排序，然后用一个指针从第0位初步，协作while循环去重

当然还J ? o ; E @有许多，例如用filter、reduce、Map. 7 X j _ ! }、Object等，具体可以看：

JavaScript数组去重(12种方法)

ArrayV ` $.from(new Set(arr))或[...new Set(arr)]

var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(Array.from(new Set(arr)))
// console.log([a = n * l | : l...new Set(arr)])

for循环嵌套，运用spt = P Hlice去重：

funci 5 Y J ! E 9 2tion unique (origin) {
let arr = [].concat(origin);
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
ifo (  (a# H c  S * w W prr[i] == arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
var arr = [1,1= * D,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))

新建数组，运用includes去重:

function u( f O - n E Onique (arr) {
let re- X w l {s = []
for (let i = 0; i < arr.lengtp S V g z :h; i++) {
if (!res.in% ; 5 # r *cludes(arr[i])) {
res.push(arr[i])
}
}
r* = , 6 jeturn res;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))

先用sort+ 3 b排序，然后用一个指针从第0位初步，协作while循环去重：

function unique (arr) {
arr = arr.sort(); // 排序之后的数组
let pointer = 0;
while (arr[poinm [ ^ter]) {
if (arr[po9 O q q &in3 ^ Rter] != arr[pointer + 1]) { // 若这一项和下一项不相等则指针往下移
pointer++;
} else { // 否则删除下一项
arr.splice(po9 e inter + 1, 1);
}
}
return arr;
}
var aS 7 P } prr = [1,1,k D E i /2,5,6,3,5,5,6,8,9,8];
console.log(unique(arr))

深圳某云产品公司

4月23日上午

（从这家公司初步面试稍微有些难度了，面试官小哥哥人也很好，刚初步是一个高冷男神，但是在呆呆的激烈答复下也总算仍是, 1 s对我h ; # B X W A露出了浅笑，还说他也是掘友，有看过我的文章…掘友真是无处不在啊，感动）

1. 描绘一下Promise

这道题我会先大约介绍一下Promise：

Promise 是一个政策，它代表了O t P c ~一个异步操作的毕竟结束或许失利。因为它的then方法和catch、finally方法会回来一个新的Promise所以可以容许我们链式调用，T e W d s % ( G处理了传统的回调阴间问题。

再说一下then以及catch方法：

(此处我是直接拿我之前的一篇文章《45道Promise题》那里的$ / 4总结)

Promise的情况一经改动就不能再改动。(见3.1)
.th( | ~ Y 3 I r D Ten和.catch都会回来一个新的Promise。(上面的1.4证明晰)3 z ` l q C h
catch不管被联接到哪里，都能捕获上层未捕捉过` L A 4的差错。(见3.2)
在Promise中，回来任意一个非 promise 的值都会被包裹成 promise 政策，例如return 2会被包装2 1 | : D W N 2 d为return Promise.resolve(2)。
Promise 的g D U .then 或许 .catch 可以被调用多次, 但假设Prom/ ! c g ; } g Bise内部的情况一经改动，并且有了一个值，那么后续每次调用.then或许.catch的时分都会直接拿到该值。(见3.5)
.then 或许 .catch 中 return 一个 error 政策并不会抛出差错，所以不会被后续的 .catch 捕获。(见3.6)
.then 或 .catch 回来的值不能是 promise 自身，否则会形成死循环。(见3.7)
.then 或许 .catch 的参数希望是函数，传入非函数则会产r k E 9生值透传。(见3.8)
.then方法是能接纳两个参数的，第一个是处理成功的函数，第二个是处理失利的函数，再某些时分你可以以为catch是.then第二个参数的简练写法。^ @ 2 S(见3.9)
.finally方法也是回来一个Promi9 o [ N F ? fse，他在Promise结束的时分，不管作用为resolved仍是rejected，都会实行里面的回调函数。

其他也W S E t :可以说一下finally方法：

.finally()方法不管Promise政策毕竟的情况怎样都会实行
.finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是无法知道Promise毕竟的情况是resolved仍是rejected的
它毕竟回来的默许会是一个上一次的Promise政策值，不过假设抛出的是一= O ` o : =个失常则回来失常的Promisy L [e政策。

毕竟可以说一下all以及race方法：

Promil x A j 2se.all()的作用是接纳一组异步任务，然后并行实行异步任务，并且在全部异步操作实行完后才实行回调。
.race()的作用也是接纳一组~ I E异步任务，然后并行履0 ! Z 0行异步任务，只保留取第一个实行结束的异步操作的作用，其他的方法仍在实行，不过实行作用会被扔掉。
Promise.all().then()B ~ j作用中数组的次第和Promise.all()接纳到的数组次第一起。
all和race传入的数组中假设有会抛出失常的异步任务，那么只需最早抛出的差错会被捕获h L –，并且是被then的第二个参数或许后边的catch捕获；但并不会影响数组中其它的异步9 [ 1 W / { 8 K任务的履? 0 _ C行。

2. Promise.all中假设有一个抛出失常了会怎样处理

这个，在上一题现已说到了：

ad m n r ll和rac; X T 6 K Qe传入的数组中假设有会抛出失常的异步任务，那么只需最早抛出的差错会被捕获，并且是被then的第二个参数或许后边的D m # a F ocaK ] ` U J R i Gtch捕获；但并不会影响数组中其它的异@ & y ) 6 % I G步任务的实行。

3. Promise为什么能链式调用

因为它的then方法和catch、finally方法会回来一个新的Promise所以可以容许我们链式调用

4. 描绘一下EventLoop的履跋涉程

一初步整个脚本作为一个宏任务履% 1 b行
履跋涉程中J P [ `同步代码直接实行，宏任务进入宏任务队伍m ! – ^，微任务进入微任务队伍
当时宏任务实行完出队，查s V ! + T看微任务列表，有则依次实行，直到全部实行完
实行阅览器UI线程的烘托作业
检查是否有Web WorkerL . I任务，有则实行
实行完本轮的宏任务，回P k J Y到2，依此循环，直到w y @ g宏任务和微任务队伍都为空

（具体可以看这儿：juejin.im/post/5eg ( = l $ r C U i58c6…

5. docoment,window,html,body的层级联络

层级联络：

window > document &h T P t ] u K -gt; html > body

window是BOM的中心政策，它一方面用来获取或设置Q v % a z H ?阅览器的特征和行为，另一方面作为一个全局政策。
docu= u 9 ( x : N ument政策是一个跟文档相关的政策，具有一些操作} , c G C H & (文档内容的功用。但是方位没有window高。
html元素政策和document元素政策是归于html文档的DOM政策，可以以为就是html源代N Z 2 _ M C 9 0码中那些标签所化成的政策。他们跟div、select什么政策没有根柢差异。

（我是这样记的，整个阅览器中最大的必定就是窗口window了，那么进来的我不管你是啥，就算你是document也得给我4 ! X /盘着）

6. addEventListener函数的第三个参数

第三个参数涉1 . ,及到冒泡和捕获，是true时为捕获，是false则为冒泡。

或许是一个政策{passive: true}，针对的是Safari阅览器，阻止/翻开运用翻滚的时分要用到。

7. 有写过原生的自定义工作吗

运用Event
运用customEvent （可以传参数）
运用document.creatw # r y V n Q neEvenu m j f w V ; K Yt('CustomEvent')和R 8 2 ^initEvent()

创建自定义工作

原生自定义工作有三种写法：

运用Event

let myEvent = new Event('event_name');

运用customEven# C Pt （可以传参数）

let myEvent = new CustomEvent('event_name', {
detail: {
// 将需求传递的参数放到这儿
// 能O % X *够在监听的回调函数中获取到：event.dek = S z s Mtail
}
})

运用document.createEvent('CustomEvent')和t g GinitEve6 M 8 $ 5 s l Xnt()

leY  . - ! / 8 d -t myEvent = document.createEvent('CustomE5 7 fvent');// 留心这儿是为'CustomEvent'
myEvent.initEvent(
// 1. event_name: 工作j ] n k 2称谓
// 2. canBubble: 是否冒泡
// 3. cancelable: 是否可以撤销默许行为
)

createEvent：创建一个工作
initEvent$ j ~ f c Q z 8 5：初始化一个工作

可以看到，initEvent可以指y 2 – G c h ] [ k定3个参数。

（有些文章中会说还有第四个参数detail，但是我检查了W3C上并没有这个参数，并且实践了一下也没有作用）

工作的监听

自定义工作的监听其实和一般工作的相同，运用addEventListener来监听：

button.addEventListener('event_name', function (e) {})

工作的触发

触发自定义工作运用dispatchEvent(myEvent)。

留心⚠️，这儿的参数是要自定义工作的政策(也就是myEvent)，而不是自定义工作的称谓('myEvent')

案例

来看个案例吧：

// 1.
// let myEvent = new Event('myEvent');
// 2.
// let myEvent = new CustomEvent('myEvent', {
//   detail: {
//     name: 'lindaidai'
//   }
// })
// 3.
let myEvent = document.createEvent('CustomEvent');
myEvent.initEvent('& w K .  ?myEvent', true, true) / 4 !)
let btn = documB b | Ient.getElementsByTagName('button')[0]
btn.addEventListeX $ 1 bner('myEvent', function (e) {
console.log(e)
co* J 0nsole.log(e.detail)
})
setTimeout(() =&5 / J N y P q M Pgt; {K M # 8 z  n % i
btn.dispatchEvent(myEvent)
}, 2000)

8. 冒泡和捕获的具体进程Z | p X F %

冒泡指的是：当给某个政策元素绑定了工作之后，这个工作会依次在它的父级元素中被触发(当然条件是这个父级元素也有这个同称谓的工作，比如p ~ g ? d s o C ?子元素和父元素都绑定了click工作就触发父元素的click)。

捕获则是从上[ 0 ^ I q _ ; t层向基层传递，与# K n ` L – ^ j冒泡相反。

（十分L ! v x I w ?好记，你就想想水底有一个泡泡从下面往上传的，所所以冒泡）

来看看这个比如：

<!-- 会依次实行 button li ul -->
<ul onclick="alert('ul')">
<li onclick="alert('li')">
<button onclick="aT Z ? ? Wlert('bP 2 p 0 4utton')">点击</button>
</li>
</ul>
<script>
window.addEventListener('click', function (e) {
alert('` P k X N ] & -window')
})
document.addEventListener('click', function (e) {
aleL _ : f B u v & _rt('docuN K * v  1 Ement')
})
</script>

冒泡作用：button > li > ul > document > window

捕获作用：window > document > ul &] [ ` A o ugt; li &E c ) V d q xgt; button

9. 全部的工作都有冒泡吗？

并不是全部的工作都有冒泡的，例如以下工作就没有：

onblur
onfocus
onmouse d 5en8 t m W jter
onmouseleave

11. 描绘下原型链

12. 手写new

function myNew (fn, ...args) {
let instance = Object.cr: ` 2eate(fn.prototype);
let result = fn.call(instance, ...args)
returA Z D 9 un typeof result === 'object' ? resultA $ j [ L # & : instanv 9 c / . w m 0 Jce;
}

13. typv E m N ~ neof和instanceof的差异

typeof标明是t ! q ] , R对某个变量类型的检测，根柢数据类型除了null都能正常的闪现为对应的类型，引用类型除了函数会闪现为'function'，其它都闪现为object。

而instanceof它首要是用于检测z k p P p c某个结构函数的原型政策在不在某个政策的原型链上。

14. typeof为什么对null差错的闪现

这只是 JS 存在的一个悠长 Bug。在 JS 的J E d Y a G初步版别中运用的是 32 位系统，为了功用考虑运用O : x # s W ^ S *低位存储变量的类型信息，000 开始代表是 P N 9 m @ X /政策但是 null 标明为全零，所以将它差错的判别为 object 。

15. 具体说下instanceof

instanceof它首要是用于检测某个结构函数的原型政策在b t _ H t 9 } 0 不在某个政策的原型链上。

算了，直k l K = l q 7 0接手写结束吧：

funa # P * P ( _ : Tction myInstanceof (left, right) {
let proto = Object.getPrototypeOf(left);
while (true) {
if (proto === null) return false;
if (proto === r) D Z V | - C t [ight.prototype) return true;
proto = Object.getPrototypeOf(proto)
}
}

16. 一句话描绘一下this

指向. b J * ! j I毕竟调用函数的那个政策，是函数工作时内部} ) T + + i 6 F 1自动生成的一个内部政策，只能在函数内部运用

17. 函数内D u G的this是在什么时分确认的@ 9 – G I Q？

函数调用时，指向毕竟调用的那个政策

18. apply/call/bind的相同和不同

19. webpack中的loader和plugin有什么差异

(答案参看童欧巴的一篇webpack面试文章哦：「吐血拾掇」再来一打Webpack面试题(继续更新))

lD v ] w # X # S %oader它是一个转化器，只专心于转化文件这一个范畴，结束紧缩、打包、言语编译，它只是是为了打包。并且工作在打包之前。, w D 8 o h r :

而plugin是一个扩展器，它丰盛了webpack自身，为其进行一些其它功用: ? ~ $ Q T 3 / W的扩展。它不局限于打包，资源的加载，还有其它的功用。所以它是在整个编译周期都起作用。

20. HTTP和TCP的不同

HTTL t t B 1 h i % dP的职责是去定义数据，在两台核算机彼此传递信息时，HTTP规则了每段数据以什么方法表T V v A y F d达才是可以被其他一台核算机了解。

而TCP所要规则的是[ e 4数据应该怎样a # 1 O B # w h传输才干安稳且高效的传递与核算机之间。

(还可以再扩展)

21. TCP和UDP的差异

TCP是一个面向联接的、, K y可靠的、根据字节省的传输层协议。
UDP是一个面向无联接的传输层协议。

TCP为什么可靠，是因为它有三次握手来保证两边都有接受5 h d e 1 `和发送数据的才能。

字节省服务：将大块数据分割为以报文段为单位的数据包进行处理

22. 介绍一下虚拟DOM

虚拟7 ( W & v d +DOM本质就是用一个原生的JavaR z 2 v Z e _Script政策去描绘一个DOM节点。是对实在DOM的一层笼统。

因为在阅览器中操作DOK r E ` `M是很贵重的。一再的操@ 5 P F ` p U M作D3 x 9 v * ~ ^ DOM，会发生必定的功用l . ( r问题，因此我们需求这一层笼统，在patch进程中尽或许地一次性将差异更新到DOM中，S Q 5 R U [ K这样保证了DOM不会呈现功用很差的情况。

其他还有很重要的一r ) @ n点，也是它的规划初衷，为了更好的跨平4 X + d Utai，比如Node.js就l G {没有DOM,假设想结束SSR(服务端烘– ; { 7 B y托),那么一个方法就是凭仗Virtual DOM,因为Virtual DOM自身是JavaScript政策。

Vue2.x中的虚拟DOM首要是学习了snabbdom.js，Vue+ r 3 r3中学习inferno.js算法进行优化。

23. 盒模型

24. 输入URL到页面的呈现

看三元的《(1.6w字)阅览器魂灵之问，请问你能接得住m ? k { G几个？》

分别从网络，解析，烘托来说

面试的问题根柢都答出来了，当然后边还有[ e 8 :一个技术总监的电Q * 7 V 0话面，首要是问了一些作业相关的问题。

其实这家公司$ $ } | Q j开出的条件也挺让呆呆心动的，包括气氛感觉也挺好，只不过或许还不是r J a d ^自己想要的吧，所以毕竟也是没去，挺怅惘! * J T的…假设面试我的那位小哥哥哥看到了这儿，还请不要伤心哈，我们江湖会再会的。

深圳某房s R r k | t j 4 F地产公司

4月27日

一面

5道笔试题

并具体说一下前面三道

（嘻嘻，这个是呆呆留给你们的标题，考考你们，就不写答案了）

（其实是呆呆当时只 l 3 ` W答出了前面三道）

第二题你只需看过呆呆JS面向政策系列的文章应该就没啥H ) Q i问题了：【何不三连】比继承家业还要简略的J; b % + V AS继承题-封装篇(初露锋芒)
然后第三题的要害一个考到了守时器里调用函数的this指向问题，还有就是守时器它s 4 L F X q i +的实行机制以及eventLoop，再还有就是new和不new时this.num的核算。
第四题当时面试官说其实一部分是考察我对Jz j $ * t _ oSONP的了解，至于百万并发我写不出来可以了解。
第五题…由w z T 1 g ; o于不太会Node所以直接摊牌了。

二面

1. JSONP的原理以及手写一个结束

根柢原理：首要就是运用 script 标签的src特征没有跨域的束缚，通过指向一个需求访问的地址，由服务端回来一个预先定义好的 Javascript 函数的调用，并且将服务器数据以该函数参数的方法传递过来，此办O p 9 Y B法需求前后端合! Z :作结束。

履跋涉程：

前端定义7 y K G一个解析函数(如: jsonS u ; b 4 [ .pCallback = function (res) {})
通过params的方法包装script标签的央求参数，并且声明实行函数(如cb=jsonpCallback)
后端获取到前端声明的实行函数(jsonpCallback)，并以带上参数且调用实行函数的方法传递给前端
前端在script标签回来资源的时分就会去K J h @ J t r实行jsonpCallback并经: N D 3 k ] c f过回调函数的方法拿到数据了。

缺点：

只能进行GET央求

利益：

兼容性好，在一些古老的阅览器中都可以F . g :工作

代码结束：

（具体可以看我的这篇文章：JSONP原理及结束）

<script>
function JSOJ I 6 6NP({
url,
params = {},2 H *
callbackKey = 'cb',j v Q
callback
}) {
// 定义本地的仅有callbackId，若是没有的话则初始化为1
JSONP.callba7 E 5 q O & }ckId = JSONP.callbackId || 1;
let callbackId = JSONP.callbackId;
// 把要实行的回调加入到JSON政策中，避免污染window
JSONP.callbacks = JSONP.callbaO : 9 f N 1cks || [];
JSONP.callbs g  Z  T 6 wacks[callbackId] = callback;
// 把这个称谓加入到参数中: 'c6 Y # &b=JSONP.callbacks[1]'
params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
// 得到'id=1&cb=: D j @ g 7 b J HJSONP.callbacks[1]'
const paramString = Object.keys(params).mx ` ] 1ap(key => {
return `${key}=${encodeURIComponent(params[key])}`
}).join('&aN P f 0 M U ] h imp;')
// 创建 script 标签
const script = document.createElement('script');
script.x Y +setAttribute('src', `${u$ 8 D _ orl}?${paramString}`);
document.body.appendChild(script);
// id自增，保证仅有
JSONP.callbackIP 9 B Md++;
}
JSONP({
url: 'http://localhost:8080/api/jsw a g 8 wonps',
params: {
a: '2&b=3',
b: '4'
},
callbackKey: 'cb',
callback (res) {
console.log(res)
}
})
JSONP({
uK 2 B Y * # Jrl: 'httpu . A E - =://localhost:8080/api/jsonp',
params: {
id: 1
},
callbackKey: 'cb',
callback (res) {
console.log(res)
}
})
</script&gtH U [ o 5;

2. 阅览器为什么要跨域？假设是因为安全的话那小程序或许其他的为什么没有跨域？

跨_ I 1 d y域的发生来历于现代阅览器所通用的同源战略，所谓同源战略，是指只需在地址的：

协议名
域名
端口名

均相同的情况下，才答n & s应访问相同的cookie、localStorage，以及访问U 6 ! D j } m页面1 l A z _ T k的DOM或是发送Ajax央求。若在不同源的情况下访问，就称为跨域。

例如以下为同源：J p n s V Q

http://www7 P . Y u w - k.example.com:8080/index.html
http://www.example.comM R C , J:8080/home.html

以下为跨域：

http://www.example.com:8080/index.ht% K 4 & B Yml
ht*  !tp://www3.example.com:8080/index.html

留心⚠️：

但是有两种状P V % 9 } x ^ 2 p况：http默许的端口号为80，https默许端口号为443。

所以：

http://www.example.com:80 === http://www.example.com
https://www.example.com:443 === httpsT V p://www.example.com

为什么阅览器会阻止跨域？

简答：

首要，跨域只存在于阅览器端，m 9 ? A @ Z i ~ 6因为我们知道阅览器的形状是很翻开的，所以我们需求对它有所束缚。

其次，同源战略首要是为了保证用户信息的安全，可分为两种O : G e N B ：Ajax3 { ^同源战略和DOM同源战略。

Ajax同源战略首要是使得不同源的页面不能获取cookie且不能主张Ajax央求，= 9 G G b n这样在必定层度上避免了CSRF侵犯。

DOM同源战略也相同，它束缚了不同源页面不能获取DOM，这样能b Q n g l =够避免一些恶意网站在自己的网站中运用iframe嵌入正gui的网站并迷m R t M y U R r 5惑1 | P m Z y m C用户，以此来抵达盗取用户信息。

深答：

首要，跨域只存在于阅览器端。阅览7 $ f ( U a a $器它为web供应了访问进口，并且访问的方法很简略，在地址栏输入要访问的地址或许点击某个链接就可以了，正是这种翻开的形状，所以我们需求对它有所束缚。
所以同源战略它的发生z [ % 1 ) U g T j首要是为了保证用户信息的安全，避免恶意的网站盗取数据。分为两种：Ajax同源战略与DOM同源战略：
- Aj! ~ F D M Lax同源战略它首要做了这两种束缚：1.不同源页面不能获: / K _ $ k `取cookie；2.不同源页面不能主张Ajo O 2 Y vax央求。我以为它是避免CSRF侵犯的一种办f j B = X & (法吧。因为我们知; x D T 2 N 4 L道cookie这个东西它首要是4 K p q b J z 3 G为了处理阅览器与服务器会话情况的问题，它本质上是存储在阅览器或本地文件中一个小小的文本文件，那么/ f d $ 2 .它里面一般都会存储了用户的一些信息，包括隐私信息。假设没有Ajax同源战略，恶意网站只需求一段脚本就可以获取你的cookie，然后假充你的身份去给其它网s ? G站发送恶意的央求。
- DOM同源战略也相同，它束缚了不同源页面不能获取DOM。例如一个假的网站运用iframe嵌套了一个银行网站mybank.com，并把宽高或G O @许其它部分调整的和原银行网站相同，只是只是地址栏上的域名不同，若是用户没有留心的话就以为这个是个真的网站。假设这时分用户在里面输入了账号暗码，假设没有同源战略，那么这个恶意网站就可以获取到银行网站中的DOM，也就能拿到用户z : ( F O U的输入内G 8 K I O a容以此来抵达盗取用户信息的侵犯。
同源战略它算是阅览器安全的第一层屏障吧，因为就像CSRF侵犯，它只能束缚不同源页面cookie的获取，但是侵犯者还或许通过其它的方法来抵达侵犯作用。

（注，上面说到的iframe束缚DOM查询，案例如下）
```
// HTML
<iframe name=z 9 Y F"yi^ ; ] t P Fnhang" src="www.yinhang.com"></iframe>
// JS
// 因为没有同源战略的束缚，垂钓网站可以直接拿到其他网站的Dom
const iframe = window.frames['yinhang']
const node = iframe.document.getElementById('你输入账号暗码的Input')N f $
consolw W $ X D ? 0 1 @e.log(`拿到了这个${node}，我还拿不到你刚刚输入的账号暗码吗`)
```

参看：

segmentfault.com/a/119000001…
jueji| % e . | T /n.im/postA w J w : f – { %/5cad99…

3. CORS跨q O o ) b u k h域的原理

跨域资源同享(CORS)是一种机制，是W3C标准。它容许阅览器向跨源服务器，宣告XMLHttpRequest或Fetch央求。并且整个CORS通讯进程都是阅览器自动结束的，不需求用户参与。

而运用这种跨域资源同享的条件是，阅览器有必要支撑这个功用，并且服务器端也有必要附和这种"跨域"央求。因此结束CORS的要害是服务器需求服务器。一般是有以下几个配备：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Cont , rrol-Max-v K y UAgeq # * 0

具体可看：developer.mozilla.org/zh-CN/docs/…

进程剖析：

简略答复：

当我们主张k 5 5 / ) F n 8 )跨域央求时，假设对错简略央求，阅览器会帮我们自动触发) k B / `预检央求，也就是 OPTIONS 央求，用于承认政策资源是否支撑跨域。假设是简略央求，则不会触发预检，直接宣告正常央求。
阅览器会根据服务端照应的 header 自动处理剩下的! o X J i [ t ;央求，假设照应支撑跨域，则继续宣告正常央求，假设不支撑，则在控制台闪现差错。

具体答复：

阅览器先根据同源战略对前端页面和后台交互地址做匹配，若同源，则直接发送数据央求；若不同源，则发送跨域央求。
服务器收到阅览器跨域央求后，根据自身配备回来对应文件头。若未配备过任何容许跨域，则文件头里不包括 Access-Control-Allow-origin 字段，若配备过域名，则回+ ; i s $ { !来 Access-Control-Allow-origin + 对应配备规则里的域名的方法。
阅览器根据接受到的照应头里的 Access-Control-Allow-z j x Norigin 字段做匹配，若无该字段，说明不容许跨域，然后抛出一个差错；若有该字a 0 ~ x ? 3 w段，则对字段_ e 2 p q + Z j内容和当时域名做比对，假设同源，则说明可以跨域，阅览器接受该照应；若不同源，则说明该域名不行跨域，阅览器不接受该照应，并抛出一个差错。

在CORS中有简略央求和非简略央求，简略央求b I 3是不会触发CORS的预检恳` w } c & r z求的，而非简略央求会。

“需预检的央求”要求有必要首要运用 OPTI; n n g RONS 方法主张一个d j , r { % | |预检央求到服务器，以得悉服务器是否容许该实践央求。”预检恳K % L 6 q e v求“的运用，可以避免跨域2 x ~ ] @ b / T央求对服务器的用户数据发生未预期的影响。

（关于更多CORS的内容– O d e O {可以看我的另一篇文章：CORS原理及结束）

4. CORS预央求OPTIONS就必定是安全的吗？

5. 在深圳的网页上输入百度，是怎样把这个央求发到北京的

这个当时面试官和我说的是，中心会通过许多的站点，比如会通过湖G j / V 6南，或许其它城市，由各个城市的这些站点一层一层分发下去。

6. 输入URL到页面的呈现

7. Vue的照应式原理

8. 那在这个照应式中一个数据改动它是怎样告诉要更新的，也O e . $ l m P R就是怎样把数据和页面相关起来？

面的最惨的一次…因为这次面试是当天下午6点才去面的，在这之前7 3 l 1 O呆呆现现已过了3轮面试的摧残，所以身心疲倦很不在情况。当然最Z % Q l首要的是自己确实准* ^ f w t n }备的还不行充沛，其结束在回过头来看看这些题都不太难的…

当天也小小的自闭了一下，拾掇好情况第二天好好总结吧。

深圳某海外直播公司

4月28日

（当时是电话面，一个小时20分钟，问了我大约五六十道题，我能想到的一共是50题，还有一些记不起来了）

1. CommonJS和ES6模块的差异

CommonJS模块是工作时加载，ES6 Modules是编译时输出接口
CommonJS输出是值的仿制；ES6 Modules输出的是值的引用，被输出模块的内部的改动会影响引用的改动
CommonJs导入的模块途径可以是一个表达式，因为它运用的是require()方法；而ES6 Modules只能是字符串k . j
CommonJS this指向当时模块，ES6 Modules this指向undefined
且ES6 Modules中没有这些顶层变量：arguments、require、module、exports、__filename、__dirname

关于第一个差异，是因为CommonJS 加载的是一个政策（即module.exports特征），该政策只需在脚本工作完才会生成。而 ES6 模块不是政策，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

（具体可以看我f b A o ? : (的这篇文章：一篇不是D ) D L i e = 0 J标题党的CommonJS和ED $ T ; q c VS6模块标准说明)

2. 模块的异步加载

模块的异步加载可以运用AMD或许CMD标准。

（具体可以看m , I B o X 4我的这篇文章：一X Q k # :篇不是标题党的CommonB 6 k # U JS和ES6模块标准说明）

3. 开发一个模块要考虑哪些问题？

关闭翻开式原1 Q ? % 2 4则、安全性

（应该还有，但是没想到S E v # s @ u）

4. 结束一个一组异步央求按次第实行你有哪些方法？

运用reduce，初始值传入一个Promise.ref _ $solve()，之后往里面不停的叠加.then()。(类似于这儿juejin.im/post/5e58c6…)
运用forEach，本质和reduce原理相同。(类似于这儿juejin.im/post/5e58c6…)
还可以用ES9中的for...await...of来结束。

5. Promise.all()是并发的仍是串行的？

并发的。不过Promise.all().then()作用中数v + 7 % 3 ` #组的Y B ^ p q次第和Pr{ ; X r n yomiW & { ! ( (se.all()接纳到的数组次第一起。

6. 平时3 , ~ N写过哪些正则表达式

之前有用过用正则去除输入框的首尾空格，正则表达式为：var trimReg = /(^s+)|(s+$s T r R j)/g；不往后来因为Vue中有一个修饰符.trim，运用起来更便当(如v-model.trim="msg")就用这种j # n * g c 8 y方法多一些；再或许也可以用ES10新出的trimStart和trimEnd往来不断 P $ P m v除首尾空格。
用于校验手机号的正则：var phoneReg = /^1[3456789]d{9}$1 N | Z V _/g。
用正则写一个根据name获取cookie中的值的方法：

function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + nM 2 }  4ame + '=([^;]*)'));
if (match) return unescape(match[2]);
}

（具体介7 z 1 u B : F e绍 & B & r 2 a K Q可以看这儿：每日一题-JS篇-根据name获取cookie中值的方法p + K 7）

7. 正则里的非怎样结束的

^要是放在[]里的话就标明"除了^后边的内容都能匹配"，也便对错的意思。

例如：

(除了l，其它都变成了"帅")

var str = 'lindaidai';
console.log(str.replacez / S E v r - g j(/[^l]/g, '帅t # C [ ` V c !'));
// l帅帅帅帅帅帅帅帅

反之，假设是不在[]里的话则标明开始匹配：

(只需l变成了"帅")

var str = 'lindaidai';
console.log(str.replace(/^l/g, '帅'));

8. webpack几种hash的结束5 q 2 m 0 h 5 |原理

hash是跟整个项目的构建q 4 L E 6 X %相关，只需项目里有文件更改，整个项目构建的hash值都会更改，并且全部M o ? ) j文件都共用相同的hash值。(粒度整个项目)
chunkhash是根据不同的进口进行依赖文件解析，构建对应的chunk(模块)，生成对应的hash值。只1 p * v | 4需被批改的chunk(模块)在从头构建之后才会生成新的hash值，不会影响其它的chunk。(粒度entry的4 E F t # F每个进口文件)
contenthash是跟每个生成的文件有关，每? ; : n % P . ` 9个文件都有一个仅有的hash值。当要构建的文件内容发生改动时，就会生成新的hash值，且该文件的改动并不会影响和它同一个模块下的其它文件。(~ h J 4 h d o j粒度每个文件的内容)P 4 o m w P

（c L A R , s x M ]具体可以看我简书上的这篇文章：www.jianshu.com/p/486453d81…）

这儿只是说明晰三种hash的不同…至于原理暂时没了解。

9. webpack假设运用了hash命名，那是L W % 6 S 8 1 r J每次都会重写生成hash吗

这个问题在上一个问题中现已说明晰，要看webpack的配备。

有三种情况：

假设是hash的话，是和整个项目有关的，有一处文件发生更改则W v X q !全部文件的hash值都会发生改动且它们共用一个hash值；
假设是chunkhash的话，只和entry的每个进口文件有关，也就是同一个chunk下的文件有所改动! @ Y 7 –该chunk下的文件的hash值就B L / b 0 M V b会发生改动
假设是contenthash的话，和每个生成的文件有关，只需当要构建的文件内容发生改动时才会给该文件生成新的hash值，并不会影响其它文件。

10. webpack中怎样处理图片的？

在R 6 = 1webpack中有两种处理图片的loader：

file-loader：处理CSS等中引入图片的途径问题；(处理通过url,import/requK E r W _ mire()等引入图片的问题)
url-loader：当图P e ! 7 w 4片小于设置的limit参数值时，url-loader将图片进行base64编码(当项目中有许多图片，通过url-loader进行basex 3 J C s C ` {64编码后会削减http央求数量，进步功用)，大于limit参数值，则运用file-loader仿制图片并输出到编译目录中；

（具体运用可以检查这儿：霖呆呆的webpacM ; &k之路-loader篇）

11. 说一下回流和重绘

回流：

触$ g & d Q ? B u发条件：

当咱m T 5 $ V B W 2们对 DOM 结构的批改引发 DOM 几何尺寸改动的时分y / A ^ g : 3 *，会发生回流的进程。

例如以下操作会触发回流：

一个 DOM 元素的几何特征改动，常见的几何特征有width、height、pw r v @adding、mae e I D z E ; Argin、left、top、border 等等, 这个很好了解。
使 DOM 节点发生增减或许移动。
读写 offset族、scroll族和client族特征+ 3 L m O Z的时分，阅览器为了获取这些值，需求进行回流操作。
调用 window.getCompK ? h [utedStyle G Y B , P Q H 方法。

回流进w } 9 / P { C N p程：因为DOM的结构发生了改动，所: T l 2 ` k & A以需求从生成DOM这一步H q 4 d #初步，从头通过样式核算、生成布局树、建立图层树、再到生成制造& Y G r V q ! {列表以及之后的显d i A ) $ c 现器闪现这整一个烘托进程走一遍，开支对错常大的。

重绘：

触发条件：

当 DOMl U t ^ T 的批改导致了样式的改动，并且没有影响几何特+ h o 3 %色的时分，会导致重绘(repaint)。

重绘进程：因为没有导致 DOM 几何特征的改动，因此元素的方位信息不需求更新，所以当产u C V + $ z m { Q生重绘c c ? = X ` o 9 e的时Z V v j E # * C分，会跳过生存布局树和建立图层树的阶段，直接到生成制造列表，然后继续进行分块、生成位图等后边一系列操作。

怎样避免触发回流和重绘：

避免一再运用 style，而是选用批改claG + d l 8 ` Zss的方法。
将动画作用使用到position特征为absolute或fixed的元素上。
也可以先为元素设置display: none，操作结束后再把它显, I e Y F S ~ ) f现出来。因为在display特征为none的元素上进行的D] * aOM操作不会引发回流和重绘
运用createDocums ) S ! ( entFragment进行批量的 DOM 操作。
关于 resize、scroll 等进行防抖/节省处理。
避免一再读取会引发回流/重绘的特征，假设确实需求多次运用，就用一个变量缓存起来。
运用 CSS3 的transform、opacity、filter这些特征可以结束组成的作用，也就是GPj a K b = o TU加速。

参看来历：juejin.im/post/5df5bc: % y 2 H…

12. 盒模型x + )及怎样转化

box-sizing: content-box（W3C盒模型，又名标准盒模型）：元素的宽巨大小表现为/ 7 q l内容的大小。

box-sizing: border-box（I$ 1 g A E 1E盒模型，又名怪异盒模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。布景会延伸到边框的外沿。

13. 结束水平笔直居中的C K B几种方法

这儿我是按照子弈的总结答的：
juejin.iG K Y l S Km/post/5d690c…

Flex布局（子元素是块级元素）

.box {
display: flex;
width: 100px;
height: 100px;
background-color: pink;
}
.box-center{
margin: auto;
backgrou0 2 ( N j D L c Hnd-color: greenyellow;
}

FE o / ilex布局

.box {
displayw 8 p z j: flex;
width: 100px;
height: 100px;
backO # 6 L L s Q grY D ` lound-color: pink;
justi} ! ( 2 u d Y } ?fy-conten x y % snt: center;
align-items: center;
}
.box-center{
background-color: greenyellow;
}

必定定位结束(定位元素定宽定高)

.box {
positioz R j # y z 5 ? @n: relative;
height: 100px;
width: 100px;
background-color: pink;
}
.box-center{
positionC K P B C _ L: absolute;
left: 0;
rig0 + = y n & 8 `ht: 0;
bottom: 0;
top: 0;
margin: auto;
width: 50px;
height: 50px;
bab s  Vcka V b v Y N ^ ]ground-color: greenyellow;
}

14. flex的= M a p ]兼容性怎样

简略答复：

IE6~9不支撑，IE10~11部分支撑flex的2012版，但是需求-ms-前缀。

其它的干流阅览器包括安卓和IOS根柢上都支撑了。

具体答复：

IE10部分支撑2012，需求-ms-前缀
Android4.1/4.2-4.3部分支撑2009 ，需求-webki6 b 7 1 h 0t-前缀
Safari7/7.1/8部g L *分支撑2012， 需求-webkit-前缀
IOS Safari7.0-7.1/8.1-8.3部分支撑s k % Y $2012，需求-webkit-前缀

15. 你知道到哪里检查兼容性吗

可以到Can I use上去检查，官网地址为：caniuse.comR t D ( 3 T e 9/

1g H [ q @ i %6. 移动端中css你是运用什么单位

比较常用的：

em：定义字体大小时以父级的字体大小为基准；定义长度单位时以当时字体大小为基准。| Z x 4例父级font-size: 14px，则子级font-size: 1em;为font-size: 14pJ ` qx;；若定义长度时，子级的字体大小假设为14px，则子p 8 v 6 _ 8 ] * f级width: 2em;为width: 24px。
rem：以根元素的字体大小为基准。例如Y 2 _html的font-size: 14px，则子级1rem = 11 q E 2 x | D4px。
%：以父级的宽度为基A 3 | p R准。例父级width: 200p4 L 0 a z v 3 i &x，则子级width: 50%;height:50%;为width: 100px;height: 100px;
vw和vh& t G S：根据视口的宽度和高度(视口不包括阅览器的[ Y 5地址栏东西栏和情况栏)。例如视q ( ` L t口宽度为1000px，则60vw = 600p8 q c U 0 {x;
vmin和vmax：vmin为当时vw 和vh中较小的一个值；vmax为较大的一个值。例如视口宽度375px，视口高度812px，则100vmin = 375px;，100vmax = 812pW K H ! y j 1x;

不常用的：

ex和ch：ex以字符"x"的高度为基准；例如1ex标明和字符"x"相同长。ch以数字"0"的B 2 J X 6 N L P W宽度为基准；例如2ch标明和2个数字"0"相同长。

移动端布局总结：

移] h A : w 8 t l动端布局的方法首要运用rem和flex，可以结合各自S [ w Q的利益，比如flex布局很灵活，但是字体d C E的大小欠好控制，我们可以运用rem和媒体查询控制字体的大小，媒体查L ~ * p t O询视口的大小，然后不同的上视口大小下设置设置html的font-size。
可单独制造移动端页面也可照应式pM ? H – qc端移动端共用一个页面。没有好b p ; n Z坏，视情况而定，顺水推舟

（总结来历：细巧）

17. rem和em的差L A g ` R异

em:

定义字体大小时以父级的字体大小为基准；定义长度单位时以当时字体大小为基准。例父级font-size: 14px，则子级font-size: 1em;为font-size: 14px;；若定义长度时，子级的字体大小假设为14px，则子级width: 2em;为width: 24px。

rem:

以根元素的字体大小为基准。例如html的font-size: 14px，则子级1rem = 14px。

18. 在移动端中怎样初始化根元素的字体大小

一个简易版的初始化根元素字体大小。

页面开始处引入下面这段代码，用于动态核算font-size：

(假定你需求的1rem = 20px)

(function () {
var html = document.documentElement;
function on) 7 A $ +WiV Q u ] 5 v 3ndowResize() {
html.sD C G G O j )tyle.f% * I 4 { B YontSize = html.getBoundingClientRect().width / 20 + 'px';
}
window.addEventListener('resize', onWindowResize);
onWindowResize();
})();

document.documentElement：获取document的根元素
html.getBoundingClientRect().width：获取html的宽度(窗口的宽度)
监听window的resize工作

一般还需求协作一个meta头：

<mex z z rta name="viewport" content="width=device-width, initial-scale=1.0, minimum-sacle=1.0, maximum-scale=1.0, user4 # / f-scalable=nG % 2 w @ x 4 D &o+ + t 8 W ; 3 Y F" /&gty  j h;

19. 移动端中0 I g 4 . ) ?不同手机h* ! F ! f } /tml默许的字体大小都是相同的吗

假设没有人为取改动根元素字体大小的话，默许是1r7 Q ~ p l Nem = 16px；根元素默许的字体大小是16px。

20. 你做过哪些动画作用

真话实说没太做过。

21. 假r m $ d B # l G如让你结束一个一向旋转的动画你会怎样做

css代码：

<style&j 8 Xgt;
.box {
width: 100px;
heiO ) # Eght: 100px; H D w *;
ba6 J * { B &ckground-color: red;
animation: spin 2s linear infinite;
}
@keyframeK a H y 4 ? 2 Os spi9 J 7 + %n {L P K @ h g 6
from= _ S $ ~ [ , 7 1 { t_ A 0 B V K d @ransform: rotate(0deg) }
to { transform: rotate(360deg) }
}
</style>

html代码：

<div class="box"></div&gtZ f ) G r ; Z j;

22. animation介绍一下

语法：

animation: name duration timing-function delay iteration-count direction;

值	描绘
animation-name	规则需求绑定到选择器的 keyfrv D G p E h Lame 称谓。(mymove)
animation-duration	规则结束动画所花. j g / e \| c 9费的时间，以秒或毫秒计。(2s)
animation-timing-function	规则动画的速度曲线。(ease\|linear\|ease-in\|cubic-bezier(n,n,n,n))
animation-delay	规则在动画初步之前的推迟。(2s)
animation-iteration-count	规则动画应该播放的次数。(n \| infinQ . % ; qite) n次/无限
animation-direction	规则是否应该轮番反向播放动画。(nor4 M n O & V Y i bmal \| alternate) 正常/反向

23. animation有一个steps()功用符知道吗？

一句话介@ I _ # P U o 3绍– b c k w r ? ;：steps()功用符可以让动画不连续。

方位和作用：和贝塞尔曲线(cubic-bezier()修饰符)相同，都可以T D 3 5 % # !作为animation的第三个特征值。

和贝塞尔曲线的差异：贝塞尔曲线像是滑梯且有4个要害字(参数)E b ?，而steps像是楼梯坡道且只需number和position两个要害字。

语法：

steps(number, position)

np u Sumber: 数值，标明把动画分成了多少段
position: 标明动画是从时间段的开始连续仍是结尾连续。支撑start和end两个要害字，含义分别如下u b y 2：
- start：标明直接初步。
- end：标明戛但是止。是默许值。

具体能4 1 @ ( s C : `够看这儿：www.zhangxinxu.com/wordpress/2…

24. 用过哪些移动端的调试东西

Chrome阅览器 -> more tools -> Remote devices -> chrome://inspect/#devices
Mac + IOS + Safari

25. 说一下原型链

26. 具体说一下instanceof

27. V8的废物回收是发生在什么时分？

V8引擎协助我们结束了自动的废物回收处理，运用阅览器烘托页c 4 T # f } +面的空闲6 Z J ! K y j时间X k $ f / q ] e (进行废物回收。

28. 具体说一下废物回收机制

（这儿我用的Z p ! s i r [ %是：juejin.im/post/5e8b26… 里的总结）

栈内存的回收：

栈内存调用栈上下文切换后就被回收，比较简A T ! J G略。

堆内存的回收：

V8的堆内存分为新生代内存和老生代内存，新生代内存是暂时: h I +分配的_ g / J内存，存在时间短，L H Y _ K 3 z V 7老生代内/ 0 q L 3 Z u ` H存存在时间长。

新生代内存回收机制：

新生代内存容量小，64位系统下仅有32M。新生代内存分为From、To两部分，进行废物回收时，先扫描From，将非存活政策回收，将存活政策次第仿制到To中，0 X B之后调换From/To，等候下一次回收

老生代内存回收机制

提升：假设新生代的变量通过多次回收依然存在，那么就会被放入老生代内存中q B [
符号清除：老生代% v + N内存会先遍历全部政策并打上符号，然后对正在运用或被强引用的政策撤销符号，回收被符号的政策
拾掇内存碎片：把政策挪到内存的一端

（当然想要具体了解的话也可以看我的这篇文章：JavaScript进阶-内存机制(表情包初探)）

29. 在项目中怎样把http的央求换成https

因为我在项目中是会对axios做一层@ l k z c 1封装，所以每次央求的p { Y w域名也是写在配备文件中，有一个baseURL字段专门用于存储它，所以只需改这个字段就可以抵达替换全部央求http为https了。

当然后边我也有了解到：

运用meta标签把http央求换为https:

<meta http-equu 4 4iv ="Content-Security-Policy" content="upgrade-insecure-requ) r , 7 , `ests"&& { L 5 p n V Cgt;

30. 知道meta标签有把http换成https的功用吗？

参看上一题。

31. http央求可以怎样阻挠

在阅览器和服务器进行传输的时分，可以被nginx署理所阻挠，也可以被网关阻挠。

32. htA I b ) i v $ :tps的加密方法

HTTPS首要是选用对称密Z { ; ^ q b钥加密和非对称密钥加密组合而成的混合加密机制进行传输。

也就是发送密文的一方用”对方的公钥”进行加密处理”对称的密钥”，然后对方在收到之后运用自己的私钥进行解密得F _ p M O Y到”对称的密钥”，这在保证双发交流的密钥是安全的条件下运用对称密钥方法进行通: O E O H p – D讯。

33. 混合加密的利益

对称密钥加密和非对称密钥加密都有它们各种的优缺点，而混合加密机制就是将两者M _ B结合运用它们各5 O r t 6 t `自的利益来进行加密传输。

比如已然对称密钥的利益是加解密功率快，那么在客户端与服务端L : . w h I确认了联接之后就可以用它来进行加密传输。不过条件是得处理两边n s E [ f H j – Z都能安全的拿到这把对称密钥。这时分就可以运用非对称密钥加密来传输这把对称密钥，因为我们知道[ u q j _ 7 K C非对称密钥加密的利益就是能保证传输的内容是安全的。

所以它的利益是即保证了对称密钥能在两边之间安全的传输，, ; i * }又能运用对称加密方法进行通讯，这比单纯的运用非对称加密通讯快了许多。以此来处理了HTTP中内容或许被窃听的问题。

其它HTTP相关的问题：

如：

HTTPS的作业流程
混T O g X G X V V合加密机制的利益
数o 0 7 c字签名
ECDHE握手和RSA握手
向前安全性

这些问题都可以看到我的这篇文章：HTTPS面试问答

34z z ~ 3 Q k 1 b f. 阅览器怎样验证服务器的身份

这道题首要可以从数字签名和数字证书上来答。

当时我答的时分就把证书的公布流程、HTTPS数字证书的验证进程完整的说了一遍就算过了。

具体可以看HTTPS面试问答中的第5、6Q @ a U [ 6 *、7问。

35. ETag首部字段说一下

这个无非就是协作If-None-Match来抵达一个洽谈缓存的作用。值为服务器某个资源的仅有标识。

具体可以看我的这篇文章：霖呆呆你来说说阅览器y ! # $ = d缓存吧

36. 你们的token一般是存放在哪里的

Token其实就是访问资@ O a @ 0 5 N @ l源的凭据。

一般是用户通过用户名和暗码登录成功之后，服务器将登陆凭据做数字签名，加密之后得到的字符串作为token。

它在用户登录成功之后会回来给客户端，9 7 E A b h B m客户端首要有这么几种存储方法：

存储在localStorage中，每次调用接$ Z % J B l s口的时分都把它当成一个字段传给后台
存储在cookie中，让它自动发送，不过缺点就是不能跨域
拿到之后存储在localStorage中，每次调用接口的时分放在HTTP央求头的Authorization字段里

(很明显我答的不行专业，欢迎补偿，感谢)

37. token会不会被编造？

(很明显我答的不行专业，欢迎补偿，感谢)

38. redis中一般用来存) $ A * 2 5 7 e _什么

用户登录成功之后的一些信息

(很明显我答的不行专业，欢迎补偿，感I R d ! – , I谢)

39. 前后端怎样验证一个用户是否下线了

(很明显我答的不行专业，欢迎_ = P g ! ,补偿，感谢)

40. CSP白名单知道吗？

(很明显我答的不行专业，欢迎弥G A ; &补，感谢)

41. nginx有配备过吗？

只会配备一些跨域方面的问题。

events {
worker_connections  1024;
}
http {
include       mime.types;
default_type  application/octet-stream;
sendfile        on;
keepalive_tC w f h m mimeout  65;
sz W ,erver {
listen       80;
server_name  local9 o U ~ ? b K } Bhost;
location / {
proxy_pass  http://localhost:8887;
add_header  AccG b o u 8 e Gess-Control-Allow-Origin * r -;
}
}
}

运用ngnix跨域的要害就是在配备文件中设置server项，然后设置其间的location特征，proxy_pass：需求署理的服务器地址，add_header：给照应报文中增加首部字段，例如Access-Control-Allow-Origin设置为^ 4 e ( n – 8 W*，即答D V 5 P应一] * 8 b 5 M ( u切I 0 R ; P y的央求源央求。

具体可以看：Yiming君-面试题：nginx有配备过吗?反向署理知道吗?

42. 反向署理知道吗？

我们将央求发送到服务器，然后服务器对我们的央求进行转发，我们只需求和署理服务器进行通讯就好。所以关于客户端来说，是感知不到服务器的。

43. 有用过抓包东西吗？

唔…没有…

44. 你平常用的电脑是Mac吗？

(…静静的允许)

45. Fiddler有用过吗？

唔…知道…

46. Vue的diff算法

这儿我是按照:

mp.weixin.p _ b F K G b [qq.com/s/2xyP4jVev…

中的第13题答的。

47. VuY B I ] B B + ) #e中computed和meth1 : B Q , e 2ods的差U D J异

48. 例如要获取当时时间你会放到c= w A j a a jomputed仍是methods里？

放在methv ; r q w aods中，因为compu@ f @ ? J t 4ted会有惰性，并不能知道new Date()的改动。

49. 你们的权限3 c 3 j ) + 3 _功用是怎样做的？

小小的写了一篇文章，可以看这儿：数据权限怎样控制

50. 那你在判别权限的时分是用的字符串匹配仍是位运算？

和面试官扯了一堆我数据权限判其他具体进程，其间或许有多个权限：并的情况000011110001&00001111} k q =0002，或的情况000011110001|000011110002，以及怎样做的权限匹配。毕竟面试官：

"所以那仍是用的字符串匹配咯？"

尬…我比较low…用的字符串匹配…

（哇，真的绝了…1个小n R B时20分钟50多道题，答的我口渴x % y，不过也可以看出有许多移动端的我都没有答上来，面试官也标明晰解，终究我首要是以PC端为主U 9 @ 8，Y 5 Y n所以居然也算是过了T R 1，很感谢这位面试官仔细的帮我剖析一些问题）

后来有了解这位面试官近期也跳槽去腾讯了，公开面完呆呆之后他就去大厂了，好人一生安全。

深圳某国内8 K 3直播公司

这家公司其实是上家公司的总部，因为面完, J m上家之后，HR也知道我的顾虑，想要去一个大点的团队，所以就把我举荐去了他们的总部。十分Nice的HR小姐姐，好感动，就算你看不到我的文章，我也仍是要感谢你。

5月8日

一面(前端副总监)

1. 输入URL到页面呈现

(必问…)

看三4 H o a i元的《(1.6w字)阅览器魂灵之问，请问你能接得住几个？》

分别从网络，解析，烘 U F x 5 c托来说

2. 为什g J 0 ] {么说r M M ; v U m zscript标签主张放在body下面？

JS代码在加载完之后是立即实行的，且JS代码实行时会堵塞页面的烘托。

3$ q !. 为什么说script标签会堵塞页面的烘托呢？烘托线程和js引擎线程不是分开的吗？o a ;

JS归于单线程，当我们在加载script标签内容的时分，烘托线程会被暂停，因为script标签里或许会操作DOM的，所以假设你加载script标签又一起烘托页面必定就冲突了，因此说烘托线程(GUI)和js引擎线程互斥。

4. 洽谈缓存说一下

Las4 r % a 1 H ~ zt-Mo7 z 3 jdefied协作If-Modified-Since

ETag协作If-None-Match

也是个常见的( O D t L问题了，不了解的小伙伴可以看我的这篇文章：霖呆呆你来说说阅# ` W ^ 2 Q = E v读N F – W 4器缓存吧

(当时面试官还重复了一下我说的这4个头部字段，自己回忆了一下我说的对不对，好可爱～)

5. HTTP中的Keep-Ali+ M z | – ( Cve有了解过吗？? H z h

Keep-c B + ! K NAlive是HTTP的一个头部字段ConneR B : e N * *ction中的一个值，它是保证我们的HTTP央求能建立一个耐久联接。也就是说建立一次TCP联接即可进行多次央求和照应的交互。它的特征就是只需有一方没有明确的提出断开联接，则坚持TCP联接情况，削减了TCP联接和断开形成的额定开支。

其他，在HTTP/1.1中全部的联接默许都是耐久联接的，但是HTTP/1.0并未标准化。

6. 跨域有了解吗？怎样处理跨域？

我作业中碰到首要是运用CORS来处理跨域问题，说了一下它的原理以及后台需求怎样做。

其他说到了JSONP的原理，以及它的利益：兼容性好；缺点：只能进行GET央求，且有安全问题。

还有说到了ngnix反向署理来处理跨域。

CORS原理及结束
JSONP原理及结束
面试题：nginx有配备过吗?反向署理知道吗?

其它的，我当时说我有看过一篇文章里面具体的介绍10多种跨域处理计划，但是自己没有过多的去了F ^ 4解。

哈哈，其实也就是秋风大大的这篇文章10种跨域处理计划（附终极大招）

7. WebSocket有了解过吗？它也可以跨域的

这个当时答的没用过。

我知道它是能使得客户端和服务器之间存在耐久的联接，并且两边都可以随时初步发送数据，这种方法本质没有运用 HTTP 的照应头，因此也没有跨域的束缚。

(多的不会了)

8. 前端安全方面？XSS？CSRF？

(必问…)

(以下答复参看子弈小哥哥的面试同享：I c (两年作业阅历成功面试阿{ * 8 v s z E W B里P6总结

以及蔡徐坤小哥哥的2万字? ~ , | 前端基础拾遗90问)

XSS

XSS(Cross Site Script)跨站脚本侵犯。指的是侵犯者向网页注入恶意的客户端代码，通过恶意的脚本对客户端网页进行篡改C [ A 3 x G { $，然后在用户阅览网页时，对用户阅览器进行控制或许获取用户隐私数据的一种侵犯方法。

首要是分为三种：

存储型：即侵犯被存储在服务端，常见的是在议论区刺进侵犯脚本，假设脚本被储存到服务端，那么全部看见对应议论的用户都会受到侵犯。

反射型：侵犯者将脚本混在URL里，服务端接纳到URL将恶意代码作为参数取出并拼接在HTML里回来，阅览器解析此HTML后即实行恶意代码

DOM型：将侵犯脚本写在URL中，诱导用户点击该URL，假设URL被h ^ M ! 4 s u +解析，那么侵犯脚本就会被工作。和前两者的不同首要在于DOM型侵犯不通过服务端

怎样防护XSS侵犯

输入检查：对输入内容中的scrip& Y U I = [ et和<iframe>等标签进行? d , . a F /转义f ( 2 p )或许过滤
设置httpOnly：许多XSS侵犯政策都是盗取用户cookie编造身份认证，设置此特征可避免JS获取cookie
翻开CSP，即翻开白名单，可阻挠白名单以外的资源加载和工作

CSRF

CSRF侵犯(Cross-site request forgery)跨站央求编造。是} F . Y : ~ S I一种劫持受信任用户向服务器发送非预期央求的侵犯方法，一般情况下，它是侵犯者凭仗受害者的 Cookie 骗取服务器的信任，但是它并不能拿到| 4 , # & }Cookie，也看不到Cookie的内容，它能做的就是给服务器发送央求，然后实行央求中所描绘的指令，以此来改动服务器中的数据，也就是并不能盗取服务器中的数据。

防护首要有三种：

验证Token：阅览器央求服务器时，服务器回来一个token，每个央求都需求一起带上token和cookie才会被以为是合法央求

验证Referer：通过验证央求头的Referer来验证来历站点，但央求头很容易编造

设置SameSite：设置cookie的SameSiteZ – H g K M a 6，可以让cookiI j 8 g 7 I Re不随跨站央求宣告，但阅览器兼容纷歧

点击挟持

诱运用户点击看似无害的按– ^ Y G I t o . G钮（实则点击了通明 iframe 中的按钮）.
监听鼠标移动工作，让危险按钮一直在鼠标下K r 0 . ^ _ l G方.
运用 HTML5 拖拽技术实行活络操作（例如 deploy key）.

防备战略：

服务h # u @ X l o r端增加L r 4 5 X-Frame-Options 照应头,这个 HTTP 照应头是为了防护用 iframe 嵌套的点击劫持侵犯。这样阅览器就会阻挠嵌入网页的烘托。
JS 判别顶层视口的域名是不是和本页面的域名一起，不一起则不容许操作，top.location.hostname === self.locati t K b (on.hostname；
活络操作运用更杂乱的进程（验证码、输入项目称s D # Z i 2 d号以删除）。

(这个来历于LuckyWinty: www.imooc.– p z a P com/article/295…U F b U)

9. setTimeout的实行原理(EventLoob c ap)

(必问…)

(答复参看：juejin.im/posL X Ot/5e621f…)

setTimeout的工作机制：实行该句子时，是立即把当时守时器代码推入工作队伍，当守时器在工作` * 1 . z z w 7 l列表* q R u g j中满足设置的时间值时将传入的函数加入任务队伍，之后的实行就交给任务队伍担任。但是假设w & Z J q此刻任务队伍不为空，则需等候，所以实行守时器内代码的时间或许会大于设置的时间

说了一下它归于异步任务，然后说了一下还有哪些宏任务以及微任务，毕竟说了一下EventLoop的履跋涉程。

一初步整个脚本作为一个宏任务实行
履跋涉程中同步代码直接实行，宏任务进入宏任务队伍，H W G !微任务进入微任务行2 ) h , Y 4列
当时宏任务实行完出队，检查微任务列表，有j 8 e则依次实行，直到全部实行完
实行阅览器UI线程的烘托作业
检查是否有Web Worker任务，有则实行
实行完本轮的宏任务，回到2，依此循环，直到宏任务和微任务队伍都为空

（具体可以看这儿：juejin.im/post/5e58c6…

10. requestAnimationFrame有了解过吗？

(啪啪啪，不长记忆，其实之前面试有被问过，但是忘了再去了解了，这就吃亏了，没答上来)

requestAnimationFrame是阅览器用于守时循环操作的一个接口，类似于setTimeout，首要用途是按帧对网页进行重绘。关于JS动画，用requestAnimatK 6 @ c d 6 w $ionFrame 会比 setInterF j J Z ? f Aval 作用更好。

具体可以看：juejin.im/post/5e621f…

11. requestAnimationFrame和setTimeoq c q J N m ?ut的差异？

同上…

12. 平常作业中ES6+首要用到了哪些？

(下面看着许多，但我必定不是全答哈，挑了几个来答复)

ES6：

Class
模块L ` m Bimport和export
箭头函数
函数默许参数
...扩展运送符容许翻开数组
解构
字符串模版
Promise
let const
Proxy、Map、Se u _ :t
政策特$ g ; a j M L色同名能简写

ES7：

includes
**求幂运算符

ES8：

asyn9 s p - tcu e f A/await
OR # y 0bject.values()和Object.entries()
padStart()和padEnd()
ObY + p ? ( a J *ject.getOwnPropertyDescriptors()
函数参数容许尾部,

ES9：

for...await...of
...翻开符合容许翻开政策搜集剩下参数
Promise.finally()
正则中的四个新功用

ES10：

flat()
flatMap()
fromE # B U . t + ) wntries()
trimStart和trimEnd
matchAll
BigInt
tr ` ` y 1 cy/catch中报错答N u 4 $应没有err失常参数
Symbol.prototype.d# $ p V Xescription
Function.toString()调用时呈现原本源码的姿态

（还不了解的小伙伴可以看看浪里哥的这篇：盘点ES7、ES8、ES9、ES10新特性）

13. 怎样在前端结束一个图片紧缩

真话– f t G _ Z } : 9真话y T z F G /没做过，但是后来面试官告诉我：可以运用canvas来结束。具体做法等我写篇文章哈。

(当时我还反问了一句面试官：那批量图片紧缩要怎样做呢？把他惊的…然后他和我说挺杂乱的…)

14. 你上家公司首要是做什么的？

15. 团队多少人呢？d % d 4 u } S

1个前端(我)，1个o # S ] D 7小程序老哥(IOS转行的)，6个后台。

16. 项目. t | i 3 b @ o L中有碰到什么难的问题吗？怎样F g # ( % W 8 # d处理的？

例举了我最经典的bpmn.js，以此来引出我写了许多关于这方面的教材5 ? Z + / _，以及建立了微信群，为国内的bpmn.js社区贡献了一c 7 x c y V份力气…怎样巨大上怎样来…

当然也有说到我GitHub上的bpmn-chinese-docj E s 9 y Iume] z Y ; + i i 8 ,nt项目只需100多的Star，他说了解，终究这东西用的人不是许多。

17. 希望薪资多少？

喊了个挺高的数，老哥笑了} Z x 9 G Q g笑，你这个作业年限我们或许给不到，然后扯了点其他。

18. 还有什么想要问我的吗？

团队人员散布情况
技术F ? _ J P 1 / K栈
我进去首要是担任哪块内容
年终奖/季度奖
调薪的频T & $ P – H j率以及起伏
加班多不多

(其实后边这些问题应该是等到HR面的时分问的，但是感觉和面试官挺聊的来的我就先打听了)

二面(CTO)

1. JSONP的结束原理

绝了…又来

2. XSS侵犯n | v _以及怎样防备？

绝了..: E } j E O o.又来X2

3. 不运用框架怎样结束组件按需加载以及原理

当时答的是是用import来按需引入，以及说到了Vue.use: 8 H ~ 7 ;。

但后来有去了解，babe# @ o il-plugin-import就可以结束。

4. 你们这个是自己写的组件库吗？

估量面G E ( – K试官看错了…虽然我的项目有个组件库的功用，但是是根据AntW & R c + n Design of Vu I q ,ue二次开发的。

5. 还有什么想g q M 0 ) : 5 M要问我的吗？？

没了…

三面(HR)

问的问题有p 3 H ,点多，Q @ z我挑一些记得住的哈

1. 第一家公司为什么离y x P l i 3 r r T任？第二家为什么离任？

2. 第一家工资多少？第二家多少？

3. 两家公司首要是做什么的？规划是多* w ^ z大？

4. 之前都是你一个前端吗？

5. 有了解过我们Q B – U 1公司吗？感觉怎样样？

6. 因为我们现在整个研发团队人也不是太多就30多个，前端加上总监或许就4d Y b个，你会考虑这么一个团队吗？

7. 有拿到其它的offer吗？

8. 拒绝一些offer的原因是什么？

9. 你的希望b r w j L Z薪资我们或许给不到，你怎样想的？

10. 平常的兴趣爱好是什么？

11. 老家在哪里？…

12. 现在住哪里？…

13. 还有什么想要问我的吗？？？

面试举荐好文

面试同享：两年作业阅历成功面试阿里P6总结
2万字 | 前端基础拾遗90问
一位前端小姐姐的五万字面试宝典
艺术喵 2 年前端面试心路历程（字节跳动、YY、虎牙R n 0 ` Q、BIGO）| 掘金技术征文t r [ 6 = , 6
一年半阅历前端社招7家大厂&独角兽全过阅历 | 掘金技术征文
面试完50个人后我写下这篇总结
「吐血o v B O 2 %拾掇」再来一打Webpack面试题(继续更新)
(1.6w字)阅览器魂灵之问，请问你能接得住几个？

(还有许多大佬的许多好文，不是呆呆不写在这儿啊，是因为呆呆暂时只刷了这些，抱愧了)

后语

你盼国际，我希望你无bug。这篇文章就介绍到了这儿。

有$ r H H ^总结的缺少的当地还喜欢小伙伴能在议论区留言。

我是一只正在努力求生存的呆呆，也在这条路上不断的总结和成长，希望自己可以坚持✊。

"风云没暂停我宣告奔跑的含义"

"这不是背叛我只是淋了一场雨"

喜欢霖呆呆的小伙还希望可以* j + ~ q d g重视霖呆呆的大众号 Linz l } H d . T &Dai` $ A M E . p y VDai 或许扫一扫下面z # l / V `的二h T – U #维码.

我会不守时的更新一些前端方面的常识内容以及自己的原创文章

你的鼓舞便s e U M 4 k n F |是我继续发明 Q o B g J的首要动力 .

霖呆呆的近期面试128题汇总(含超详细答案) | 掘金技术征文

前语

深圳某做海外加速器公司

1. DIV+C: Y I l E t /SS布局的利益

2. 怎样处理a标点击后hovn g Q C c = ^ aer工作失效的问题?

3. 点击一个input依次触发的工作

4. 照应式的利益

5. Vue的长4 ; G } )处及缺点

6. Vue中hash方法和history方法的差; I I G ^ 7 u . f异

7. react的结束原理？有什么优缺点？

8. react的控制组[ , ) 8 , K件和非控制组件

深圳某电商公司

1. null和undefined的差异

2. 冒泡排序算法和数组去重

深圳某云产品公司

1. 描绘一下Promise

2. Promise.all中假设有一个抛出失常了会怎样处理

3. Promise为什么能链式调用

4. 描绘一下EventLoop的履跋涉程

5. docoment,window,html,body的层级联络

6. addEventListener函数的第三个参数

7. 有写过原生的自定义工作吗

8. 冒泡和捕获的具体进程Z | p X F %

9. 全部的工作都有冒泡吗？

11. 描绘下原型链

12. 手写new

13. typv E m N ~ neof和instanceof的差异

14. typeof为什么对null差错的闪现

15. 具体说下instanceof

16. 一句话描绘一下this

17. 函数内D u G的this是在什么时分确认的@ 9 – G I Q？

18. apply/call/bind的相同和不同

19. webpack中的loader和plugin有什么差异

20. HTTP和TCP的不同

21. TCP和UDP的差异

22. 介绍一下虚拟DOM

23. 盒模型

24. 输入URL到页面的呈现

深圳某房s R r k | t j 4 F地产公司

5道笔试题

1. JSONP的原理以及手写一个结束

2. 阅览器为什么要跨域？假设是因为安全的话那小程序或许其他的为什么没有跨域？

3. CORS跨q O o ) b u k h域的原理

4. CORS预央求OPTIONS就必定是安全的吗？

5. 在深圳的网页上输入百度，是怎样把这个央求发到北京的

6. 输入URL到页面的呈现

7. Vue的照应式原理

8. 那在这个照应式中一个数据改动它是怎样告诉要更新的，也O e . $ l m P R就是怎样把数据和页面相关起来？

深圳某海外直播公司

1. CommonJS和ES6模块的差异

2. 模块的异步加载

3. 开发一个模块要考虑哪些问题？

4. 结束一个一组异步央求按次第实行你有哪些方法？

5. Promise.all()是并发的仍是串行的？

6. 平时3 , ~ N写过哪些正则表达式

7. 正则里的非怎样结束的

8. webpack几种hash的结束5 q 2 m 0 h 5 |原理

9. webpack假设运用了hash命名，那是L W % 6 S 8 1 r J每次都会重写生成hash吗

10. webpack中怎样处理图片的？

11. 说一下回流和重绘

12. 盒模型x + )及怎样转化

13. 结束水平笔直居中的C K B几种方法

14. flex的= M a p ]兼容性怎样

15. 你知道到哪里检查兼容性吗

1g H [ q @ i %6. 移动端中css你是运用什么单位

17. rem和em的差L A g ` R异

18. 在移动端中怎样初始化根元素的字体大小

19. 移动端中0 I g 4 . ) ?不同手机h* ! F ! f } /tml默许的字体大小都是相同的吗

20. 你做过哪些动画作用

21. 假r m $ d B # l G如让你结束一个一向旋转的动画你会怎样做

22. animation介绍一下

23. animation有一个steps()功用符知道吗？

24. 用过哪些移动端的调试东西

25. 说一下原型链

26. 具体说一下instanceof

27. V8的废物回收是发生在什么时分？

28. 具体说一下废物回收机制

29. 在项目中怎样把http的央求换成https

30. 知道meta标签有把http换成https的功用吗？

31. http央求可以怎样阻挠