字节 前端 一面 面筋（附答案）

2、输入一个URL会发生什么？ 1.用户输入URL，会使用浏览器默认搜索引擎加上搜索内容合成url；如果是域名会加上协议（如https）合成完整的url。 2.然后按下回车。浏览器进程通过进程间通信把url传给网络进程。（网络进程接收到url才发起真正的网络请求）。 3.网络进程接收到url后，先查找有没有缓存。有缓存，直接返回缓存的资源。 没有缓存。（进入真正的网络请求）。 首先获取域名的IP，系统会首先自动从hosts文件中寻找域名对应的 IP 地址，一旦找到，和服务器建立TCP连接；如果没有找到，则系统会将网址提交 DNS 域名解析服务器进行 IP 地址的解析。 4.利用IP地址和服务器建立TCP连接（3次握手） 5.建立连接后，浏览器构建数据包（包含请求行，请求头，请求正文，并把该域名相关Cookie等数据附加到请求头），然后向服务器发送请求消息。 6.服务器接收到消息后根据请求信息构建响应数据（包括响应行，响应头，响应正文），然后发送回网络进程。 7.网络进程接收到响应数据后进行解析。如果发现响应行的返回的状态码为301，302，说明服务器要我们去找别人要数据。找响应头中的Location字段要，Location的内容是需要重定向的地址url。获取到这个url一切重新来过。如果返回的状态码为200，说明服务器返回了数据。 8.数据传输完成，TCP四次挥手断开连接。如果，浏览器或者服务器在HTTP头部加上如下信息，TCP就一直保持连接。保持TCP连接可以省下下次需要建立连接的时间，提示资源加载速度Connection:Keep-Alive 。 9.网络进程将获取到的数据包进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型，就将该请求交给下载管理器，该导航流程结束，不再进行；如果是text/html类型，就通知浏览器进程获取到文档准备渲染。 浏览器进程获取到通知之后。新建一个渲染进程。 渲染进程对文档进行页面解析和子资源加载。解析html生成DOM树，解析css生成规则树。 两个树结合生成渲染树（render tree），浏览器会根据渲染树布局，计算css样式，即每个元素在页面中的位置好和大小等信息。最后浏览器绘制各个节点，将页面展现给用户。

3、http2.0更新了什么？ 二进制分帧、首部压缩、流量控制、多路复用、请求优先级、服务器推送

4、new 操作符原理 创建空对象A、A的__proto__指向函数的protoType、this指向A、执行construstor

7、css3动画transition和transform性能+原理： 动画性能对比 transition < transform ，position < translate，animation适合场景 transition做动画时两个线程的工作情况是：对于浏览器来说，元素的高度一直在变化，因此这个动画的每一帧都需要主线程对元素进行布局，绘制成位图，将位图交由GPU线程，GPU将位图绘制到屏幕。两个线程来回切换工作，即使是移动十几个像素，主线程也需要对元素布局很多次，这部分的工作消耗相当大，相对较慢，这也是transition动画经常卡顿的原因。 使用transform时浏览器的工作情况是：主线程对元素进行布局，绘制成位图，交由GPU线程，transform执行的整个过程都在GPU进程执行绘制，两个线程来回切换的情况不多，而且transform不会触发浏览器的重新排版，不会影响周围的布局，这也意味着这种情况的动画比transition流畅一些。

1、网络分层以及对应层次的协议

5、.apply，call，bind 的区别 相同点：作用相同，都是动态修改this指向；都不会修改原先函数的this指向。 异同点： （1)执行方式不同： call和apply是改变后页面加载之后就立即执行，是同步代码。 bind是异步代码，改变后不会立即执行；而是返回一个新的函数。 （2)传参方式不同： call和bind传参是一个一个逐一传入，不能使用剩余参数的方式传参。 apply可以使用数组的方式传入的，只要是数组方式就可以使用剩余参数的方式传入。 (3)修改this的性质不同： call、apply只是临时的修改一次，也就是call和apply方法的那一次；当再次调用原函数的时候，它的指向还是原来的指向。 bind是永久修改函数this指向，但是它修改的不是原来的函数；而是返回一个修改过后新的函数，此函数的this永远被改变了，绑定了就修改不了。

6、发布-订阅模式：https://www.cnblogs.com/itgezhu/p/10947405.html

8、使用CSS3实现一个秒针绕一点转动的效果 #hour{     top: 98.5px;     width: 45px;     height: 3px;     background-color:green;     animation:second 216000s linear forwards infinite; } @keyframes second{     0%{ transform:rotate( 0deg); }     100%{ transform:rotate(360deg); } }

10、BFS+DFS 深搜，顾名思义，是深入其中、直取结果的一种搜索方法 如果深搜是一个人，那么他的性格一定倔得像头牛！他从一点出发去旅游，只朝着一个方向走，除非路断了，他绝不改变方向！除非四个方向全都不通或遇到终点，他绝不后退一步！因此，他的姐姐广搜总是嘲笑他，说他是个一根筋、不撞南墙不回头的家伙。 深搜很讨厌他姐姐的嘲笑，但又不想跟自己的亲姐姐闹矛盾，于是他决定给姐姐讲述自己旅途中的经历，来改善姐姐对他的看法。他成功了，而且只讲了一次。从那以后他姐姐不仅再没有嘲笑过他，而且连看他的眼神都充满了赞赏。他以为是自己路上的各种英勇征服了姐姐，但他不知道，其实另有原因…… 深搜是这样跟姐姐讲的：关于旅行呢，我并不把目的地的风光放在第一位，而是更注重于沿路的风景，所以我不会去追求最短路，而是把所有能通向终点的路都走一遍。可是我并不知道往哪走能到达目的地，于是我只能每到一个地方，就向当地的人请教各个方向的道路情况。 深搜优缺点 ①优点 能找出所有解决方案 优先搜索一棵子树，然后是另一棵，所以和广搜对比，有着内存需要相对较少的优点 ② 缺点 要多次遍历，搜索所有可能路径，标识做了之后还要取消（在图中需要做标识）。 在深度很大的情况下效率不高 使用场景：性格测试的游戏 参考文章：https://segmentfault.com/a/1190000010563179 广搜，顾名思义，是多管齐下、广撒网的一种搜索方法 广搜属于一种盲目搜寻法，目的是系统地展开并检查图中的所有节点，以找寻结果。换句话说，它并不考虑结果的可能位置，彻底地搜索整张图，直到找到结果为止。类似树的按层遍历，其过程为：首先访问初始点Vi，并将其标记为已访问过，接着访问Vi的所有未被访问过可到达的邻接点Vi1、Vi2 … Vit，并均标记为已访问过，然后再按照Vi1、Vi2…Vit 的次序，访问每一个顶点的所有未被访问过的邻接点，并均标记为已访问过，依此类推，直到图中所有和初始点Vi有路径相通的顶点都被访问过为止。 广搜优缺点 ①优点 对于解决最短或最少问题特别有效，而且寻找深度小 每个结点只访问一遍，结点总是以最短路径被访问，所以第二次路径确定不会比第一次短 ②缺点 内存耗费量大（需要开大量的数组单元用来存储状态，需要使用队列来保存遍历元素） 使用场景：计算网络数据链路层的最短跳数，走迷宫的最短路径

手撕给了一道hard，有点恐怖

是社招吗

大佬面的什么部门？