头条笔面试题

[toc]

一面

1. TCP的拥塞控制

参考答案：
在某段时间，若对网络中某一资源的需求超过了该资源所能提供的可用部分，网络性能就要变坏，这种情况就叫做网络拥塞。https://blog.csdn.net/qq_41431406/article/details/97926927

2. DNS

参考答案：
域名解析服务器， 主要是用来做域名解析用的，在地址栏当中输入域名敲回车之后会先通过该服务器进行域名的解析，对应找到域名对应的服务器的ip地址，回传给服务器继续像这个ip地址发出请求（此处可以说一下浏览器里面输入地址之后发生的事情，可以具体描述一下五层网络模型）

3. http状态码

参考答案：
常见的状态码 2xx 成功响应 3xx 重定向 4xx 客户端出现问题 5xx 服务端出现问题 经常看到的几个状态码的描述：
200 successs 请求成功
302
304
404
400
500

4. 304 浏览器缓存

参考答案：
浏览器虽然发现了本地有该资源的缓存，但是不确定是否是最新的，于是向服务器询问，若服务器认为浏览器的缓存版本还可用，那么便会返回304。控制浏览器在什么情况下直接使用本地缓存而不向服务器发送 请求的字段相关的有以下几个

cache control，一般具有以下值：

  • public: 所有内容都将被缓存
  • private: 内容只缓存到似有缓存中
  • no-cache: 所有内容都不会被缓存
  • no-store: 所有内容都不会被缓存到缓存或者internet临时文件中
  • must-revalidation/proxy-revalidation: 如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
  • max-age=xxx( xxx is numeric ): 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

其中最常用的属性便是 max-age, 这个字段很简单，就是浏览器在资源成功请求后的制定时间内，都将直接调用本地缓存和不会向服务器去请求数据。
（以上值能记住几个说几个）

Expires

Expires 头部字段提供一个日期和时间，在该日期前的所有对该资源的请求都会直接使用浏览器缓存而不用向服务器请求（注意：cache-control max-age 和 s-maxage 将覆盖 Expires 头部。）

Last-Modified/E-tag

  • 若服务器在响应一个资源时添加了Last-Modified字段，那么当下一次浏览器再一次向服务器请求该资源时（前提是浏览器中上一次的资源被缓存过了），会在请求header中包含If-Modified-Since字段，且值与服务器第一次响应给浏览器的Last-Modified字段一致
  • 若服务器在响应一个资源时添加了ETag字段，那么当下一次浏览器再一次向服务器请求该资源时（前提是浏览器中上一次的资源被缓存过了），会在请求header中包含If-None-Match字段，且值与服务器第一次响应给浏览器的ETag字段一致
    Last-Modified和E-tag的作用都是向服务器确认当前缓存文件是否为最新

那么上述是遵循了Http协议的浏览器会自动实现的，而要实现304的功能，就需要服务器（比如Apache对于静态资源会自动实现这两个字段的响应）或者我们手动在服务器端编写响应的逻辑来实现。

  • 若服务器在收到的资源请求中发现含有Last-Modified字段，则说明浏览器中包含了该资源的某一版本的缓存，此时服务器端将根据该字段的值进行一定的逻辑判断，以决定让浏览器直接使用已有的缓存（返回304）还是将最新的文件发送过去（200，发送新文件并更新Last-Modified字段）
  • 若服务器在收到的资源请求中发现含有If-None-Matc字段，则说明浏览器中包含了该资源的某一版本的缓存，此时服务器端将根据该字段的值进行一定的逻辑判断，以决定让浏览器直接使用已有的缓存（返回304）还是将最新的文件发送过去（200，发送新文件，并更新ETag）

若同时使用了Last-Modified和ETag，正确的做法应该是当两者都符合条件时，才返回304

Etag 主要为了解决 Last-Modified 无法解决的一些问题。一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET。这种情况下可以将某个能用来表明文件内容是否被更改的值（比如md5）来作为ETag

某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)某些服务器不能精确的得到文件的最后修改时间

上述两段黑体部分能记就记 记不住就以理解为主

5. 简述vdom

参考答案： Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树，其主要是通过vnode,实现一个无状态的组件，当组件状态发生更新时，然后触发Virtual Dom数据的变化，然后通过Virtual Dom和真实DOM的比对，再对真实DOM更新。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构。

这个问题上可以引出vue react框架

6. 填充字符串（编程）

7. 管道函数（编程）

