个人背景：华中科技大学 信息管理与信息系统专业。

实习经历：2019年7月~12月在小米武汉实习，负责小米网海外站点的产品展示页开发

投递渠道：在牛客网上看到内推的帖子就试了一下。25号投简历，3月3号一面，3月4号二面，3月6号三面，3月9号收到offer，字节的效率是真的快，一周走完所有流程。

投递的时候好像没注意，投到社招方向上去了，二面面完给转到校招岗。非常的贴心，这也可能是没有等15号笔试，就直接面试的原因吧。（只是我的猜测，并不推荐大家模仿）

字节跳动（一面 1h）3.3

• 自我介绍（大一兴趣团队，大二培训营，大三小米实习，React重构，JS高程，你不知道的JavaScript）

• 介绍一下小米做的产品页的效果怎么实现的（nav吸顶效果，鼠标滚动动画，transform，clip-path）

• 国际化实现，国际化字符拼接，怎么实现的？（现有的系统，配置文件了解操作过程，拼接不是我做的）

• BFC的作用，怎么产生BFC（块级上下文，内外布局互不影响，会影响到浮动定位、清除浮动以及外边距折叠，具体作用与产生方式推荐看MDN上的解释，传送门）

• Rem与em的区别（转换成px时，参照的对象不一样，em根据当前节点font-size计算，rem跟根节点计算）

• 怎么更新rem的布局（更新根节点 html的font-size）

• Vue跟React哪个更熟？后面就针对性的问了

• Vue 数据双向绑定（数据劫持+发布订阅）（Object.defineProperty，Proxy，EventEmiter）

• Vue的 template模板怎么渲染的？（不清楚）

  • Vue 改变数据后，视图怎么更新的（劫持数据变化，通过发布订阅通知视图更新）

  • render方法怎么展示数据（抽象语法树，好像答偏了，直接说对virtual dom里面的原理不是很懂）

  • 怎么知道virtual dom更新了哪些（不了解）（这里应该想听到diff算法实现原理，我的理解是，对比新对象与原对象的属性，看子节点有没有变化，然后遍历子节点以此类推）

• Vuex了解多少？讲讲（说了一下 view=>action=>mutation=>store=>view 的单向流动）

  • action与mutation的区别（action支持异步，mutation只能同步）

  • 怎么触发action与mutation（dispatch，commit）

• 事件循环机制（宏任务与微任务、执行栈、执行一个宏任务就清空一次微任务队列，然后再执行宏任务）

• 跨域解决方案

  jsonp （只支持get、利用script无同源限制，以函数参数形式获取返回值）

  CORS Access-Control-Allow-Origin,Method,Header,Credentials

  Nginx 反向代理（服务器无同源限制）

• Promise、async与Generator（Promise是为了解决回调地狱，但是Promise状态不可中断，就有了Generator，async则是自执行的Generator语法糖）

• CSS布局，上中下，上下固定，中间撑满，中间分层三块，左右固定，中间撑满（绝对定位+margin）

  • absolution计算时包括父元素margin吗？（把margin换成padding）

• 一个高阶函数的输出值

function fun(n,o){
console.log(o)
	return {
    fun:function(m){
      return fun(m,n)
    }
  }
}
c = fun(0).fun(1)
c.fun(2)
c.fun(3)
// undefined -> 0 -> 1->1

• promise链式调用输出的结果

  new Promise((resolve,reject)=>{
  reject(1)
  }).catch(()=>{
  console.log(2)
  }).then(
  	()=>console.log(3)
  	(v)=>console.log(v)
  )
  // 2 -> 3

