（一）必看导言

1.为什么要学习 Python

• 开发Agents目前主要有两种语言：Python 和 TypeScript

一）基础篇

（一）概述

SVG，Scalable Vector Graphics，可缩放的矢量图形

1.图形和图像

• 图形：是由 被称为矢量的数学对象 所定义点、线、面等所描绘而成
• 图像：又称为栅格图、点阵图、位图或像素图，用像素描述图像中每一个点颜色和亮度等信息

2.svg特点

• svg使用xml绘制图形（canvas绘制图形）
• 可以使用文本编辑器创建和修改图形
• 因为是描述的图形，浏览器会根据描述来绘制图形，而不是使用像素填充空间，所以svg 适合不同大小的屏幕
• 因为是xml语言描述的图形，图形中的部分都是由标签组成，其中 每一个标签都可以使用javascript和css控制与交互
• svg提供了强大的滤镜功能，可以绘制更逼真、更复杂的图形效果

（一）概述

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

1.Canvas绘制的图形是位图

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

（一）谈一谈对 MVVM 的理解？

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

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

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

（一）简述 TCP 连接的过程（淘系）

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

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

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

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

（一）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;
}

（一）下面的模块导出了什么结果？

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

/* 
{ 
  d: 'd'
}
*/

（一）组件通信总结

面试题：vue 组件之间有哪些通信方式？

1.父子组件通信

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

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

（一）介绍下重绘和重排（repaint & reflow），以及如何进行优化

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

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

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

（一）五层网络模型

1.分层的意义

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

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

• 我用什么装可乐？

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

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

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

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

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

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

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

• 如何运输？

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

这就形成了一个分层结构