字节互娱前端二面面经

是不是字节面试视频打不开就是挂了，说明没有下一轮了，挂了？
实习期间做了什么，部门介绍，抖音本地生活，有了解的这组咋样？说是今年刚成立，20多人，上海7、8人的样子

场景题

这部分没要求手写，口述思路，感觉最怕这种，答得比较差

实现Tooltip

原生js实现tooltip提示框的效果

追问是怎么保证弹出的提示框在原来的element上方，相对定位，绝对定位还是固定定位。应该是相对定位或者绝对定位都行，只答了相对定位

CSS画三角形

自己说了能想到的：一条边正好是矩形的一条边的情况

纯 CSS 实现绘制各种三角形（各种角度）

前端优化方案

答了以下

• 图片懒加载

• 路由懒加载

• CDN加载依赖

• SSR服务端渲染

• 对图片进行压缩，webp格式，HTTP2.0以前用精灵图，部分用CSS

• 只渲染可视部分DOM

• async、defer

• 虚拟DOM

追尾了图片懒加载方案，讲了使用IntersectionObserver的懒加载

实现瀑布流

给了我个杨超越的例子：https://tieba.baidu.com/p/5849674065#!/l/p1 （电脑端打开，想不到面试官挺潮）

我说保存每列的高度，然后优先加载最矮的，详细的参考：https://www.jianshu.com/p/ef89f7965fc3

算法题

剑指 Offer 32 - III. 从上到下打印二叉树 III

请实现一个函数按照之字形顺序打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右到左的顺序打印，第三行再按照从左到右的顺序打印，其他行以此类推。

例如:
给定二叉树: [3,9,20,null,null,15,7],

    3
   / \
  9  20
    /  \
   15   7

返回其层次遍历结果：

[
  [3],
  [20,9],
  [15,7]
]

我的代码

/**
 * Definition for a binary tree node.
 * function TreeNode(val) {
 *     this.val = val;
 *     this.left = this.right = null;
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number[][]}
 */
var levelOrder = function(root) {
    if(!root) return [];
    const queue = [root];
    const res = [];
    let level = 0;
    while(queue.length){
        res[level] = [];
        let levelNum = queue.length;
        while (levelNum--) {
            const front = queue.shift();
            res[level].push(front.val);
            if (front.left) queue.push(front.left);
            if (front.right) queue.push(front.right);
        }
        if (level % 2) {
            res[level].reverse();
        }
        level++;
    }
    return res;
};

最后顺便推荐一下牛客的《前端岗位面试真题宝典》专刊 ，内容是前端岗的面试八股文及答案，面试会考的内容基本都总结到了，解答也挺专业的。我正在学，性价比还是很不错的，推荐给大家！