字节跳动前端一面面经（带答案）

一、前言

 面试之前孩还在忙着些业务，感觉复习的有点不扎实，从js到ES6到网络、vue、webpack，但是面试过程中更加在意的就是基础的知识的理解与掌握。

二、具体题目

1、说说你一般的代码规范（我的实习简历上写了，写代码时注重代码规范，就比较挖坑，说了说eslint的一些规则以及命名规范）
2、移动端适配的1px问题有遇到过吗，大概讲讲怎么解决的

（1）我们要先了解像素、分辨率的概念，我们知道我们看到的屏幕的分辨率是640x480，这些数字就是由像素构成的，像素是组成一幅图像的全部亮度和色度的最小图像单元（每个像素的大小是不固定的，他是根据设备的分辨率决定的），在屏幕上显示的像素多，单个像素尺寸比较小。
（2）设备像素与逻辑分辨率（设备独立像素）
我们手机分辨率翻倍，屏幕更加的清晰，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同，所以就用到了逻辑分辨率，乔布斯在iPhone4的发布会上首次提出了Retina
Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。
（3）设备像素比（设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值）
（4）1px问题出现的原因：当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同
（5）解决方案 planA:
在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：
我们根据这个像素比，来算出他对应应该有的大小,（弊端，各个浏览器的兼容性不一致导致表现出来还是有点问题） planB：transform: scale(0.5) 方案
scale(0.5) 方案，根据是几倍屏幕来写缩放的倍数
/* 2倍屏 /
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/ 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}

3、写一写css吧，固定宽高比例是1:2的div 的实现

两种方法：操作js（监听resize()方法来获取宽度来设置高度）
用纯css的padding-bottom：50%或者
padding-top：50%

4、讲一讲事件模型

<div class = '1'>
	<div class = '2'></div>
</div>
console.log("1")
console.log("2")

如何先打出来1再输出2
我说了事件捕获与事件冒泡，点击一个div 的过程，先是捕获再是冒泡.
给两个函数加一个监听事件，注意addEventListener的第三个参数，当为true的时候为事件捕获的方式，代码如下：

var x = document.getElementByClassName('1')[0]
x.addEventListener('click',function(){
	console.log("1")
},true)
var y = document.getElementByClassName('2')[0]
y.addEventListener('click',function(){
	console.log("2")
},true)

5、讲一讲axios的方式吧
我说了get、post、put、delete
6、说说get、post区别

（1）GET使用URL或Cookie传参，而POST将数据放在BODY中”，这个是因为HTTP协议用法的约定。
（2）GET方式提交的数据有长度限制，则POST的数据则可以非常大”，这个是因为它们使用的操作系统和浏览器设置的不同引起的区别
（3）POST比GET安全，因为数据在地址栏上不可见”， （4）get请求后，按后退按钮/刷新按钮无影响，post数据会被重新提交
（5）get和post是具有相同的语法的，但是有不同的语义，get是用来获取数据的，post是用来发送数据的，()
（6）最重要的一点就是，get、post本质上没有一点点差别、知识协议或者规范所导致的，上面五条都是使用上的差异而已

7、如何判断一个div出现在可视区域内（包括在屏幕右边的情况）
8、了解缓存吗，说说缓存的应用场景
我说了max-age和expiress以及协议缓存，一起说了说。这是自己之前总结的图

9、写道算法题，倒数第k个节点，之前写过，看这篇博客
https://blog.csdn.net/qq_39897978/article/details/104746820
10、一道算法题说说思路
（1）两个链表不知道长度，在某一个节点之后他们是相等的，找出这个节点
我说了思路，先遍历得到两个链表的长度，算出他门的差x，让长的向前移动x位，再开始依次遍历，找到相同的点，输出，否则就没有。
（2)使用两个指针来进行判断

/**
 * Definition for singly-linked list.
 * function ListNode(val) {
 *     this.val = val;
 *     this.next = null;
 * }
 */

/**
 * @param {ListNode} headA
 * @param {ListNode} headB
 * @return {ListNode}
 */

var getIntersectionNode = function (headA, headB) {
    if (!headA || !headB) return null
    let A = headA, B = headB;
    while (A !== B) {
        A = A ? A.next : headB;
        B = B ? B.next : headA;
    }
    return A
}