【面试题库】（1）

希希118
99 阅读5分钟

目录

  1. 函数调用 - this
  2. flex布局
  3. canvas绘制矩形原理
  4. 算法题
  5. RAF 和 RIC 是什么
  6. Es6 的 let 实现原理
  7. 前端性能定位以及优化指标

一、函数调用 - this

const a = {
    x: '111',
    getX: function() {
        return this.x;
    }
};
const aGetX = a.getX;
console.log(aGetX()); // undefined

image.png

二、Css布局发展 与 flex布局

CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto，实现水平垂直同时居中可以如下设置：

.dad {
    position: relative;
}

.son {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

或者

.dad {
    position: relative;
}

.son {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

1) flex 基本概念

使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。

#dad {
    display: flex;
    justify-content: center;
    align-items: center
}

image.png

flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 display: flex），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个

image.png

1.1) 容器

容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

image.png

1.1.1) justify-content

justify-content：定义了项目在主轴的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

image.png

1.1.2) align-items

align-items: 定义了项目在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

image.png

1.2) 子容器

  • 在主轴上如何伸缩：flex

image.png

子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定。

flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩。

虽然 flex 是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。

image.png

1.2.1) 单独设置子容器如何沿交叉轴排列：align-self

image.png

image.png

1.3) 轴

如图所示，轴 包括 主轴 和 交叉轴，我们知道 justify-content 属性决定子容器沿主轴的排列方式，align-items 属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中，flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。

image.png

1.3.1) flex-direction 决定主轴的排列方向 , 交叉轴的方向由主轴确定
1.3.2) 交叉轴

主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由 flex-start 和 flex-end 表示。

三、canvas绘制矩形原理

Canvas API 提供了一个通过 JavaScript 和 HTML 的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

四、算法题

/*
input :
[
["X", "O", "O", "O", "O", "O"],
["X", "X", "O", "O", "X", "X"],
["O", "X", "O", "O", "X", "O"],
["O", "O", "X", "O", "O", "O"],
["O", "X", "X", "O", "X", "X"],
["X", "O", "O", "O", "O", "X"],
]
output:区块个数
// only check up-down-right-left ( no diagnoal )

answer:
output:5
[
[1, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 2, 2],
[0, 1, 0, 0, 2, 0],
[0, 0, 3, 0, 0, 0],
[0, 3, 3, 0, 4, 4],
[5, 0, 0, 0, 0, 4],
]
*/

五 RAF 和 RIC 是什么

requestAnimationFrame： 告诉浏览器在下次重绘之前执行传入的回调函数(通常是操纵 dom，更新动画的函数)；由于是每帧执行一次，那结果就是每秒的执行次数与浏览器屏幕刷新次数一样，通常是每秒 60 次。

requestIdleCallback： : 会在浏览器空闲时间执行回调，也就是允许开发人员在主事件循环中执行低优先级任务，而不影响一些延迟关键事件。如果有多个回调，会按照先进先出原则执行，但是当传入了 timeout，为了避免超时，有可能会打乱这个顺序。

六 Es6 的 let 实现原理

原始 es6 代码

var funcs = [];
for (let i = 0; i < 10; i++) {
  funcs[i] = function () {
    console.log(i);
  };
}
funcs[0](); // 0

babel 编译之后的 es5 代码（polyfill）

var funcs = [];

var _loop = function _loop(i) {
  funcs[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
funcs[0](); // 0

其实我们根据 babel 编译之后的结果可以看得出来 let 是借助闭包和函数作用域来实现块级作用域的效果的 在不同的情况下 let 的编译结果是不一样的

七 前端性能定位以及优化指标

前端性能优化 已经是老生常谈的一项技术了 很多人说起性能优化方案的时候头头是道 但是真正的对于性能分析定位和性能指标这块却一知半解 所以这道题虽然和性能相关 但是考察点在于平常项目如何进行性能定位和分析

  1. 我们可以从 前端性能监控-埋点以及 window.performance相关的 api 去回答
  2. 也可以从性能分析工具 Performance 和 Lighthouse
  3. 还可以从性能指标 LCP FCP FID CLS 等去着手

八 你不知道的 Web Workers

Web Worker 的意义在于可以将一些耗时的数据处理操作从主线程中剥离，使主线程更加专注于页面渲染和交互。

  • 懒加载
  • 文本分析
  • 流媒体数据处理
  • canvas 图形绘制
  • 图像处理

image.png juejin.cn/post/684490…

参考

总结

  • flex 的核心的概念就是 容器 和 轴
  • justify-content 属性用于定义如何沿着主轴方向排列子容器。
  • align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距
  • flex-direction 决定主轴的排列方向 , 交叉轴的方向由主轴确定
avatar
文章
阅读
粉丝