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

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

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

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

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

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

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

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

（一）根据下面 ES6 构造函数的书写方式，要求写出 ES5 的

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

（一）Promise 基础

1.Promise 规范

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

2.Promise A+ 规定

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

（一）下面代码的输出结果是什么

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});

promise.then(() => {
  console.log(3);
});

console.log(4);

（一）浏览器的渲染流程

1.浏览器渲染整体流程

• 浏览器，用户浏览网页最基本的一个入口
• 整个流程可以分为网络和渲染

• 浏览器的网络线程会发送 http 请求，和服务器之间进行通信
• 之后将拿到的 html 封装成一个渲染任务，并将其传递给渲染主线程的消息队列
• 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程
• 整个渲染流程分为多个阶段
  • HTML 解析
  • 样式计算
  • 布局
  • 分层
  • 生成绘制指令
  • 分块
  • 光栅化
  • 绘制

（一）介绍下 BFC 及其应用

所谓 BFC，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

触发 BFC 的方式有很多，常见的有：

• 设置浮动
• overflow 设置为 auto、scroll、hidden
• position 设置为 absolute、fixed

常见的 BFC 应用有：

• 解决浮动元素令父元素高度坍塌的问题
• 解决非浮动元素被浮动元素覆盖问题
• 解决外边距垂直方向重合的问题

（一）let、var、const 的区别

1.经典真题

• let const var 的区别？什么是块级作用域？如何用？

2.声明变量关键字汇总

• 在 JavaScript 中，一共存在 3 种声明变量的方式
  • var
  • let
  • const
• 这是历史原因造成的
  • 最初声明变量的关键字就是 var
  • 但是为了解决作用域的问题，新增了 let 和 const 的方式

（一）什么是 <!DOCTYPE>？是否需要在 HTML5 中使用？

它是 HTML 的文档声明，通过它告诉浏览器，使用哪一个 HTML 版本标准解析文档。

在浏览器发展的历史中，HTML 出现过很多个版本，不同版本在元素、属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式。这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的 bug，所以文档声明是必须的。

而文档声明有多种书写格式，对应不同的 HTML 版本，<!DOCTYPE> 这种书写是告诉浏览器，整个文档使用 HTML5 的标准进行解析。

（一）CSS 单位总结

1.经典真题

• px 和 em 的区别

2.CSS 中的单位

1）绝对长度单位

• 常见的长度单位有米（m）、厘米（cm）、毫米（mm）
• 每一种单位的长度都是固定的
• 如：5cm，走到任何地方 5cm 的长度都是一致的

<div class="container"></div>