阿里 阿里云 一面

[Amybiubiu]

不太记得了，可能不是很完全

• 不用自我介绍，开心😄
• 项目相关：讲一讲 graphQL ？（不太记得了。）如果要自己去将 mdx 转为 html？（反正我又说很乱，最后引到了 bable 上） graphQL 可以自定义数据，供之后的阶段查询。解析 mdx，生成数据结构，tag, title, content 等不同数据它可能数据项需要有 type 和 value 等一些项，还有确定 md 语法和 html 元素的对应关系，那个映射结果也要存下来。具体的实现或许可以通过 bable 工具吧？因为有 bable 很多遍历节点的 API，比如按节点类型遍历，比如在当前节点访问前后节点的 API。
• 后端相关 用过后端框架吗？是数据持久储存吗？如何进行数据库的操作？查询是用的字符串查的吗？说 ORN 可以方便的使用各种数据结构。 写过一个二手交易系统，用了 express 写接口，用了 mysql 做数据存储。用一个 mysql 连接的 JS 库进行连接后，将需要的参数传过去进行增删查改。
• 语言相关 除 JS 语言外，还用什么？Java 用吗？c++ STL 了解吗？常见的数据结构？知道那些树结构？ 用过 C++ 写题，用过 C++ 做过一个简易的图书馆管理系统。用过 vector, stack, queue, unordered_map。queue, stack, 树结构（漏了很多）。二叉树，平衡二叉树，二叉搜索树。
• bable 相关 ES5 转换成 ES6 的大致过程，词法分析后输出的是什么？ 词法分析-》语法分析-》语义分析……。token。他还说了一段，不太记得了，我为什么不录音wuwu。 词法分析后生成各个token，比如一个表达式有声明部分，变量部分，值部分，然后看这些部分是否符合语法规范。对表达式的各部分进行合适的替换。替换之后在按照表达式的结构进行重组起来。
• 跨域问题 什么是同站点？三个条件？跨域的解决办法？httpOnly 什么意思？samesite 什么意思？CORS 工作机制？www 与 XXX 属于跨域吗（记不清了，之后再补正）？ 相同的域名，相同的协议 http/ https 。他说还有端口号。我说不是 http 和 https 80 与 443 端口也指定了吗？有什么前端显示指定端口号的方法？他说在后端对于不同的 url 可能会用不同端口号，前端看不到，但实际上是不同的端口号。 JsonP，CORS，代理。JsonP 就是在 script 内请求一个资源，并且设置一个回调函数，后端返回的 res 作为 callback 的参数执行。也解释了一下代理，懒得写了。 只允许在 http 请求的时候使用，不允许 JS 访问 cookie。 只接受相同 site 的请求，别的 site 请求发不出或者发出去了，服务端也不会给你需要的数据。比如我在 muxi 网站打开了华中师范大学的网站，设置了 samesite，cookie 是不会被发送给 ccnu 的。（讲的有些乱也不准确） 发送请求时 head 内会有一个 origin 字段。后端返回时会有一个 access-control-allow-origin。如果 origin 是被允许的，则进行 CORS。 我猜应该是属于跨域，不可以资源共享的。理由是 google 浏览器有个沙箱隔离，对于同站点用一个渲染进程，www 和 xxx 是会被认为非同站点，开启两个渲染进程的。他说和渲染进程没有什么关系。（我也知道，我只是把我上不了台面的推理拿出来了，谁让我对之前同站点的字眼视而不见。）
• 浏览器安全 如何看待 google 的去 cookie 化 认为它可以解决 XSS 和 CSRF 攻击。不太记得了。
• 浏览器缓存 当浏览器访问一个网址的时候，会先查看缓存，如果先前已经请求过，回送的信息里可能有一些 expires 和 max-age 设置新鲜度，如果还新鲜就用这个数据，不新鲜就与服务器进行一个验证，因为有的时候不新鲜了数据可能也没有更改还可以再度使用。然后说有两个字段用来验证的，卡了一整说了一个 last-modified （我现在想起来了是 if-not-modified 和 if-none-match），还有一个不记得叫啥的。last-modified 就是纪录一下上次更改的时候，如果与服务器验证，这个时间后依旧没改，说明缓存可用。另外一个验证的是为了解决 last-modified 验证的一些弊端而提出的。比如秒的粒度不够，周期性重写，不重要重写这些都是不需要数据更新的。最后他说说的是 E-Tag 吧。我说对对对2333。
• 浏览器存储 cookie …… localStorage, sessionStorage。localStorage 针对站点存在，sessionStorage也是，但生存周期只在会话期，窗口关了，数据就没了。他说还有 cacheStorage 。我问 cacheStorage 和那个 IndexDB 有什么关系吗？他说 cacheStorage 适用于 server Worker （？）一些场景做存储，虽然用 IndexDB 也可以，但 IndexDB 纯粹是二进制数据存储，cacheStorage 可以更适用别的？
• element 和 node 的区别 element 是 node 的子集。他补充举个例子就是 html 中的 注释属于 node 但不是 element 。但不排除一些浏览器也会把注释也翻译为一个 element。
• dom 的一些操作了解吗？dom 的 innerText 和 contentText 的区别？（dbq 问了两遍也没记住） 类和 id 等一些查询获取节点，appendChild，innerHTML …… 不太清楚。他说其中一个是 W3C 标准，一个是某些浏览器自带的，说我不要用浏览器自带的。
• 箭头函数 箭头函数与普通函数的区别？如何自己实现箭头函数？ this 的指向不太一样，箭头函数是捕获外部的 this 。他说可以 let that = this 就可以捕获了，我说我想起了 react 函数组件的定时器数据由于 this 指向变化而异常显示的问题，也是通过这个方式来解决的。他说可以去看看 React 的闭包陷阱，闭包陷阱可以解决很多类似的问题。
• for of 用过吗? async 和 await 用过吗？其实现的原理是什么？bable 将 async / await 转换成 ES5 是怎样的？ 没。promise 和 生成器。const fn = await promise 。fn 就是一个 generator.next ，利用生成器的暂停和恢复执行化异步为同步。他说是for of 和 async await 都是一些迭代器。让我去写一个 async 和 await 然后 bable 翻译一下。（好的，我之后就去看冴羽的那篇文章）
• promise 的状态？catch 之后还可以 then 吗？ 未决议 resolve reject 。应该是可以的，catch 内也会出错，所以设置 then 来捕获 catch 的 error。
• react 相关 用 react 和 vue？react hooks 用了多久？说下自己用过的 hooks？说一下 useMemo 的使用场景？ 去年暑假。useState, useEffect, useMemo, useCallback, useRef。计算量极大的情况下，比如由 a 和 b 计算出一个值，这个计算过程要几秒（我夸张了），使用它才比较划算。因为 useMemo 本身函数要内存空间，还有依赖列表，也会形成闭包，不会被销毁，这些都是优化的代价。
• 平时是如何学习前端的？ 写项目，查不懂得。看 js 的书。看周边的技术如状态管理，路由方案，写 demo。
• 常用的技术论栏 stackOverflow medium 前端大牛的个人网站 知乎 （漏了掘金和 github MDN developers.google 不好意思）
• 反问 业务？面试官讲了很多，不细说了，写累了。

