程序猿的今日头条面试历险记（一）

桃翁

发布于 2019-08-20 14:32:52

1.1K0

发布于 2019-08-20 14:32:52

文章被收录于专栏：前端桃园

FIN

介绍

上图是小姐姐旅行过程中拍的风景图。先来介绍下今天的女主角，毕业自中科大研究生，拿了一大堆大厂的 offer。这次的面试是小姐姐在云南旅行中进行的，目前已经完成了二面，今天这篇文章是对一面的总结，过几天还有对二面的总结。相对来说，今日头条的面试是几个大厂中相对较难的，且看小姐姐如何应对面试。

本萌妹纸一枚，前端自学一年，在毕业旅行之际接到预约今日头条面试电话，为了不错过面试，也不错过风景，恳求协商面试时间为晚上八点半开始。你们能想象在云南花语牧场临时抱佛脚的我有多二嘛。。。。一面面试官小哥哥人超级 nice，问的问题偏基础，都是常见的前端面试题，由于本人技术栈为 Angular 以及 Vue，因此面试题不涉及 React。最最重要的是，大概小哥哥赶着下班，我最最最薄弱的编程环节，出的题目算很简单很良心惹，在此记录分享一下。

angularjs 的双向绑定原理

AngularJs 为 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。

面试官追问什么时候触发 $digest 循环，答表单元素内容变化、Ajax 请求响应、点击按钮执行的函数等。

angular 的依赖注入原理

得到模块的依赖项实的核心 api 是 Function.prototype.toString，对一个函数执行 toString，它会返回函数的源码字符串，这样我们就可以通过正则匹配的方式拿到这个函数的参数列表
查找依赖项所对应的对象用一个对象保存对象或函数列表
执行时注入通过 fn.apply 方法把执行上下文，和依赖列表传入函数并执行

HTTP1、HTTP2 以及 HTTPs 的区别

HTTP2 使用的是二进制传送，HTTP1.X 是文本（字符串）传送。 HTTP1.X 使用的是明文的文本传送，而 HTTP2 使用的是二进制传送，二进制传送的单位是帧和流。帧组成了流，同时流还有流 ID 标示，通过流 ID 就牵扯出了第二个区别
HTTP2 支持多路复用。因为有流 ID，所以通过同一个 HTTP 请求实现多个 HTTP 请求传输变成了可能，可以通过流 ID 来标示究竟是哪个流从而定位到是哪个 HTTP 请求
HTTP2 头部压缩。 HTTP2 通过 gzip 和 compress 压缩头部然后再发送，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引 Id 就行，通过索引 ID 就可以知道表头的值了
HTTP2 支持服务器推送
HTTPs 协议需要到 CA 申请证书，一般免费证书较少，因而需要一定费用。
HTTP 是超文本传输协议，信息是明文传输，HTTPs 则是具有安全性的 SSL 加密传输协议。
HTTP 和 HTTPs 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
HTTP 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

HTTPs 是不是都用了对称加密算法，哪些涉及到非对称加密算法

HTTPS 要使客户端与服务器端的通信过程得到安全保证，必须使用的对称加密算法，但是协商对称加密算法的过程，需要使用非对称加密算法来保证安全，然而直接使用非对称加密的过程本身也不安全，会有中间人篡改公钥的可能性，所以客户端与服务器不直接使用公钥，而是使用数字证书签发机构颁发的证书来保证非对称加密过程本身的安全。这样通过这些机制协商出一个对称加密算法，就此双方使用该算法进行加密解密。从而解决了客户端与服务器端之间的通信安全问题。

项目中遇到跨域问题怎么解决的

JSONP（注意只支持 GET 请求，不支持 POST 请求）
CORS

//允许所有来源访问
header('Access-Control-Allow-Origin:*')
//允许访问的方式
header('Access-Control-Allow-Method:POST,GET')

代理
Websocket（面试官说理论上可以，代价太大）

Service Worker 的原理

之前有 PWA 开发经验，所以问了这个问题。

Service Worker 是运行在浏览器背后的独立线程，可以实现缓存技术。使用 Service Worker，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。

注册：首先要在 JS 中进行注册
安装：注册完成之后，会触发 install，在安装的过程中，如果所有需要离线缓存的静态资源都已经成功缓存，那么 Service Worker 就安装完成进入激活步骤，如果有文件下载失败或缓存失败，Service Worker 就无法完成安装过程。
激活：Service Worker 对它作用域内的所有页面进行控制，fetch 用于拦截用户请求并响应，返回 Promise 对象,成功安装 Service Worker 后，当用户下次再进入页面，返回已返回的文件。

Service Worker 要解决缓存更新怎么解决

在 register 的时候手动更新 Service Worker 文件。
在 sw.js 文件里面,每次手动更新里面的 cacheName

可视化相关

由于项目涉及数据可视化，问了 echarts 基于什么实现，canvas 和 SVG 的区别了解吗，有没有自己用 canvas 实现一些动画等等。

SVG 是和图像分辨率无关的矢量图形格式，如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。而 Canvas 通过 JS 来绘制 2D 图形，如果其位置发生变化，那么整个场景也需要重新绘制，依赖分辨率。

然后自己并没有用 canvas 实现过动画，只直接调用 echarts。

H5 新加了哪些新特性，它为什么要加这些语义化的标签 H5

新特性就略过叭。。。至于第二个问题是为了让网页结构更清晰，方便维护，而且能让浏览器更好的解析。

对 SEO 了解吗，平时项目中考虑过 SEO 吗

项目没有考虑过 seo，但是知道代码中要考虑 meta、title、description、alt 等标签优化。

平时项目中的性能优化怎么做

这个问题涉及的面太广，自行百度吧。。。。。

Promise 和 Rxjs 里面的 observe 有什么区别

当异步完成或者失败时，Promise 处理单个事件，observe 可以处理一个或者多个事件。
Promise 不可被取消，observe 可以被取消
observable 可以 retry，或者多次调用。对于 Promise，不论在后面怎么调用 then，实际上的异步操作只会被执行一次，多次调用没有效果；但是对于 observable，多次调用 forEach 或者使用 retry 方法，能够触发多次异步操作。
observable 还提供 map、filter、reduce 等类似的操作符。

代码编写：输出两个字符串最长的公共部分

function find(str1, str2) {
  if (str1.length > str2.length) {
    shorter = str2
    longer = str1
  } else {
    shorter = str1
    longer = str2
  }
  for (var subLength = shorter.length; subLength > 0; subLength--) {
    for (var i = 0; i + subLength <= shorter.length; i++) {
      var subString = shorter.substring(i, i + subLength)
      if (longer.indexOf(subString) >= 0) {
        targetString = subString
        return targetString
      }
    }
  }
}

代码编写：对于封装好的 API，如何截获参数，比如 xml 对象的 open 方法会传入 url，method，headers 参数，现在需要截获 headers 添加一些自定义的属性，怎么做？

var _open = xmlHttpRequest.prototype.open
xmlHttpRequest.prototype.open = function(url, method, headers) {
  headers = {}
  _open.call(this, url, method, headers)
}

总的来说，还是偏基础，面试官没用过 Angular4 做过开发，因此只好问些 Angularjs 的一些基本原理。虽然旅游途中进行面试匆匆忙忙，结果还算好，一面过，攒人品了～～～～ HR 打电话约下次的二面时间。