不难，但是很广，很多知识要深究，基本上会从你自己说的技术里面出问题，所以说项目用到了什么技术一定要深究一下技术。

目前只记得这些。对手写代码的考察还挺有要求的。

目录

1、解释原型链和原型对象

2、websocket和http2了解吗解释一下（大学学过不记得了）socket是什么？

（1）websocket

（2）socket，说到 websocket 我觉得有必要说下跟 socket 的区别。

（3）HTTP2.0

3、自己实现一个event类

4、自己实现new函数

5、网络七层协议

6、TCP和IP分别属于哪一层?TCP和UDP的区别?分别适用于什么情况?

7、对公司有什么了解（我觉得可能最好说一下业务，我乱说的然后面试官笑了）

8、自我介绍

9、在项目里有挑战的东西或者学到了什么（谨慎回答，题目大多从这里出）

10、vue组件通信怎么实现 父子和不父子

方法一、props/$emit父子之间

方法二、$emit/$on

方法三、vuex

方法四、$attrs/$listeners

方法五、provide/inject

方法六、$parent / $children与 ref

11、vuex的mutation和action的区别，为什么要设立两个而不是直接都用mutation操作state

12、只给一个div，无外层容器信息，让他水平垂直居中

13、css选择器优先级排序（记得要全面的一个不漏记住）

14、应用层有哪些协议，用到了UDP的有哪些？

15、自己实现一个防抖函数 （以防万一节流的也学一下吧）

16、sort()是内部使用了什么算法 时间复杂度是多少 indexOf()的时间复杂度是多少

18、有没有了解过typeScript

19、webpack

1、解释原型链和原型对象

在Javascript中，当系统加载构造函数后，会自动在内存中生成一个对象，这个对象就是原型对象。两者之间在内存中表现为相对独立，不存在谁包含谁的关系。但是两者之间又有一些关联，在构造函数的内部存在一个prototype属性指向原型对象，同时在原型对象的内存也存在一个属性constructor其指向了构造函数。

原型链就是当构造函数实例化的对象访问一个不存在的属性或方法，系统会自动到当前构造器所指向的原型对象中去寻找，找到则直接使用。

2、websocket和http2了解吗解释一下（大学学过不记得了）socket是什么？

（1）websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

https://www.runoob.com/html/html5-websocket.html

（2）socket，说到 websocket 我觉得有必要说下跟 socket 的区别。

软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。

Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。

WebSocket 则是一个典型的应用层协议。

在计算机通信领域，socket 被翻译为“套接字”，它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定，一台计算机可以接收其他计算机的数据，也可以向其他计算机发送数据

（3）HTTP2.0

HTTP的基本优化

影响一个 HTTP 网络请求的因素主要有两个：带宽和延迟。

  • 带宽：如果说我们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，但是现在网络基础建设已经使得带宽得到极大的提升，我们不再会担心由带宽而影响网速，那么就只剩下延迟了。

  • 延迟：

    • 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。

    • DNS 查询（DNS Lookup）：浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。

    • 建立连接（Initial connection）：HTTP 是基于 TCP 协议的，浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文，达到真正的建立连接，但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对文件类大请求影响较大。

SPDY（读作“SPeeDY”）是Google开发的基于TCP的会话层 [1]  协议，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。新协议的功能包括数据流的多路复用、请求优先级以及HTTP报头压缩。谷歌表示，引入SPDY协议后，在实验室测试中页面加载速度比原先快64%。

HTTP2.0和HTTP1.X相比的新特性

  • 新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。

  • 多路复用（MultiPlexing），即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。

  • header压缩，如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。

  • 服务端推送（server push），同SPDY一样，HTTP2.0也具有server push功能。

HTTP2.0的升级改造

  • 前文说了HTTP2.0其实可以支持非HTTPS的，但是现在主流的浏览器像chrome，firefox表示还是只支持基于 TLS 部署的HTTP2.0协议，所以要想升级成HTTP2.0还是先升级HTTPS为好。

  • 当你的网站已经升级HTTPS之后，那么升级HTTP2.0就简单很多，如果你使用NGINX，只要在配置文件中启动相应的协议就可以了，可以参考NGINX白皮书，NGINX配置HTTP2.0官方指南 https://www.nginx.com/blog/nginx-1-9-5/。

  • 使用了HTTP2.0那么，原本的HTTP1.x怎么办，这个问题其实不用担心，HTTP2.0完全兼容HTTP1.x的语义，对于不支持HTTP2.0的浏览器，NGINX会自动向下兼容的。