• 实现函数（深度优先遍历）

  const chapterTree = {
    name: '总章节',
    children: [
      { name: '章节一', children: [{ name: '第一节', children: [{ name: '第一小节' }, { name: '第二小节' }] }, { name: '第二节' }] },
      { name: '章节二', children: [{ name: '第三节' }, { name: '第四节' }] }]
  };
  function serialize(tree) {
    // TODO
  }
  // 测试
  const result = serialize(chapterTree);
  console.log(result);
  // ["总章节", "章节一", "第一节", "第一小节", "第二小节", "第二节", "章节二", "第三节", "第四节"]
  

  function serialize(tree) {
      let arr = [];
      arr.push(tree.name);
      if (tree.children == null) return arr;
      for (let item of tree.children) {
          arr = arr.concat(serialize(item));
      }
      return arr;
  }

  
  

• 改进上面的程序，输出章节号同时输出对应的序号

  // ["总章节", "(1)章节一", "(1.1)第一节", "(1.1.1)第一小节", "(1.1.2)第二小节", "(1.2)第二节", "(2)章节二", "(2.1)第三节", "(2.2)第四节"]

• 输入当前索引的数组，然后递归前拷贝一份（或者先push后pop）

  function serialize(tree, locate = []) {
      let arr = [];
      let before = locate.length ? `(${locate.join('.')})` : "";
      arr.push(before+tree.name);
      if (tree.children == null) return arr;
      tree.children.forEach((item, index) => {
          let copyLocal = locate.slice();
          copyLocal.push(index + 1);
          arr.push(...serialize(item, copyLocal));
      });
      return arr;
  }

  
  

字节跳动（二面 1h）3.4

• 自我介绍

• 擅长的技术，亮点（HTML+CSS布局，JS原理）

  • 追问：（HTML、CSS、JS、Vue框架）最熟练的？（JS）

• Html中的Doctype的作用（声明页面渲染的机制，严格模式，怪异模式，HTML5时代设为html即可）

• 小米做的额移动端还是PC端（PC、移动端都有）

  • 移动端的多端适配（rem+padding，媒体查询）

  • 解释rem（相对根节点计算）

  • 怎么做单位换算（固定比率）

  • 移动端在PC预览时会布局会随着字体放大到不合适的比例，怎么解决。（固定页面最大宽度）
  • 面试官解释可以用媒体查询，把字体和盒子布局分开。布局用rem，更新字体用媒体查询

• html 常用的meta标签常用的name（description，keyword，作者，版权等信息）MDN参考

  • 这种信息给谁用的？（搜索引擎爬虫用来做索引）

  • 如何设置网页编码？（charset）

  • viewport的作用？（设置页面视窗宽高缩放）（width、height、initial-scal之类的，）

• 布局问题 ，三列布局，左右固定宽度，中间自适应，有哪些方法，怎么实现（圣杯布局，双飞翼布局）

  • 这两个布局有点老，用绝对定位怎么做？（position：absolute+padding）

  • flex怎么做，（父节点display：flex，左右固定宽度，中间自己会 撑开）

• 实现一个全屏居中的盒子布局，全屏弹窗的内容框

  flex+justify-content+align-items

  position+transform

  position+负的margin

• 为什么要清除浮动（父元素高度塌陷）

  • 清除浮动的方法（父元素生成BFC，伪元素+clear）

• css选择器权重（转换成十进制数字）id 3 class 4 tag 1 =>341

• css性能优化

  CSS动画 回流和重绘 减少选择器嵌套（组合高于继承） 用 transform替换left

  复杂动画设置独立图层，

• CSS Reset与CSS Reboot

  • reset，重置所有样式（）reboot没听过（其实听过normalize，是一样的效果）

  • 怎么一行reset（*{margin，padding，下划线} 归零）

  • 解释了一下关于reboot：reboot不是归零，按需要保留margin，padding，比如h1这种标题

• JSON的操作函数（parse，stringify）

• JS基本数据类型（Number, String, Boolean(这个忘记说了，面试官也没管),Undefined, Null,Object,Symbol,BigInt）

• == 与=== 的区别(非严格等于与严格等于,前者会进行类型转换,后者没有)

