字节 日常实习

[Amybiubiu]

武汉 飞书

• 自我介绍 专业和做过的项目。提到 gatsby 更适合用来做 wiki 类的静态网站，OI Wiki 有大量的 md 文件，gatsby 社区中有将 md 转为 html 的插件，被问有没有了解其具体的转换过程，AST 的解析过程，我说不了解。
• 括号匹配 我用 c++ 写代码，面试官说可以用 JS 写，我说 JS 不知道怎么处理输入和没有栈结构(不确定语气。我是傻逼，数组结构是有和栈一样功能的，push 和 pop。)面试官让我说一下思路，我答 ( 入栈，）匹配，能最后匹配掉且栈空则 true。他认为这样不能处理某种情况，又补充了最后一种情况，我解释了一下。

  '()'
  '(())()'
  ')(' // false
  '())' // false
  ')()'

• taro 跨端跨框架的理解、h5 有没有用过 native 接口？ 我说跨端是垮 ios 、安卓、电脑，跨框架是可以用 react 和 vue 语法。他解释垮框架应该是一套代码（vue/react）可以编译成小程序代码、h5代码。
• https 握手过程？？ 我说没学过，只知道 https 是在 http 上加了一层 SSL 验证，等说了几句很浅薄的话。解释自己还没学计算机网络只看过图解 http 和 http 权威指南。他说那就不问这一块的了。
• 浏览器的渲染过程 dom树 -> style -> layout -> layer -> (分块、漏答了） -> 绘制指令 -> 栅格化 -> 合成和显示。期间自己想说合成线程与 GPU 与浏览器之前的传输，表述不清，他说 GPU 这一块太远了。
• 看代码输出结果。promise 与 setTimeOut

  
  setTimeout(() => {
  Promise.resolve(1).then((res) => console.log(res));
  console.log(4)
  }, 0)

setTimeout(() => { console.log(2) }, 0)

console.log(3)

// 3 4 2 1; 我 // 3 4 1 2; 答案

- JS的数据类型。基础数据类型与引用数据类型。
我说8大数据类型，然后脑子一片空白不知道哪8大，说了 number symbol bigInt  string（复杂数据类型）。（再骂一句，我是傻逼）。基础数据类型 按值传递，引用数据类型 按地址传递。他补充基础数据类型a变，b不变，引用 a 、b一起变。
- 为什么通常把 script 放在末尾，css 放在 head 里？
script 会阻塞渲染。但 script 具体放哪还是看情况，比如 script 中有 dom 的操作，比如 script 里有触发渲染来减少白屏时间。
- 你有什么想问的吗？
问了为什么要设计 react hooks，除了语法层面更简洁外 。他说纤层化，将一个复杂的任务分成很多小的 task。react hooks 会产生很多 function ，v8 有关于 function 部分的优化，使得 react hook是成为可能，不至于由于大量的 function 变得很慢。

深圳 商业化技术 宿舍网好差啊 断网好多次 我哭了
- 自我介绍
- 项目中的高亮怎么做的？
- 数据类型的判断方法有哪些？手写一个 instanceOf
- 介绍一下浏览器的事件循环机制，setTimeOut 在哪个线程中？
- 看代码 说输出。
- 浏览器缓存 以及 sessionStorage 两个不同的窗口 相同的网址 可以互相访问吗？
- http 缓存。E-Tag 和 Last-Modifed 的比较，以及他们的优先级。如果你自己去处理缓存，你如何设置？
- 浏览器安全问题，xss 的防范，仔细问了有具体哪些。
- 跨域的解决办法。JsonP 的原理 ，jsonp 的缺点。
- Content Security Policy 了解吗？内容安全协议
- 有用过 webpack 吗？webpack loader 和 plugin 知道吗？你知道 webpack 的钩子函数的工作流程吗？
- 算法：最长无重复子串
- 反问（主要是 抖音上一些广告相关的页面，技术栈 react 、vue、react native、h5）

[Amybiubiu]

• jsonp 与 cors 比较 1、浏览器兼容性 2、get，post 3、错误处理 4、安全性

先来看最让我心痛的 JS 数据类型

看了几篇博客后，发现关于 JS 数据类型说法并不是完全一致的，所以还是自己看下 EMACScript 2020（ babel 目前是默认支持 ES 2020 的，ES 2021 三月份发布，我也不知变了啥，不管）。

The ECMAScript language types are Undefined, Null, Boolean, String, Symbol, Number, BigInt, and Object.

The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.

The Number type has...the IEEE Standard are represented in ECMAScript as a single special NaN value. (Note that the NaN value is produced by the program expression NaN.) ...

容易搞错的就是 undefined, null 和 NaN 。undefined 和 null 都是一种类型，这种类型只有一个值 undefined/null。NaN 是 number 类型的一个值。

ES 文档目录有两个分类，ES language type 和 ES specification type, language type 下有 Object type。language type 有 promise type, promise type 也是一个 object 类。感觉 object 类穷举比较困难，常见的 object 有 Array, Function, Set, Map 等吧。

既然说到数据类型，便离不开类型检测。

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');  // 注意正则中间有个空格
}

和类型转换。强制类型转换（Number()....)和隐式类型转换（各种操作符：> + && ）

Babel 的 AST 解析过程

这部分就单纯还是没什么好讲的，或说不知道怎么讲好。看到掘金上一篇讲 Bable 的文章，大概从开发一个 Bable Plugin 的角度写的吧。编译器（将一种语言生成另外一种的语言的程序）工作的几个阶段：词法分析-》语法分析-》语义分析-》中间代码生成、代码优化-》目标代码生成。到 Babel 中来讲，@Babel/parse 将 js source code 生成了 AST ，然后使用 @Babel/traverse 可以对 AST 进行遍历，traverse 定义了某些节点类型的访问，如 Identifier, callExpression，如果要改写就在遍历的时候修改值，如果要修改一个变量名，会涉及到作用域的问题，处理起来会比较复杂，但是好像提供了一个 path.scope.rename 方法。了解接口的用法只是一小步，而关于如何从无到有做一个出来，首先需要一种数学方法或说一种模型，然后按照这种模型设计数据结构，存储相应的信息，比如变量名、值、节点类型、作用域等等，最后用算法操作数据结构，比如生成、修改的实现。比如语法分析的LR分析法，分析过程需要一个分析表，其中有待规约串、当前符号、输入串、向前搜索符等（记不清了233）。

AST 解析首先要知道这颗树的节点的结构是怎样的，由哪些属性构成，然后遍历这颗树，DFS or BFS ，遍历到了需要的节点后修改属性。（说不出更多的话了）

再看几道宏/微任务队列吧

async function p (){
    let res = await fn();
    console.log(res);
}
async function fn(){
    const p1 = await new Promise((resolve, reject) =>{
        setTimeout(()=>{
            resolve(1);
        }, 0);
        resolve(2);
    })
    console.log(p1);
    return new Promise((resolve, reject)=>{
        console.log(3);
        resolve(4);
    })
}
p();
console.log('end');
// end 2 3 4

const p = function (){
    return new Promise((resolve, reject)=>{
        const p1 = new Promise((resolve, reject) =>{
            setTimeout(()=>{
                resolve(1);
            }, 0);
            resolve(2);
        })
        p1.then((res) => {
            console.log(res);
        })
        console.log(3);
        resolve(4);
    })
}

p().then((res)=>{
    console.log(res);
})
console.log('end');
// 3 end 2 4

HTTPS 握手

TCP 三次握手 -》TLS 握手 -》http请求和响应。不背几天是背不下来2333。