3、自己实现一个event类

class Event {

on(name, cb)

once(name, cb)

emit(name, message)

off(name, cb)

}

class EventEmitter {constructor () {super()this.events = {}this.onceEvents = {} }on (type, cb) {if (!type || !cb) {return false}this.events[type] = this.events[type] || []this.events[type].push(cb)}emit (type) {if (!type) {return false}this.events[type] && this.events[type].forEach(eventCb => {eventCb.apply(this, [...arguments].slice(1))})this.onceEvents[type] && this.onceEvents[type].forEach(eventCb => {eventCb.apply(this, [...arguments].slice(1))})delete this.onceEvents[type]}off (type) {if (!type) {return false}delete this.events[type]delete this.onceEvents[type]}once (type, cb) {if (!type || !cb) {return false}this.onceEvents[type] = this.onceEvents[type] || []this.onceEvents[type].push(cb)}
}

4、自己实现new函数

function A() {}

let a = new A();.

            function newOperator(ctor){if(typeof ctor !== 'function'){throw 'newOperator function the first param must be a function';}newOperator.target = ctor;var newObj = Object.create(ctor.prototype);var argsArr = [].slice.call(arguments, 1);var ctorReturnResult = ctor.apply(newObj, argsArr);var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;var isFunction = typeof ctorReturnResult === 'function';if(isObject || isFunction){return ctorReturnResult;}return newObj;}// es6版本function _new(fn, ...arg) {const obj = Object.create(fn.prototype);const ret = fn.apply(obj, arg);return ret instanceof Object ? ret : obj;}

5、网络七层协议

6、TCP和IP分别属于哪一层?TCP和UDP的区别?分别适用于什么情况?

TCP/UDP传输层，IP网络层，

1、连接方面区别

TCP面向连接（如打电话要先拨号建立连接）。

UDP是无连接的，即发送数据之前不需要建立连接。

2、安全方面的区别

TCP提供可靠的服务，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达。

UDP尽最大努力交付，即不保证可靠交付。

3、传输效率的区别

TCP传输效率相对较低。

UDP传输效率高，适用于对高速传输和实时性有较高的通信或广播通信。

4、连接对象数量的区别

TCP连接只能是点到点、一对一的。

UDP支持一对一，一对多，多对一和多对多的交互通信。

TCP协议需要三次握手通信成功后进行建立，应用场景：互联网和企业网上客户端应用，数据传输性能让位于数据传输的完整性，可控制性和可靠性。
UDP协议是直接发送，不会判断是否接收和发送成功，应用场景：当强调输出性能而非完整性时，如音频和多媒体的应用。

7、对公司有什么了解（我觉得可能最好说一下业务，我乱说的然后面试官笑了）

8、自我介绍

9、在项目里有挑战的东西或者学到了什么（谨慎回答，题目大多从这里出）

10、vue组件通信怎么实现 父子和不父子

方法一、props/$emit父子之间

方法二、$emit/$on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

方法三、vuex

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

Mutation中是同步函数和Action中是异步函数，属于一种约定，为了更好的追踪vuex的状态变化，希望我们都按照这种原则进行开发

Mutation必须是同步函数

更改state的唯一方法是通过提交 mutation

Action中不进行状态的直接更改，而是通过commit触发mutation

mutation的触发通过store.commit来进行

action的触发通过store.dispatch进行

异步操作的条件依赖第一个异步操作的结果。

第二个异步操作的条件依赖第一个异步操作的结果，比如第一个异步操作执行了count ++ ，count :0 = >1，第二个异步操作会先判断当前count的值，if(count === 1) { do something...} else { do something... }

当异步操作涉及互相依赖的情况的时候，我们肯定希望被依赖的操作执行完成之后，再执行依赖项，这样能保证程序执行得到正确的结果，但异步操作，如接口访问这种，往往是不能确定执行完成的时间的。

