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

本是古典何须时尚 2023-07-18 02:55 5阅读 0赞

###### 一、前言 ######

面试之前孩还在忙着些业务，感觉复习的有点不扎实，从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以及协议缓存，一起说了说。这是自己之前总结的图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]  
9、写道算法题，倒数第k个节点，之前写过，看这篇博客  
[https://blog.csdn.net/qq\_39897978/article/details/104746820][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
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5ODk3OTc4_size_16_color_FFFFFF_t_70]: /images/20230528/b4bfa57803e543cd93881e12eee68cb9.png
[https_blog.csdn.net_qq_39897978_article_details_104746820]: https://blog.csdn.net/qq_39897978/article/details/104746820