参考答案：

  1. // 管道是从左往右函数执行，组合是从右往左执行。
  2. function pipeFun(...fns) => (value) => fns.reverse().reduce((acc, fn) => fn(acc), value);

8. 箭头函数和普通函数的区别

参考答案：

  1. * 箭头函数内部没有独立的this指向
  2. * 箭头函数可以直接写返回值（省略return）

9. 排序算法

  1. 太多了 详见算法课程中的排序算法课程源码

10. css中的position取值，及区别

  1. position 可取的值有
  2.     relative： 相对于自身原来位置
  3.     absolute： 相对于最近有定位的父级
  4.     fixed： 相对于视口
  5.     sticky： 相对于最近有滚动性质的父级

11. 盒模型 top:50%,margin-top:50%,相对什么计算的

父元素的高度

12. 怎么求的盒子的总尺寸

计算整个盒子所占空间的总尺寸：

  • 标准合模型：margin + border + padding + width/height
  • ie6混杂盒模型： margin + width/height

13. clientWidth,offsetWidth,scrollWidth的区别

  • clientWidth 元素可视区域的宽度 不包含滚动条
  • offsetWidth 元素所占据的宽度 包含滚动条
  • scrollWidth 元素没有滚动条时的宽度 包含里面所有内容展开的宽度

二面

## 1. 自我介绍

2. 为什么学前端

3. 介绍最让我有收获的一个项目

4. 介绍音乐播放器项目,音频加载不出来时的优化处理

5. 事件循环方面的执行顺序出了一个题

6. 产生一个不重复的随机数组

参考答案：

  1. function randomArr(len, min, max) {
  2.     var result = [];
  3.     while(result.length < len) {
  4.         var num = Math.floor(Math.random() * (max - min) + min);
  5.         if (result.indexOf(num) === -1) {
  6.             result.push(num);
  7.         }
  8.     }
  9.     return result;
  10. }

7. continue和break的区别

参考答案：

  • continue 结束当前循环继续下面一次循环
  • break 结束循环

8. webpack中devserve

参考答案：

devserver 是webpack的开发服务器。当运行webpack-dev-server的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。
devServer的配置项有

  1. open: 第一次构建完成时，自动用浏览器打开网页
  2. port: 配置项用于配置DevServer服务器监听的端口号。
  3. hot: 是否开启热更新（DevServer默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实现预览，开启模块热替换功能后在不刷新整个页面的情况下通过用心模块替换老模块来实现实时预览。）
  4. host: 配置项用于配置DevServer服务器监听的地址。
  5. proxy: 当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。

9. 热更新

10. 遍历一个目录，将文件中所有的标签改成<&b>

11. 文件流steam

  1. 把对象数据转换成流数据的对象, 在nodejs中fs模块表现，
  2. fs模块中可以对文件进行读写等操作，相应有读取流和写入流
  4. 此处可以把你会的node 中对文件系统的理解全部描述以下

12. git回退操作

  1.     git reset --hard 版本号

13. translate的优点

  • 不会脱离文档流
  • 对gpu也比较友好

14. 实现一个球

  1. 使用阴影实现
  1. 一个白板，实现画笔的功能
  1. 使用canvas 结合着事件实现

三面

1. 自我介绍

2. 对前端的认识，学习了哪些技术

3. 你的这些项目都有用户吗

4. h5新出的api

5. css的标准化组织是?

W3C(万维网联盟)

## 6. css3目前处在哪个阶段?

7. jsonp原理，手写jsonp

  1. function jsonp(options) {
  2.     var oScript = document.createElement('script');
  3.     oScript.src = options.url + '?' + options.data + '&callback=' + options.callbackName;
  4.     document.body.appendChild(oScript);
  5.     document.body.removeChild(oScript);
  6. }

8. 图片的一些格式，以及它们的区别，和其中的算法

9. 函数防抖和节流是怎样优化性能的

一段时间内只进行一次网络请求

10. 你还有什么问题想问我的吗

四面

1. 对技术面的体验，哪些方面需要提升，自己做过哪些努力

2. 你的高考情况，为什么选择现在这所学校

3. vue框架的优点

4. 是怎样学习前端的

5. 做过哪些项目

6. 项目上的提升，成就感的事

7. 团队协作方面

8. 有进行其它公司的面试吗

9. 选择一个公司，你会考虑到哪些点

10. 实习地点有要求吗

11. 能实习多长时间