字节跳动前端面经实习-基础架构

阳光穿透心脏的1/2处 2022-08-31 02:30 217阅读 0赞

面试时间：2021.7.21

# 一面 #

*  **node的模块加载流程**
 *  **commonjs和es6模块加载的区别**
 *  **vue的$nextTick函数的作用 底层如何实现的？**  
    文档描述：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。  
    底层实现：通过MutationObserve、Promise.then()、setImmediate实现监控DOM变更及执行回调函数，若环境不支持则使用setTimeout实现
 *  问了一下项目的爬虫实现
 *  **说一下微信小程序的rpx，那计算出来0.5px就渲染0.5px吗**  
    rpx详见小程序文档。  
    0.5px会被渲染为1px（1px已是最小单位）  
    如果需要显示0.5px可以使用transform：scale(0.5)来缩放1px
 *  **跨域方式，如果跨域发生，服务器返回的是什么呢？**  
    跨域方式详情百度。  
    如果发生了跨域，服务器仍然会正常返回（code = 200）  
    **跨域只是浏览器的安全限制，服务器正常返回的数据被浏览器屏蔽而已**
 *  **display：none 和visibility：hidden区别 是否存在与dom tree？ 将他们显示出来会发生什么？**  
    1、空间占据。前者不占据空间位置，后者仍然占据空间位置，只是被隐藏。  
    2、属性继承。前者连同子元素一同消失。而后者子元素也会继承hidden属性，但若给子元素增加visibility：visible则重新可见。  
    3、回流重绘。前者的改变会触发回流重绘，后者的改变只会触发重绘。  
    **两者都存在于DOM Tree中**
 *  完成一个计算梯度税费的函数

// Calculate the tax owed on a salary.
    // The tax rate will be
    // Tax Table format - Array of objects (not sorted)
    // object properties
    // tax - int : percentage to tax at
    // start - int : The dollar to start taxing
    // end - int : The dollar to stop taxing
    
    //tip：taxes是taxTables的示例。数组中税收对象乱序给出
    taxes = [
    { 
    "tax": 10,
    "start": 1,
    "end": 1000
    }, { 
    "tax": 50,
    "start": 5001,
    "end": 10000
    }, { 
    "tax": 35,
    "start": 1001,
    "end": 5000
    },
    ];
    function taxOwed(salary, taxTables){ 
    	let result = 0;
    	//面试官提醒尽量不要修改入参，所以新创建一个tabTables副本
        let taxs = Array.from(taxTables);
        //将税表升序排列
        taxs.sort((a,b)=>{ 
           return (a.start - b.start)
        })
        for(let i=0; i<taxs.length; i++){ 
            if(salary > taxs[i].start){ 
                if(salary < taxs[i].end){ 
                    result += (salary - taxs[i].start)*taxs[i].tax/100;
                }else{ 
                    result += (taxs[i].end - taxs[i].start)*taxs[i].tax/100;
                }
            }else{ 
                break;
            }
        }
        return result;
    }

# 二面 #

*  箭头函数有哪些特性？  
    1、不能new  
    2、没有自己的this，指向父级的this  
    3、this的指向在定义时便确定，无法被更改，如apply、call等（与上一点本质一样，但容易忽略）

*  了解过class吗  
    ES6的class是ES5函数构造的语法糖,更贴近java等传统语言。  
    定义类有两种方法：  
    1、类声明。  
    Class Person\{\}  
    2、类表达式。  
    Let Person = class \{\}  
    类定义体中，使用static关键字来修饰类的静态属性和方法，只有通过类名能访问。否则，只有类的实例能访问。另外可以使用类的name属性访问类名
 *  发布订阅模式和观察者模式的区别，给dom添加事件回调 属于哪种  
    区别在于发布订阅中存在一个**调度中心**作为代理，发布者和订阅者不直接关联，实现了**解耦**，而观察者模式则是观察者直接观察被观察者。  
    给DOM标签添加事件回调属于观察者模式。
 *  原型链

Function.prototype.f = function() { };
    Object.prototype.o = function() { };
    function Factory() { }
    var car = new Factory();
    console.log(car.f); //实例本身没有f属性，所以打印原型链中Function.prototype.f的值
    console.log(car.o);//实例本身没有o属性，所以打印原型链中Object.prototype.f的值

*  事件队列

console.log('script start')
    async function async1() { 
     await async2()
     console.log('async1 end')
    }
    async function async2() { 
     console.log('async2')
    }
    async1()
    setTimeout(function() { 
     console.log('setTimeout')
    }, 0)
    new Promise(resolve => { 
     console.log('Promise')
     resolve()
    })
    .then(function() { 
     console.log('promise1')
    })
    .then(function() { 
     console.log('promise2')
    })
    console.log('script end')
    
    
    /* 运行结果 script start async2 promise script end async1 end promise 1 promise 2 settimeout */

*  requestAnimationFrame  
    requestAnimationFrame用于请求动画帧，会在屏幕刷新下一帧前执行其传入的回调函数。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。相比于settimeout，其运行时机更加准确，动画更加流畅。
 *  编程题

