虚拟DOM

1）虚拟Dom是什么？

Virtual Dom 是一种编程理念，将 UI 节点抽象成 JS 对象虚拟地保存在内存中，并且通过某些库（如 ReactDom）渲染成真实的 Dom。

浏览器的 Event Loop 机制

浏览器的多线程

浏览器是事件驱动的，浏览器中很多行为是异步的，会创建事件并放入执行队列中。

• 浏览器的渲染进程：
  1. GUI 线程
  2. JS 引擎线程
  3. 定时器触发线程
  4. 事件触发线程
  5. 异步HTTP请求线程

JavaScript 是单线程的

JavaScript 是单线程的，也就意味着它只有一个主线程，一次只能执行一段代码。

• JavaScript 的运行机制

  1. 所有同步任务都在主线程上执行，形成一个执行栈。
  2. 主线程之外，还存在”任务队列“。只要异步任务有了运行结果，就在”任务队列“之中放置一个事件。
  3. 一旦”执行栈“中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
  4. 主线程不断重复上面的第三步。

• JavaScript 中有两种异步任务：

  1. 宏任务：script, setTimeout/setInterval, setImmediate, I/O, UI rendering
  2. 微任务：Promises, Object.observe, MutationObserver, postMessage

内存管理

前端为什么要关注内存

• 防止页面占用内存过大，引起客户端卡顿，甚至无响应（用户体验）；
• Node.js 使用 V8 引擎，内存对于后端服务的性能至关重要，因为后端服务的持久性，后端更容易造成内存溢出（性能）。

JS数据类型与JS内存机制

数据类型

• 原始数据类型：字符串（String）、数字（Number）、布尔（Boolean）、空对象（Null）、未定义（Undefined）、Symbol（_NEW_）
• 引用数据类型：Object
• 内存空间：栈内存（stack）、堆内存（heap）

git 和 git-flow 备忘录

> A successful Git branching model by Vincent Driessen

var、let 和 const

let 与 var 的区别

1. let 仅作用于 let 命令所在的代码块内（ block-scoped ）；而 var 声明的变量作用于函数块内（ function-scoped ），只有函数块内能引入新的作用域。
2. let 不受变量提升的约束；而 var 声明的变量存在变量提升。
3. let 声明的全局变量不是全局对象的属性，即不能通过 window 对象来访问；而 var 声明的全局变量是全局对象的属性，即可以通过 window 对象来访问。
4. let 不允许重复定义同一个变量；而 var 命令可以无限次重复定义一个变量。

JavaScript 事件机制

DOM 事件流

DOM2 级事件 规定的事件流包括三个阶段： 事件捕获阶段、处于目标阶段和事件冒泡阶段。

MacOS 相关安装及配置

Homebrew

• 官网：https://brew.sh/

• 安装命令：

1

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Example usage:
  brew search [TEXT|/REGEX/]
  brew (info|home|options) [FORMULA...]
  brew install FORMULA...
  brew update
  brew upgrade [FORMULA...]
  brew uninstall FORMULA...
  brew list [FORMULA...]

Troubleshooting:
  brew config
  brew doctor
  brew install -vd FORMULA

Developers:
  brew create [URL [--no-fetch]]
  brew edit [FORMULA...]
  https://docs.brew.sh/Formula-Cookbook.html

Further help:
  man brew
  brew help [COMMAND]
  brew home

• 安装位置

1

/usr/local/Cellar/

JaveScript 数据类型

JavaScript 的基本数据类型

最新的 ECMAScript 定义了6种原始数据类型以及 Object 对象：
原始数据类型：

• string （字符串）
• number （数字、NaN）
• boolean （布尔类型，只有两个值：true、false）
• null （表示为空的特殊关键字）
• undefined （表示定义的变量未被赋值）
• symbol （ES6新增，表示独一无二的值）

引用数据类型：

• Object 对象

文本溢出解决方案

单行文本溢出

1. 使用 text-overflow: ellipsis 属性

1
2
3

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

[译文] CSS 栅格系统（创建你自己的CSS栅格系统）

本文翻译自 Creating Your Own CSS Grid System via Jan Drewniak ，文章版权归原作者所有。

CSS栅格的概念很早就出现了，栅格的使用经常捆绑在例如Bootstrap之类的框架中。我并不讨厌Bootstrap，但是当只需要使用栅格系统的时候，使用框架会显得过于厚重。以下是经过仔细斟酌后的创建栅格系统的方法。

创建CSS栅格系统的元素

正如上图所示，基本的栅格系统址包含几个元素：

• 一个容器（a container)
• 行（rows)
• 列（columns）
• 间隙（gutters - 列之间的空隙）