十五、Canvas 详细版

(一)概述

  • Canvas 是 HTML5 的一个新标签,相当于一个画布,可以用来绘制丰富的图形,最终渲染在浏览器上
  • Canvas 标签本身不具备绘制图形的能力,配合 JavaScript 提供的 CanvasAPI,才能绘制图形,文本和图像,以及实现动画和交互
  • 支持 2d 绘图,也支持 3d 绘图(WebGL)

1.Canvas绘制的图形是位图

  • 放缩会导致图像失真,所以需要注意放缩比例的控制
  • 可以操作每一个点位的像素,进而实现高度自定义的图形绘制和动画效果
  • 相当于 <img> 引入的图片,可以右键另存

郁子大约 35 分钟笔记渡一教育语言基础董明晨HTML5
十六、Vue相关面试题汇总

(一)谈一谈对 MVVM 的理解?

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。

  • Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;
  • View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,View 是一个同步 View 和 Model 的对象

在 MVVM 架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互, Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。


郁子大约 57 分钟笔记渡一教育笔面试题甄选谢杰
十二、网络相关面试题汇总

(一)简述 TCP 连接的过程(淘系)

TCP 协议通过三次握手建立可靠的点对点连接,具体过程是:

首先服务器进入监听状态,然后即可处理连接

第一次握手:建立连接时,客户端发送 syn 包到服务器,并进入 SYN_SENT 状态,等待服务器确认。在发送的包中还会包含一个初始序列号 seq。此次握手的含义是客户端希望与服务器建立连接。

第二次握手:服务器收到 syn 包,然后回应给客户端一个 SYN+ACK 包,此时服务器进入 SYN_RCVD 状态。此次握手的含义是服务端回应客户端,表示已收到并同意客户端的连接请求。


郁子大约 33 分钟笔记渡一教育笔面试题甄选袁进
十三、工程化相关面试题讲解

(一)CMJ 和 ESM

1.CommonJS

1)关键词

  • 社区标准
  • 使用函数实现
  • 仅 node 环境支持
  • 动态依赖(需要代码运行后才能确定依赖)
  • 动态依赖是 同步执行

2)原理

// require函数的伪代码
function require(path) {
  if (该模块有缓存吗) {
    return 缓存结果;
  }
  function _run(exports, require, module, __filename, __dirname) {
    // 模块代码会放到这里
  }

  var module = {
    exports: {},
  };

  _run.call(module.exports, module.exports, require, module, 模块路径, 模块所在目录);

  // 把 module.exports 加入到缓存;
  return module.exports;
}

郁子大约 14 分钟笔记渡一教育笔面试题甄选袁进
十四、工程化相关面试题汇总

(一)下面的模块导出了什么结果?

exports.a = "a";
module.exports.b = "b";
this.c = "c";
module.exports = {
  d: "d",
};

/* 
{ 
  d: 'd'
}
*/

郁子大约 29 分钟笔记渡一教育笔面试题甄选袁进
十五、Vue相关面试题讲解

(一)组件通信总结

面试题:vue 组件之间有哪些通信方式?

1.父子组件通信

绝大部分 vue 本身提供的通信方式,都是父子组件通信

  • prop
  • event
  • style & class
  • attribute
  • native 修饰符
  • $listeners
  • v-model
  • sync 修饰符
  • $parent & $children
  • $slots & $scopedSlots
  • ref

郁子大约 32 分钟笔记渡一教育笔面试题甄选袁进
十、浏览器相关面试题汇总

(一)介绍下重绘和重排(repaint & reflow),以及如何进行优化

整个页面可以看做是一幅画,这幅画是由浏览器绘制出来的,浏览器绘制这幅画的过程称之为渲染。

渲染是一件复杂的工作,它大致分为以下几个过程:

  1. 解析 HTML,生成 DOM 树,解析 CSS,生成样式规则树
  2. 将 DOM 树和样式规则树结合,生成渲染树(Render Tree)
  3. 根据生成的渲染树,确定元素的布局信息(元素的尺寸、位置),这一步称之为 reflow,译作重排或回流
  4. 根据渲染树和布局信息,生成元素的像素信息(元素横纵的像素点,左上角的偏移量、每个像素的颜色等)。这一步称之为 repaint,译作重绘
  5. 将像素信息提交到 GPU 完成屏幕绘制

郁子大约 12 分钟笔记渡一教育笔面试题甄选谢杰
十一、网络相关面试题讲解

(一)五层网络模型

1.分层的意义

  • 当遇到一个复杂问题的时候,可以使用分层的思想把问题简单化

如:有半杯 82 年的可乐,想分享给朋友王富贵,但已经 10 年没有联系了。要完成这件事,可能要考虑:

  • 我用什么装可乐?

    可能的方案:塑料瓶、玻璃瓶、煤气罐

  • 怎么保证可乐始终处于低温?

    可能的方案:保温杯、小冰箱、冰盒

  • 如何保证可乐不被运输的人偷喝?

    可能的方案:封条、在上面写「毒药」

  • 如何获取王富贵的地址?

    可能的方案:报案失踪、联系私人侦探、联系物流公司的朋友

  • 如何运输?

    可能的方案:自行车、汽车、火车、高铁、飞机、火箭

这就形成了一个分层结构


郁子大约 90 分钟笔记渡一教育笔面试题甄选袁进
六、JavaScript相关面试题汇总

(一)根据下面 ES6 构造函数的书写方式,要求写出 ES5 的

class Example {
  constructor(name) {
    this.name = name;
  }
  init() {
    const fun = () ={
      console.log(this.name);
    };
    fun();
  }
}
const e = new Example("Hello");
e.init();

郁子大约 194 分钟笔记渡一教育笔面试题甄选谢杰
七、Promise相关面试题讲解

(一)Promise 基础

1.Promise 规范

  • Promise 是一套专门处理异步场景的规范
  • 能有效的避免回调地狱的产生,使异步代码更加清晰、简洁、统一
  • 这套规范最早诞生于前端社区,规范名称为 Promise A+

2.Promise A+ 规定

1)所有的异步场景,都可以看作是一个异步任务


郁子大约 4 分钟笔记渡一教育笔面试题甄选谢杰
2
3
4
5
...
18