前言

读完本文您将了解以下几点

1，浏览器内有哪些进程，这些进程都有些什么作用。

2，浏览器地址输入 URL 后，内部的进程、线程都做了哪些事，以及我们与浏览器交互时，内部进程是怎么处理这些交互事件的。

浏览器架构

进程和线程

1，进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位。

2，线程（thread）是 CPU 调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。

websocket 简介

websocket 是什么

1，websocket 是一种网络通信协议。RFC6455 定义了它的通信标准。

2，websocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通信的协议。

websocket 协议的特点

1，其最大的特点就是服务器可以主动的向客户端推送消息，客户端也可以主动向服务器发送消息，是真正的双向平等对话，属于服务器推送技术的一种。

2，它建立在 TCP 协议之上，服务端的实现比较容易。

JS 概念相关

js 数据类型

1，基本数据类型：

• string、number、boolean、null、undefined、symbol。

2，引用数据类型：

• object、array、function 等。

js 类型转换

1，转换为字符串：使用 String()/toString() 方法，也可以使用引号或加法运算符进行隐式转换。

2，转换为数据类型：使用 Number() 方法，或 parseInt()/parseFloat() 方法。

HTML

src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

• src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应用到文档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

• href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

对 HTML 语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

前言

读完本文您将了解以下几点

1，如何配置一个基于 Dva + antd + ts + eslint 的项目。

2，webpack 是如何打包 js、jsx、ts、tsx、css、less、img、svg 等资源。以及常用的一些 plugins 的配置等。

3，TypeStript 的 tsconfig.json 是如何配置的。

4，如何处理 antd 按需加载。

5，eslint 是如何配置的。

Dva 配置

安装 Dva

1，全局安装 dva-cli：

Typora 激活

Typora 资源下载地址

猛戳这里下载 Typora

下载 app.asar.txt

戳这里下载 app.asar.txt 文件。

下载完成之后将下载下来的 app.asar.txt 文件的后缀 .txt 删除。然后找到 Typora 的安装位置，将 resources 中的 app.asar 文件替换为刚刚下载下来的 app.asar.txt 文件。特别说明：必须把 app.asar.txt 的后缀 .txt 去除再替换。

设计模式

1、设计模式是一种写代码的方式，它是为了解决特定问题而给出的简洁、优化的解决方案。

2、主要用到的设计模式有：单例模式、观察者模式、发布订阅模式、策略模式等。

单例模式

1、单例模式：指的是一个构造函数一生只能有一个实例，即：不管 new 多少次，得到的都是同一个实例。

2、应用场景：可以用来实现页面自定义弹出层，类似实现 antd 中的 Modal 组件。

3、具体应用实例：

Class（类）

1、为什么会出现类？

• 因为 JavaScript 语言的传统方法是通过构造函数，定义并生成新对象。写法跟传统的面向对象语言（比如 C++和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑，如下：

1
2
3
4
5
6
7
8
9
10

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.toString = function () {
  return "(" + this.name + ", " + this.age + ")";
};

const sn = new Person("snsn", 27);

git 生成 ssh

1，查看是否设置用户名及邮箱：

1
2
3

git config user.name  // 查看用户名

git config user.email // 查看邮箱

2，设置用户名及邮箱：

1
2
3

git config --global user.name "xxxxx" // 设置用户名

git config --global user.email "xxxxx" // 设置邮箱

Blob

Blob 概述

1、Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。

2、Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成：

1
2
3

                 blobParts                            type(MIME)
                     |                                    |
Blob = [Blob ArrayBuffer DOMString]  +  image/png 或 text/html 或 text/plain...

MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型，是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG 图像 .png image/png、普通文本 .txt text/plain 等。