• 检测数据类型(typeof Obejct.prototype.toString.call(),instacnceof 各自的原理与缺点）

• addEventListener 的第三个参数（useCapture 默认false使用冒泡，true在捕获阶段触发）

  • addEventListener 与on 的区别（前者不会被替换可以设置多个，on后面监听会替换掉前面的监听）

• HTTP请求有哪些方式（GET,POST,PUT,DELETE,UPDATE,OPTION）

  • 什么时候会发起options请求（非简单请求，方式不是get与post或者类型为application/json，设定自定义请求头，第一次发送options，返回100继续后发送后面的请求）

• HTTP的状态码（2345分别对应成功，重定向，客户端错误，服务器错误，分别解释了一下200,301,302,304,404,403,502）

• 编码题--幼儿园分饼干（先排序，贪心算法，按饼干最小满足小朋友遍历了一下饼干数组）大致思路如下

  function dispatchCookies(children,cookies){
    if(cookies == null||cookies.length == 0)
      return 0
    cookies.sort((a,b)=>a-b);
    children..sort((a,b)=>a-b);
    
    var count = 0
    for(var i = 0,j=0; i< cookies.length;i++){
      if(cookies[i] >= children[j]){
        count++;j++
      }
    }
    return count
  }

  
  

• 前面提到了SEO优化，说一下吧（自己给自己挖坑，就说了一下标题标签的使用，图片加alt以及用chrome的lighthouse分析有更多的（逼逼不下去了） 面试官OS：看你还装逼不）

• 讲一下gitflow工作流（简历里面写的，Release，test，dev，本地调试，测试环境合并 ，发起MR，code review，合并到 Release）

• 设计一个即时搜索框，怎么设计，考虑哪些技术点

  • 监听oninput，获取值，正则匹配，获取内容，组合字符串，添加到页面

  • 技术点，

    • compositionStart，compositionEnd处理中文输入

    • debounce 回调函数防抖

• 接下来一年的学习规划（框架实战，JS机制研究，性能优化）

• 有什么想问的吗？

  • 团队用到的技术栈与业务（PS+React+webpack|教育中台pc 60%+ HTML5移动端 20% + nodejs10%）（迷之数学，加起来不等于100%。哈哈）

  • 面完之后对我有什么改进的方向与学习的建议（JS深入，框架学习，Ts学习，多做项目）

字节跳动（三面 50min）3.6

• 记不太清了，只能大概的回忆一下

• 自我介绍（大二参加培训营，大三暑假小米实习，看了YDK-JS，JS高程，ES6入门，了解性能优化、SEO优化巴拉巴拉的）

• 讲一讲小米框架重构过程中你了解到的吧（SEO优化，服务端渲染）

• 性能优化有哪些（减少http请求，非首屏资源懒加载，图片压缩，Lighthouse分析耗时的任务）

• 常见图片的格式（jpg，png，gif，webp以及各自的优势）

• 从输入Url到页面展示的过程（DNS解析=>缓存判断=>TCP握手=>解析DOM+CSSOM，解析JS=>生成渲染树=>布局=>绘制=>看到页面）

• 进程与线程的区别（进程是资源分配的基本单位，线程是执行的最小单位，同一进程不同线程可以共享进程资源。线程间切换效率更高）

• 数组，链表，堆栈的区别（顺序存储与链表存储，先进后出，hash映射表）

• 反转链表

  function reverse (head){
      if(head.next == null)return head
      let tail = reverse(head.next)
      head.next.next = head;
      head.next = null;
      return tail;
  }

  
  

  
  

• 以k个为一组进行反转链表（在面试官的提示下完成，可继续优化）

  function reverse_k(head,k){
      let [p,q] = [head,head]
      for(let i = 0;i<k;i++){
          if(p == null)return head;
        p = p.next
      }
      q  = p.next;
      p.next = null;
      head = reverse(head);
      p.next = reverse_k(q,k);
      return head;
  }

  
  

  
  

总体来看，字节跳动对算法考核比较多（每轮压轴来一个），然后就是对JS原理、性能优化，CSS基础的考察比较多，再就是问实习经历与具体的技术实践