state利用Vue的细粒度数据响应机制来进行高效的状态更新。

由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换。

JSON.stringify(state.subscribeList);   // array -> string
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array

方法四、$attrs/$listeners

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。

  • $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

方法五、provide/inject

Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

方法六、$parent / $children与 ref

  • ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
  • $parent / $children：访问父 / 子实例

https://segmentfault.com/a/1190000019208626

11、vuex的mutation和action的区别，为什么要设立两个而不是直接都用mutation操作state

异步操作的条件依赖第一个异步操作的结果。

第二个异步操作的条件依赖第一个异步操作的结果，比如第一个异步操作执行了count ++ ，count :0 = >1，第二个异步操作会先判断当前count的值，if(count === 1) { do something...} else { do something... }

当异步操作涉及互相依赖的情况的时候，我们肯定希望被依赖的操作执行完成之后，再执行依赖项，这样能保证程序执行得到正确的结果，但异步操作，如接口访问这种，往往是不能确定执行完成的时间的。

12、只给一个div，无外层容器信息，让他水平垂直居中

<div id="block"></div>

position:relative;

top:50%;

left:50%;

transform: translate(-50%,-50%)

怎么实现的，含义。

transform的translate是基于什么点?

scale(1) scale(2) scale(0.5)分别代表什么，是基于什么点？

CSS盒模型是基于哪个点?

左上角的点。

13、css选择器优先级排序（记得要全面的一个不漏记住）

浏览器默认属性 < 继承自父元素的属性（比如div color是333 下层的a也是333） < 通配符选择器（ 通配选择器用一个星号（*）表示。） < 标签选择器 < 类选择器 < 结构伪类选择器 < id选择器 < 行内样式 < !important

结构伪类：

14、应用层有哪些协议，用到了UDP的有哪些？

应用层最经典的就是DNS和HTTP了。

应用层协议如下：

(1)域名系统(Domain Name System，DNS)：用于实现网络设备名字到IP地址映射的网络服务。

(2)文件传输协议(File Transfer Protocol，FTP)：用于实现交互式文件传输功能。

(3)简单邮件传送协议(Simple Mail Transfer Protocol, SMTP)：用于实现电子邮箱传送功能。

(4)超文本传输协议(HyperText Transfer Protocol，HTTP)：用于实现WWW服务。

(5)简单网络管理协议(simple Network Management Protocol，SNMP)：用于管理与监视网络设备。

(6)远程登录协议(Telnet)：用于实现远程登录功能。

DNS用的UDP,其他一些P2P应用,如迅雷,BT等也会用UDP来传输。（其中DNS既可以基于TCP，也可以基于UDP。）

一般用的都是TCP,比如HTTP, SSL ,FTP, SMTP, POP3, IMAP等等很多。

15、自己实现一个防抖函数 （以防万一节流的也学一下吧）

16、sort()是内部使用了什么算法 时间复杂度是多少 indexOf()的时间复杂度是多少

快排     O (nlogn)

indexOf()   O (n)

17、下列代码的输出是什么

function Dog(name, color) {

this.name = name

this.color = color

this.bark = function() {

console.log(`hello ${this.name}`)

}

}

Dog.prototype.bark = function () {

console.log(`hi ${this.name}`)

}

let dog = new Dog('Chop', 'Red');

dog.bark();

dog.__proto__.bark.call(dog);

hello Chop //本身的方法

hi Chop // 原型的方法

18、有没有了解过typeScript

19、webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