[Amybiubiu]

• CSRF 和 samesite 那部分讲错了，喔，我都瞎讲了一些啥 CSRF 正确的例子可以是我打开了一个恶意的链接假设是黑客网，这个链接在内有一个 img 的 src 是淘宝的支付请求，由于之前有淘宝的登陆后的 cookie，然后我可能就出钱下单了一个假商品。设置 samesite: strict 的话，是不允许在 黑客网 上发送淘宝请求时把 cookie 添加上去的，只有在淘宝网上做淘宝请求 cookie 才会被发送。samesite 还有一个 Lax 值，只允许第三方站点 get 请求时携带 cookie。
• same-origin 的条件
  • 浏览器的同源策略 protocol、host、port。端口号可以在 url 中显式指定，如果服务器开放了那个 port 的话。 postMessage 跨源通信
  • http: time.geekbang.org 与 http: www.geekbang.org 是 same-site 吗？是 same-site ，不是 same-origin。
  • host 与 domain different between host and domain what is a domain name
  • same-origin and same-site cookie 是 same-origin 策略。渲染进程共用是 same-site 策略。确实不是一回事。same-site 的条件是 protocol 、 顶级域名 （TLD) + 二级域名、port 相同 。same-origin 子域名都要相同。
• node 与 element，innerText 与 textContent
• Babel 相关，来个大和集吧，总是被问，我好烦。其实也不一定是 Babel 相关。毕竟 md 转 html 和 Babel 毫无相关2333。说一说 md 生成 html 的过程？ 如果不是在特定框架下的转换，可以用正则查询，替换就 ok 啦。 如果是在 gatsby 生态下， md 转成 html 的过程是，在
• graphQL 相关
• async / await 的内部实现

[Amybiubiu]

• md 生成 html 的过程 在 gatsby 中是通过 gatsby-source-filesystem 插件访问 md 文件，通过 gatsby-transformer-remark 把 markdown 转换为 html ，frontmatter 转换为 data ，最后在 createPage 阶段通过 graphQL 查询改 html 和 data 生成 page。关于 gastby-transformer-remark 如何把 md 转为 html ，查看 github 上面的代码经过如下的阶段：由 md 字符流生成 md AST ,遍历 md AST 生成 html AST，解析 html AST 得到 html。md AST 生成 html AST 的大概思路是: 如果 markdown Node 的 nodeType 是paragraph,heading,tableCell,break 的某个类型则生成对应的 html Node如 p, h, table。

[Amybiubiu]

如何看待 google 浏览器的全面禁用第三方 cookie 的计划？

• 参考链接
• 什么是第三方 cookie 。 比如 taobao.com 下存的 .mmstat.com domain 的 cookie
• 为什么要使用第三方 cookie 第三方 cookie 可以用来 前端日志打点即前端异常和性能的监控、广告销售如 facebook-pixel。前端日志打点是通常会使用第三方的 SDK 进行性能分析。广告销售的例子就是在电商平台存了 facebook cookie，并给 facebook 发送请求，facebook 拿到 cookie 后可以分析用户的浏览、加购动作，登陆 facebook 后广告推送。
• 禁用的影响 安全，没有其它网站的广告推送。same-site 一定程度上防范了 CSRF 攻击，完全禁用 cookie 的话，杜绝 CSRF。

  token 相比 cookie 的优势

• 参考链接 token 在防 XSS 上，与 coookie 相比是没有优势的。但由于发送网络请求时 token 不会自动被携带，故在 CSRF 上有一定的预防作用。

[Amybiubiu]

• 如何理解 graphQL？ 解决前端一个页面下的数据，需要多个 API 请求后整合数据；以及需求变更，前端请求完整信息后截取所需信息，浪费网络请求资源。可以通过 graphQL 在前端与 API 端建立一个中台进行数据的整合，或者直接 graphQL 访问数据库，按前端查询字段原格式返回结果。
• graphQL 的特点 声明式查询与变更，简单有效的定义 schema type 。