字节跳动丨前端丨秋招面经总结（一）丨2021丨

腐烂的橘子
9075
2020.11.17
2021.03.08
发布于 未知归属地
字节跳动JavaScript前端我要上推荐腐烂的橘子求职面试

bytedance.jpg

CSS

怎么实现边框宽度是 0.5px？

答：首先使用 transform:scale(0.5); 将其缩小到一半，再使用如下代码放大到原来的大小，这时边框就变为 0.5px 了。

CSS
top:-50%;
right:-50%;
bottom:-50%;
left:-50%;

flex 详细介绍属性

答：flex 有以下三个 属性：

  • flex-grow
  • flex-shrink
  • flex-basis
CSS
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;

画半圆

答：

  • 高度设置为宽度的一半
  • border-radius 设置左右圆角半径为高度值
CSS
HTML
.semi-circle {
  width: 100px;
  height: 50px;
  background: #FF9900;
  border-radius: 50px 50px 0 0;
  margin: auto;
}

什么是 BFC 和 IFC

答：

BFC(Block Formatting Contexts)直译为"块级格式化上下文"，就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？

  • float 的值不为 none
  • overflow 的值不为 visible
  • position 的值不为 relative和static
  • display 的值为 table-cell, table-caption, inline-block 中的任何一个

比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC一般有什么用呢？

  • 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

伪类与伪元素差别

  • 伪类和伪元素都是用来表示文档树以外的"元素"。
  • 伪类和伪元素分别用单冒号:和双冒号::来表示。
  • 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类。

CSS 动画里的 GPU 加速开启（3d属性）与原理（GPU）

JavaScript

  • commonJS 和 es6 模块化的区别
  • new 一个对象发生了什么
  • es6 新特性
  • 暂时性死区的定义
  • 如何判断一个对象为空
  • 如何判断 symbol 对象为空
  • 什么是事件循环，事件代理
  • typeof 和 instanceof 的区别
  • 装箱拆箱，隐式转换
  • 事件循环，V8 与 Libuv 事件循环的差异
  • 原型链，为什么要这么设计
  • ES5 继承，寄生组合式
  • ES6 继承，实例成员与静态成员处理
  • CommonJS 与 ES Module 差异
  • 什么是柯里化和尾递归

Vue

  • vue 和 jquery 的区别
  • vue 生命周期
  • 什么时候会使用 keep-alive 组件
  • 实现一个 vue 组件，底部可以滑入滑出。

运行环境

  • 事务的概念
  • 防抖节流应用场景
  • 介绍一下 xss 和 csrf攻击

HTTP

  • http1.0、http1.1、http2.0 的区别
  • 介绍一下 http 缓存。
  • Etag 和 Last-modified 比较。
  • encodeURI 和 encodeURIComponent 的区别
  • http 协议报文结构
  • http 状态码
  • 协商缓存为什么做了 http1.1 header 字段的优化

算法

Python3
"""
-  描述：对于任意子序列可以计算一个 `X` 值，`X = sum(subArray) * min(subArray)`，求最大 `X`。
   输入：[3,1,6,4,5,2]
   输出：X = (6+4+5) * 4 = 60

-------------------------------------
思路：采用大顶堆，从最大的一个开始 pop，直到 pop 完。时间复杂度：O(n)，空间复杂度：O(n)
"""
import heapq
def maxX(nums):
    res, subSum = float('-inf'), 0
    q = []
    for i in nums:
        heapq.heappush(q, -i)
    while q:
        cur = -heapq.heappop(q)
        subSum += cur
        res = max(res, subSum * cur)
    return res
字节跳动
1108 题·新题 314·
5.9k·
评论 (1)