字节跳动前端面经凉经（半年经验社招）待填坑相关推荐

  1. 字节跳动前端面试题：CSS 基础

    实战教程  全栈技术  精选好文 注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...

  2. 2023阿里，字节跳动，JAVA岗(一线企业校招、社招)面试题合集

    前言 以下面试题全属于一线大厂社招以及校招的面试真题,各位在做这些题目对照自己的时候请平凡心对待,不要信心受挫.其实 做为致力于一线企业校招或者社招的你来说,能把每个知识模块的一小部分问题去深入学习和 ...

  3. 字节跳动Android实习面试凉凉经，震撼来袭免费下载！

    开头 最近,程序员这个圈子可谓热闹非凡,前不久,一个神奇的开源项目996.ICU诞生,几天时间就有超过10w+ star 和 1w+ fork ,可谓是Github上star增长最快的项目.996.i ...

  4. 字节跳动Android三面凉凉，已开源

    前言 早在2017年我们就建了第一个进击BAT的Android开发进阶交流群,两年期间很多群友都分享了自己的Android面试经历.其中就有很多群友已经斩获蚂蚁金服,天猫,高德,盒马等阿里系offer ...

  5. 字节跳动Android实习面试凉凉经，面试总结

    开头 通常作为一个Android APP开发者,我们并不关心Android的源代码实现,不过随着Android开发者越来越多,企业在筛选Android程序员时越来越看中一个程序员对于Android底层 ...

  6. 金九银十！字节跳动三轮面试惨败，总结面试经验，下次再战！

    写在开篇 和往年相比,今年的秋招看上去不是那么顺利,多少都受疫情有所影响,但是令我惊讶的是第一家给我面试机会的公司竟然是宇宙条.一开始接到面试通知时,心情特别复杂,紧张又兴奋,字节跳动是出了名的考算法 ...

  7. # 字节数组转uint32_字节跳动客户端校招面经（21届秋招内推）

    在开始之前说说我的基本情况:c9本科双非研究生20届毕业,6月22号入职深圳今日头条,在2019年12月搭上校招补录的末班车上岸,岗位是android客户端开发工程师.此文记录一下我之前的面试经验,顺 ...

  8. 特殊时期，字节跳动高效有序的远程协作办公经验，值得各企业学习！

    作者 | Carol 出品 | CSDN(ID:CSDNnews) 随着疫情的持续扩散,大部分企业都响应国家号召,延迟复工时间,以保障大家的安全.但在不可抗力因素的影响下的延迟复工,也让企业面临着较大 ...

  9. 前后端开发的心得体会_社招后端三面总结以及学习经验感言（操详细）

    简单介绍下背景:本人已工作两年,这次属于社招,不是校招哦!投递的岗位base是北京. 先上正文 一面内容大概:先来道算法题,不难:链表表示的两个数相加.面试官说不用运行,大概写一下就行,说是因为说牛客 ...

最新文章

  1. 关于Spark NLP学习，你需要掌握的LightPipeline（附代码）| CSDN博文精选
  2. Android Hacks:在代码中隐藏软键盘
  3. 程序员应该知道的七个图形工具
  4. mybatis的入门
  5. python按行读取文件 with open_python笔记——文件读写操作过程（open与with open的区别）...
  6. datable转xml
  7. nginx配置动静分离简单配置示例
  8. getdate 日期间隔_日期getDate（）方法以及JavaScript中的示例
  9. 谷歌跟oracle_谁赢得了Google VS Oracle？ 开发人员赢了。
  10. python中字符串注意事项
  11. kali mysql停止服务器_从零开始：手把手教你黑客入门攻破服务器并获取ROOT权限...
  12. 请写一个java程序实现线程连接池功能_请写一个java程序实现线程连接池功能
  13. 装饰器python3 默认_python3【基础】-装饰器
  14. Php sql server2005,phpmssqlserver2005数据库连接类
  15. python爬漫画，一人*下漫画，多线程快速的下载
  16. FC6000蒸汽气体热水液体智能流量积算仪特点
  17. php orm中关联查询,【整理】Laravel中Eloquent ORM 关联关系的操作
  18. html5 拉弓,瞄准 拉弓 射出梦想
  19. 【H5】 h5运行在手机浏览器查看控制台信息
  20. 年末促销 Windows Azure在线充值送微软商城硬件大礼包

热门文章

  1. USB摄像头转HDMI设备,USB Camera to HDMI
  2. IC封装尺寸信息中的BSC是什么意思？
  3. 住建部大力支持购买第一套住房，下降首付比、首套利率
  4. 重建大师6.0多源通吃！卫星建模、下视影像三维建模、点云融合建模...
  5. machinations游戏经济系统验证工具
  6. IO多路复用实现方式
  7. 《水知道答案2》观后小结
  8. 2020年阴历三月初七 投资理财～常年累月定投银行股年化收益率10%+
  9. 【system】cmd命令大全
  10. 【面试官说“回去等通知”，我到底会不会等来通知？】