阿彬的字节教育一面面经

hbli/bd-教育/一面.md

@@ -0,0 +1,161 @@
+# 前端开发（高级）工程师-教育业务
+## 一面
+- 自我介绍
+- 介绍一下最近做过的项目
+    - 扯了扯预警框架, 被追问有没有技术上特别的难点
+        - 没有
+- 怎么codereview
+- webpack打包流程
+- loader和plugin的区别
+- 平时的项目是怎么个开发部署上线的
+- HTML如何解析渲染成DOM节点
+    - HTML解析过程中遇到link css会下载吗, 遇到js文件会下载吗, 如果js下载完了会执行吗  (扯了扯defer async执行时机)
+- 文件加载完成后, onDomContentLoaded和onLoad有什么区别呢? 感觉这两道题在考察性能监控/埋点相关.
+    - GG不会
+    > [参考](https://juejin.cn/post/6844903623583891469)
+- 讲一下浏览器的事件循环-eventloop
+- 深拷贝有什么方式
+    - JSON
+    - lodash _.cloneDeep DFS BFS地实现
+        - 循环引用肿么办 (GG, 忘记看了, 盲猜map记一下) 
+        > 深拷贝详情参考: [Advanced-Frontend/Daily-Interview-Question#10](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10)
+- 实现动画的方式有哪几种方式
+    - 答了 transition, animation + keyframes, 忘记说js的了, 比如在raf回调里什么的.
+    - 说完让写了个CSS: hover button上让尺寸变大用了transfrom scale()
+- 什么是闭包, N种方式改写下面的让输出 0 1 2 3 4, 顺便考察了下对作用域链, this的考察.
+    ```javascript
+    // 原始的样子, 输出是什么? 改写成输出01234, let, 闭包, settimeout的第三个参数,
+    // 被问懵了一个问题: 为什么改成let就好了, 答了有块级作用域
+    for (var i = 0; i < 5; i++) {
+    setTimeout(function(i) {
+        console.log(i); // this ?
+    }, 1000 * i);
+    }
+
+    // 这样行不行, 主要考察作用域链
+    for (var i = 0; i < 5; i++) {
+    setTimeout(function(i) {
+        console.log(i); // this ?
+    }, 1000 * i, i);
+    }
+
+    // 以及这样行不行, 主要考察作用域链
+    for (var i = 0; i < 5; i++) {
+        (function(i) {
+            setTimeout(function() {
+                console.log(i); // this ?
+            }, 1000 * i);
+        })(i)
+    }
+
+    // 下面这样输出什么
+    for (var i = 0; i < 5; i++) {
+    setTimeout((function(i) {
+        console.log(i); // this ?
+    })(i), 1000 * i);
+    }
+    ```
+- 场景应用
+    - 实现一个失败重试
+    ```javascript
+    function request(url, method) {} // 返回Promise, 成功的时候可以调用then获得数据, 失败的时候调用catch获得reason
+    request('http://api', 'get')
+    .then(data => {  })
+    .catch(err => {  })
+
+    function requestRetry(url, method, num) {
+        //TODO
+    }
+    ```
+    我写了个答案(仅供参考, 未验证正确性):
+    ``` javascript
+    function requestRetry(url, method, num) {
+        return request(url, method).then((data)=>{
+            return data;
+        }, (reason) =>{
+            if(num > 0) {
+                return requestRetry(url, method, num - 1)
+            } else {
+                throw reason;
+            }
+        })
+    }
+    // 这里留坑了, 被追问第一个.then是否多余? 直接.catch.then行不行回答错误, 应该是会传递结果的, 其实这样就可以:
+    // A+的实现中, 当typeof resolveCallback !== function时, 默认为v => v;
+    // 相似的, resolveCallback !== func 时, 默认为 reason => throw reason;
+    // 另外 .catch(cb) <===> .then(null, cb)
+    function requestRetry(url, method, num) {
+        return request(url, method).catch( (reason) =>{
+            if(num > 0) {
+                console.log("重试", Date.now()) // for test
+                return requestRetry(url, method, num - 1)
+            } else {
+                throw reason; // 这里一开始写了return, 这样不能被catch, 在提醒下改成了throw;
+            }
+        })
+    }
+
+    // test, request每调三次正常
+    var request = (function() {
+        let count = 0;
+        return function () {
+            count++;
+            return new Promise((resolve, reject) =>{
+                if(count <= 3) {
+                    setTimeout(() =>  reject("error", count), 1000)
+                } else {
+                    count = 0;
+                    setTimeout(() =>  resolve("ok", count), 1000)
+                }
+            })
+        }
+    })()
+    requestRetry("", "", 3).then(v => console.log(v)).catch(e => console.log(e))
+    ```
+
+- 算法题
+    ```javascript
+    // 判断A、B数组的包含关系（值和数量），A属于B返回1，B属于A返回2，两者相等返回0，其他返回-1
+    function arrayInclude (arrA, arrB) {
+
+    }
+
+    var a1 = [4,2,3,1,4]
+    var a2 = [4,2,3,1,4,5]
+    console.log(arrayInclude(a1, a2)) // 1
+
+    var a3 = [4,2,3,1,4]
+    var a4 = [4,2,3,1]
+    console.log(arrayInclude(a3, a4)) // 2
+
+    var a5 = [4,2,3,1,4]
+    var a6 = [4,2,3,1,4]
+    console.log(arrayInclude(a5, a6)) // 0
+
+    var a7 = [4,2,3,1,4]
+    var a8 = [3,2,3,1,4]
+    console.log(arrayInclude(a7, a8)) // -1
+    ```
+    我的答案: 
+    > ps: 一开始写了三段, 长度相同/长度不同的情况, 最后在面试官连续优化需求下改成这样, 主要是删掉冗余逻辑, 建议搜搜leetcode最优解, 这么写也够用感觉.
+    ``` javascript
+    function arrayInclude (arrA, arrB) {
+        arrA.sort((a,b) => a-b);
+        arrB.sort((a,b) => a-b);
+        let i = 0;
+        const isSame = arrA.length === arrB.length;
+        let len = Math.min(arrA.length, arrB.length)
+        while(i < len) {
+            if(arrA[i] !== arrB[i]) {
+                return -1
+            }
+            i++;
+        }
+        return isSame ? 0:len === arrA.length ? 1 : 2;
+    }
+    ```
+- 喜闻乐见的还有什么问题
+    - 问了下前面那个Promise.catch的答案 - 确实会透传结果
+    - 教育业务主要做什么
+    - 平时怎么接触并学习webpack等其他前端细分领域 
+        > 业务驱动, 发现问题并解决问题, 借此机会深入学习一下