字节飞书前端三面

整场面试持续35分钟，面试官很友好

1. 自我介绍，详细介绍一下实习过程中令我印象深刻的点
2. 问了一下我的专业，为什么不读博、为什么选择前端
3. 问了一个项目相关的问题

4. 求字符串的最长不重复子串长度

以下是使用 JavaScript 实现的最长不重复子串长度算法：

function longestSubstringWithoutRepeating(s) {
    let maxLength = 0; // 最长不重复子串的长度
    let charSet = new Set(); // 用于记录窗口中的字符
    let left = 0, right = 0; // 滑动窗口的左右边界

    while (right < s.length) {
        if (!charSet.has(s[right])) {
            charSet.add(s[right]);
            maxLength = Math.max(maxLength, right - left + 1);
            right++;
        } else {
            charSet.delete(s[left]);
            left++;
        }
    }

    return maxLength;
}

// 示例使用
let s1 = "abcabcbb";
console.log(longestSubstringWithoutRepeating(s1)); // 输出 3，对应的最长不重复子串是 "abc"

let s2 = "bbbbb";
console.log(longestSubstringWithoutRepeating(s2)); // 输出 1，对应的最长不重复子串是 "b"

let s3 = "pwwkew";
console.log(longestSubstringWithoutRepeating(s3)); // 输出 3，对应的最长不重复子串是 "wke"

这个 JavaScript 实现与之前的 Python 实现类似，使用了滑动窗口算法来解决问题，时间复杂度为 O(n)，其中 n 是字符串的长度。

6. 求二叉树的公共祖先（完全不记得怎么做了）

要找到二叉树中两个节点的公共祖先，可以使用递归的方法来解决这个问题。具体步骤如下：

从根节点开始遍历二叉树。
如果当前节点是 null 或者等于其中一个目标节点，则返回当前节点。
递归搜索左子树和右子树，分别查找是否包含目标节点。
如果左右子树都返回非空值（即分别找到了两个目标节点），则当前节点即为最近公共祖先。
如果左右子树中有一个为空，另一个非空，则返回非空子树的结果。
如果左右子树都为空，则返回 null。

下面是一个使用递归实现的 JavaScript 示例代码：

function lowestCommonAncestor(root, p, q) {
    // 如果当前节点为空或者等于其中一个目标节点，则返回当前节点
    if (!root || root === p || root === q) {
        return root;
    }

    // 递归搜索左子树和右子树
    const left = lowestCommonAncestor(root.left, p, q);
    const right = lowestCommonAncestor(root.right, p, q);

    // 如果左右子树都返回非空值，则当前节点即为最近公共祖先
    if (left && right) {
        return root;
    }

    // 如果左右子树中有一个为空，另一个非空，则返回非空子树的结果
    return left ? left : right;
}

在这个代码中，root 表示当前节点，p 和 q 分别表示两个目标节点。函数会递归搜索左子树和右子树，直到找到最近的公共祖先为止。最终返回的节点就是两个目标节点的最近公共祖先。

8. 问有没有拿到美团的offer
9. 反问

面试时长比较短，问的问题也很少，感觉很凉

作者：洒脱的马里奥等oc
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

字节飞书前端

1面

图片格式知道哪些，jpg png webp svg，

面试官说了一下webp已经很常用了，用一个access字段可以放cdn上（记了个大概没听懂，等大佬解答）

图片格式是指存储图像数据的文件格式，常见的图片格式包括：

JPEG（.jpg 或 .jpeg）：一种常用的有损压缩格式，适合存储照片等真实场景的图像。
PNG（.png）：一种无损压缩格式，支持透明度和索引色，适合存储图标、图形等简单图像。
GIF（.gif）：一种支持动画和透明度的格式，适合存储简单的动画图像。
BMP（.bmp）：一种无损格式，文件较大，适合存储位图图像。
WebP（.webp）：由 Google 开发的一种现代的有损和无损压缩格式，可以显著减小图像文件的大小，提供了比 JPEG 和 PNG 更好的压缩率和图像质量。
SVG（.svg）：一种基于 XML 的矢量图形格式，支持无限放大而不失真，适合存储图标、图形等矢量图像。

除了以上列出的常见图片格式，还有一些其他的图片格式，如 TIFF（.tiff）、HEIF（.heic）等。这些格式各有特点，可以根据实际需求选择合适的格式。其中，WebP 格式由于其优秀的压缩性能和图像质量，正在逐渐被广泛接受和应用。利用 CDN（内容分发网络）可以加速图片的加载速度，提升网站性能。

使用nextjs有什么要注意的，项目里用了

使用 Next.js 进行开发时，有几个要注意的方面：

页面和路由： Next.js 是基于文件系统的路由，每个页面都对应一个独立的文件。确保页面文件的命名和路径正确，以确保路由正常工作。
数据获取： 使用 getStaticProps、getServerSideProps 或 getInitialProps 来获取页面所需的数据。根据需求选择合适的数据获取方法，并确保数据获取的准确性和及时性。
样式处理： Next.js 内置支持 CSS、Sass、Less 和 CSS Modules 等样式处理方式。可以根据项目需求选择合适的样式处理方式，并合理组织样式文件。
代码拆分： 使用动态导入和懒加载等技术来拆分代码，减小页面加载的体积，提升网站性能。确保页面中只加载所需的代码，避免不必要的资源浪费。
静态资源： Next.js 支持导入静态资源（如图片、字体等），可以直接在页面中引用这些资源。确保静态资源的路径正确，并且合理利用浏览器缓存来提升页面加载速度。
部署配置： 根据项目需求选择合适的部署方式，并进行相应的配置。可以使用 Vercel、Netlify 等平台来快速部署 Next.js 应用，并享受其提供的自动化部署和性能优化功能。
SEO 优化： 使用 <Head> 组件来设置页面的头部信息，包括页面标题、描述、关键词等，以及其他 SEO 相关的元信息。确保页面内容的合理结构和语义化，提升搜索引擎的收录和排名。
错误处理： 使用 ErrorBoundary 组件来捕获页面中的错误，提供友好的错误提示信息，并记录错误日志以便进行排查和修复。
性能监控： 使用性能监控工具来监测页面的加载速度、性能指标等，并根据监控结果进行优化和改进。
文档和社区： 阅读 Next.js 的官方文档，并参与 Next.js 的社区讨论，获取更多开发技巧和最佳实践。及时关注 Next.js 的更新和发布，了解最新的功能和改进。

其他全是项目实习

前端面试题详解整理73|nextjs有什么要注意的,字符串的最长不重复子串长度 ,图片格式,求二叉树的公共祖先,

字节飞书 前端三面