计算某个节点下有某标签有多少个 && dom中有哪些标签
     要求仅能使用dom level 2以下的api 
    
     domNode.childNodes 获得子节点
     domNode.tagName 获得标签名 
    
     function getTags(parent, tagName) { 
     }
    
     <body>
       <div>
          <span>1</span>
        </div>
        <span>2</span>
        <span>3</span>
     </body>
    
    getTags(document.body, 'div'); // 1
    getTags(document.body, 'span'); // 3
    getTags(document.body); // { 'div': 1, 'span': 3 };
    
    //以下为实现（广度优先搜索）
     function getTags(parent, tagName) { 
         let obj = { };
         let queue = [parent];
         
         while(queue.length > 0){ 
             let node = queue.shift();
             let childs = node.childNodes;
             childs.forEach(item => { 
                 let name = item.tagName;
                 if(obj.name){ 
                     obj.name++;
                 }else{ 
                     obj.name = 1;
                 }
             })
             queue.push(...childs);
         }
         if(tagName){ 
             return obj[tagName];
         }
         return JSON.stringify(obj);
     }

*  编程题

实现一个merge函数，功能是将两个有序数组，将它们合并成一个有序数组，如：
    
    let arr1 = [1, 2]
    let arr2 = [-1, 2, 8, 9]
    
    merge(arr1,arr2) =>  [-1, 1, 2, 2, 8, 9]
    
    
    //以下为实现
    function merge(arr1,arr2){ 
        let result = [];
        let left = 0,right = 0;
        
        while(left < arr1.length && right < arr2.length){ 
            if(arr1[left] >= arr2[right]){ 
                result.push(arr2[right++]);
            }else{ 
                result.push(arr1[left++]);
            }
        }
        
        if(left < arr1.length){ 
            result.push(...arr1.slice(left));
        }
        
        if(right < arr2.length){ 
            result.push(...arr2.slice(right));
        }
        
        return result;
    }

# 三面 #

*  编程题  
    给定一个对象数组，其中每个对象拥有姓名属性n、权重w，请实现一个函数能够随机返回姓名n，其概率与权重成正比
    
        //参数示例如下
        var peoples = [
        	{ n:"p1",w:100},
        	{ n:"p2",w:200},
        	{ n:"p3",w:1}
        ]
        //用区间实现
        function randName（p）{ 
        	//先查询权重总量
        	let sum = p.reduce((pre,cur)=>{ 
        		return pre + cur.w;
        	},0)
        	//生成一个权重总量范围内的随机数
        	let randNumber = Math.random()*sum;
        	for(let i=0; i<p.length; i++){ 
        		randNumber -= p[i].w;
        		if(randNumber <= 0){ 
        			return p[i].n;
        		}
        	}
        }
 *  算法题  
    实现层序遍历DOM树
    
        function levelOrder(root) { 
           let result = [];
           let queue = [root];
           while(queue.length > 0){ 
               let len = queue.length;
               let curLevel = [];
               for(let i=0; i<len; i++){ 
                   let curNode = queue.shift();
                   curLevel.push(curNode.val);
                   queue.push(...curNode.childNodes);
               }
               result.push(curLevel);
           }
           return result;
        }
 *  项目部分  
    介绍一下项目，有哪些页面功能，在其中担任完成了哪些？有哪些难点？做了什么优化？  
    短视频用到的swiper你怎么实现？  
    答：使用touch事件，touchstart与touchend两个点做差判断用户意图，然后根据touch事件中持续触发反馈的手指位置来对视图层做滑动动画  
    这个视图层的滑动效果你具体怎么设计呢？  
    我说可以用vue的动态style 给div绑定  
    有没有更好的方案？  
    emm（不知道）  
    这里用transition：translate属性会更好

**项目部分体验下来，感觉主要是面试官想从具体的功能设计深挖技术实现细节来考察是否会研究技术原理（求知和思考能力）和解决具体问题的能力（动手能力），这些都是理论能力的输出沉淀，也是具体工作中重要的点吧**

在上份实习中学习到什么？有哪些提升？  
谈了技术上，流程规范（合作开发使用git，需求管理工具，接口管理工具等）上，业务沟通上的提升

自认为有哪些优缺点？

# 面试总结： #

1、解题时，可以将思路描述出来。一来是捋顺思路，将面试官代入小黄鸭调试法，可以查漏补缺。二来是将思路展现给面试官，表示你在思考。有可能会得到面试官的一些帮助，比如如果思路错的话，他可能就提前纠正你了，或者在关键的地方提示你一下。  
2、整场面试，尽量展示优点，不谈缺点。比如面试官谈到一个具体问题时，在回答过程中到说到擅长的点可以在回答完后主动延伸扩展谈论一下。当面试官询问有什么缺点时，尽量避开致命的点，比如技术人说自己技术不行，而可以避重就轻地说，比如之前缺乏规范的开发流程、团队合作流程之类的