字节跳动前端一面面经(带答案)

一、前言
 面试之前孩还在忙着些业务,感觉复习的有点不扎实,从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
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章