## 前言
![2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8XVA..png)

此项目是用于构建博客网站的，包含前台展示、管理后台和后端。

> 此项目是基于 React + antd + NestJS + NextJS + MySQL  的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress



- 前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
- 后端：

## 1. 效果图
### 1.1 前台展示

#### pc 端
![2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZQ7..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZWA..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ902D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ902D..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ908G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ908G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90EJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ90KM..png)


#### 移动端适配
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y1D..png)


### 管理后台
管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。
![2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Y7G..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YDJ..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YJM..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YPP..png)


![2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8YVS..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8Z1V..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZE1..png)

![2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png](https://api.gaoredu.com/public/uploads/2024-11-10/KQFCPOSHPESKXJGYLZ8ZK4..png)




## 2. 体验地址

网站首页：https://blog.gaoredu.com/
管理后台：https://blog.gaoredu.com/admin

## 3. 计划
这次是一个完整的全栈式开发，只要部署了这个项目的代码，是完全可以搭建好博客网站的。


### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 4. 收获与感触
学而不用，基本等于没学，因为最近一直在做自己的个人博客网站，所以好久没更新技术文章了；而且是利用业余时间做的，所以经过差不多两个月的搬砖，现在网站终于都上线了。
开发网站的这段时间里，每天晚上几乎都搬砖到接近 11 点，周末的时间大多也在搬砖，每天写完文章，也快 12 点了，搬砖不易啊，喜欢或者觉得不错的，欢迎到 github 上给个 star，谢谢。

## 5. 文档教程
- 项目地址： https://github.com/fecommunity/reactpress
- next.js 源码：https://github.com/vercel/next.js
- nest.js 源码：https://github.com/nestjs/nest



React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

<h1>ReactPress</h1>

ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。

## ✨ 特性

- 📦 技术栈：基于 `React` + `MySQL` + `NestJS` + `NextJS` 构建
- 🌈 组件化：基于 `antd` 的交互语言和视觉风格
- 🌍 国际化：支持中英文切换，国际化配置管理能力
- 🌞 黑白主题：支持亮色和暗黑模式主题自由切换
- 🖌️ 创作管理：内置 `MarkDown` 编辑器，支持文章写文章、分类目录管理，标签管理
- 📃 页面管理：支持自定义新页面
- 💬 评论管理：支持内容评论管理
- 📷️ 媒体管理：支持文件本地上传和 `OSS` 文件上传
- ...

## ⌨️ 本地开发

### 环境准备
```bash
$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i
```

### 配置文件

项目启动后会加载根目录下的 `.env` 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 `reactpress` 数据库

```js
DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=admin // 用户名
DB_PASSWD=admin // 密码
DB_DATABASE=reactpress // 数据库
```

环境准备好后，执行启动命令：

```bash
$ pnpm run dev
```

打开浏览器访问 http://127.0.0.1:3001


## 🔗 链接

- [首页](https://github.com/fecommunity/reactpress)
- [高热度网](https://gaoredu.com)
- [报告问题](https://github.com/fecommunity/reactpress/issues)
- [参与共建](https://github.com/fecommunity/reactpress/pulls) 
- [next.js 源码](https://github.com/vercel/next.js)
- [nest.js 源码](https://github.com/nestjs/nest)


> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。

## 👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
<img style="width:30%" src="https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG23.jpg">

- 通过 WeChat 联系，可通过搜素微信号 `red_tea_v2` 或扫码加入 ，并备注来源。

- 通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。

- 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `reactpress` 标签。


1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
3. [Segment Fault](https://segmentfault.com/t/antd)（中文）


ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。


什么是ReactPress？

# 百度面经系列
1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
4. ![]的结果
5. 闭包的使用场景
6. 微任务和宏任务
7. 实现JSONP
8. 手写节流
9. 路由两种模式使用场景
10. 数组和链表区别
11. 链表的使用场景
12. 实现点击按钮输出input中字符串的反转
13. PWA
14. 跨域
15. 缓存策略
16. 缓存位置
17. 前端安全
18. 白屏的处理
19. 按需加载
20. HTTP
21. 闭包
22. websocket
23. socket
24. 写一个函数判断页面两个矩形是否相交
25. 介绍项目，介绍项目的难点与创新点
26. 前端项目打包方式
27. 项目前端方面引用技术
28. React的生命周期
29. React的虚拟DOM
30. 事件循环（EventLoop）
31. 解构赋值
32. 箭头函数
33. Promise（写一个promise的实例）
34. 写Promise.all的实现源码
35. 跨域及实现的方式，及比较
36. 同源策略在浏览器具体的表现
37. 回流与重绘，以及如何避免
38. 浏览器的缓存机制
39. 介绍强缓存与协商缓存
40. 对前端工程化方面的理解
41. 介绍一个你自己的项目？
42. 说一下Vue的缺点有哪些？
43. Eventloop循环说一下？
44. Node中的Worker说一下？Node中如何创建多个线程？Node中如何实现开启守护进程？
45. 说一下Express的架构和实现原理？
46. 说一下中间件的实现原理？
47. Express和Koa的区别呢？
48. 说一下Diff算法的本质？abc, acb是如何改变的呢？
49. 说一下红黑树和他的应用场景？
50. Nginx的应用场景说一下？
51. app.use和app.get的区别？
52. node的路由实现原理？
53. Node如何读取大数据量下的数据？
54. 介绍一下项目，项目中的用到的一些技术
55. 移动端的性能优化，rem的原理
56. 点透事件：H5开发中可能遇到的特有的问题
57. 项目后台用的技术栈是什么
58. 跨域问题
59. 常见的http状态码
60. $documnent.ready()  VS  window.onload() 两种方式的区别（哪个先执行）
61. ES6的新特性
62. 箭头函数与普通函数的区别
63. let与var的区别
64. 对vue熟悉吗？（不能算是熟悉，所以vue是硬伤）
65. vue的生命周期
66. 对闭包的理解
68. 常见的git命令
69. 项目中所有人都在master分支上开发吗？还是都有自己的分支？
70. http状态码
71. 输入一个URL的过程
72. es6，promise讲一下
73. 冒泡算法、二分查找、快排，以及时间复杂度、最坏情况
74. 同源策略
75. 跨域
76. xss攻击和预防
77. import和link的区别
78. 水平居中的方式，包括块和文本
79. css3的新特性，说一下单行文本溢出和多行文本溢出
80. less了解吗
81. 设计模式，实现一个登录框，不让用户重复点击弹出多个登录框（使用单例模式）
82. 原型链
83. 优化方法
84. git提交冲突如何解决
85. 实现一个repeat(str,count)函数，str是一个字符串，count是重复的次数。
86. 三个盒子里有一块糖，你挑了一个盒子，然后拿走一个空盒子，问是否更换盒子？
87. 一个为n的台阶，小明可以一次走一步、两步或者五步，问一共几种走法？

1. react和vue的区别
2. JS的数据类型
3. null和undefined的区别
…

【面经系列】百度面经

# HTTPS

## 1. 介绍一下HTTPS协议？
### 1.1 基本概念
> http默认采用80作为通讯端口，对于传输采用不加密的方式，https默认采用443，对于传输的数据进行加密传输。

### 1.2 密码学基础

**明文**： 明文指的是未被加密过的原始数据。

**密文**：明文被某种加密算法加密之后，会变成密文，从而确保原始数据的安全。密文也可以被解密，得到原始的明文。

**密钥**：密钥是一种参数，它是在明文转换为密文或将密文转换为明文的算法中输入的参数。密钥分为对称密钥与非对称密钥，分别应用在对称加密和非对称加密上。

### 1.3 对称加密
> [!NOTE]
> 对称加密又叫做私钥加密，即信息的发送方和接收方使用同一个密钥去加密和解密数据。对称加密的特点是算法公开、加密和解密速度快，适合于对大数据量进行加密，常见的对称加密算法有DES、3DES、TDEA、Blowfish、RC5和IDEA。


```
其加密过程如下：明文 + 加密算法 + 私钥 => 密文
解密过程如下：密文 + 解密算法 + 私钥 => 明文
```
对称加密中用到的密钥叫做私钥，私钥表示个人私有的密钥，即该密钥不能被泄露。

其加密过程中的私钥与解密过程中用到的私钥是同一个密钥，这也是称加密之所以称之为“对称”的原因。由于对称加密的算法是公开的，所以一旦私钥被泄露，那么密文就很容易被破解，所以对称加密的缺点是密钥安全管理困难。

### 1.4 非对称加密
> [!NOTE]
> 非对称加密也叫做公钥加密。非对称加密与对称加密相比，其安全性更好。对称加密的通信双方使用相同的密钥，如果一方的密钥遭泄露，那么整个通信就会被破解。而非对称加密使用一对密钥，即公钥和私钥，且二者成对出现。私钥被自己保存，不能对外泄露。公钥指的是公共的密钥，任何人都可以获得该密钥。用公钥或私钥中的任何一个进行加密，用另一个进行解密。

 - **被公钥加密过的密文只能被私钥解密**，过程如下：
```
明文 + 加密算法 + 公钥 => 密文， 密文 + 解密算法 + 私钥 => 明文
```

 - **被私钥加密过的密文只能被公钥解密**，过程如下：
```
明文 + 加密算法 + 私钥 => 密文， 密文 + 解密算法 + 公钥 => 明文
```

由于加密和解密使用了两个不同的密钥，这就是非对称加密“非对称”的原因。
非对称加密的缺点是加密和解密花费时间长、速度慢，只适合对少量数据进行加密。
在非对称加密中使用的主要算法有：RSA、Elgamal、Rabin、D-H、ECC（椭圆曲线加密算法）等。

## 2. HTTPS通信过程（面试重点）
### 2.1 基本概念

**HTTPS协议 = HTTP协议 + SSL/TLS协议**，在HTTPS数据传输的过程中，需要用SSL/TLS对数据进行加密和解密，需要用HTTP对加密后的数据进行传输，由此可以看出HTTPS是由HTTP和SSL/TLS一起合作完成的。

**SSL**的全称是Secure Sockets Layer，即安全套接层协议，是为网络通信提供安全及数据完整性的一种安全协议。SSL协议在1994年被Netscape发明，后来各个浏览器均支持SSL，其最新的版本是3.0。

**TLS**的全称是Transport Layer Security，即安全传输层协议，最新版本的TLS（Transport Layer Security，传输层安全协议）是IETF（Internet Engineering Task Force，Internet工程任务组）制定的一种新的协议，它建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本。在TLS与SSL3.0之间存在着显著的差别，主要是它们所支持的加密算法不同，所以TLS与SSL3.0不能互操作。虽然TLS与SSL3.0在加密算法上不同，但是在我们理解HTTPS的过程中，我们可以把SSL和TLS看做是同一个协议。

HTTPS为了兼顾安全与效率，**同时使用了对称加密和非对称加密**。数据是被对称加密传输的，对称加密过程需要客户端的一个密钥，为了确保能把该密钥安全传输到服务器端，采用非对称加密对该密钥进行加密传输，总的来说，**对数据进行对称加密，对称加密所要使用的密钥通过非对称加密传输**。

![加密](../img/httpscrypt.png)

### 2.2 传输秘钥
HTTPS在传输的过程中会涉及到三个密钥：
 - 服务器端的公钥和私钥，用来进行非对称加密
 - 客户端生成的随机密钥，用来进行对称加密

### 2.3 传输细节（重点理解）
一个HTTPS请求实际上包含了两次HTTP传输，可以细分为8步。

1. 客户端向服务器发起HTTPS请求，连接到服务器的443端口
2. 服务器端有一个密钥对，即公钥和私钥，是用来进行非对称加密使用的，服务器端保存着私钥，不能将其泄露，公钥可以发送给任何人。
3. 服务器将自己的公钥发送给客户端。
4. 客户端收到服务器端的公钥之后，会对公钥进行检查，验证其合法性，如果发现发现公钥有问题，那么HTTPS传输就无法继续。严格的说，这里应该是验证服务器发送的数字证书的合法性。如果公钥合格，那么客户端会生成一个随机值，这个随机值就是用于进行对称加密的密钥，我们将该密钥称之为client key，即客户端密钥，这样在概念上和服务器端的密钥容易进行区分。然后用服务器的公钥对客户端密钥进行非对称加密，这样客户端密钥就变成密文了，至此，HTTPS中的第一次HTTP请求结束。
5. 客户端会发起HTTPS中的第二个HTTP请求，将加密之后的客户端密钥发送给服务器。
6. 服务器接收到客户端发来的密文之后，会用自己的私钥对其进行非对称解密，解密之后的明文就是客户端密钥，然后用客户端密钥对数据进行对称加密，这样数据就变成了密文。
7. 然后服务器将加密后的密文发送给客户端。
8. 客户端收到服务器发送来的密文，用客户端密钥对其进行对称解密，得到服务器发送的数据。这样HTTPS中的第二个HTTP请求结束，整个HTTPS传输完成。


原文链接：https://www.jianshu.com/p/14cd2c9d2cd2


http默认采用80作为通讯端口，对于传输采用不加密的方式，https默认采用443，对于传输的数据进行加密传输。

【计算机网络】HTTPS

【CSS相关】CSS布局

3.什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？

4.如何解决inline-block 的间隙问题？

8.1 方法一：基于视口的垂直居中

9.1 方法一：text-align的center属性

### 实现一个类型判断函数

1. 判断null
2. 判断基础类型
3. 使用`Object.prototype.toString.call(target)`来判断**引用类型**

> [!NOTE]
> 注意： 一定是使用`call`来调用，不然是判断的Object.prototype的类型

之所以要先判断是否为基本类型是因为：虽然`Object.prototype.toString.call()`能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object

```javascript
/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if(target === null) {
    return 'null';
  }
  //判断是不是基础类型
  const typeOfT = typeof target
  if(typeOfT !== 'object') {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]" : "array",
    "[object Function]": "function",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean"
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}
```

# 升级版本
```js
// typeof可以检测基本数据类型
// Undefined, Null, Boolean, Number, String, Objec
// undefined, object, boolean, number, string, object

// 以下是11种：
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

a();

// TODO:Object.toString()的理解？
/*1. 如果 this 值是 undefined，就返回 [object Undefined]
  2. 如果 this 的值是 null，就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]] 的值
  5. 最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串*/

// TODO:封装一个通用的type API？
// v1: 基础版本
var class2type = {};

'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ')
    .map(function (item) {
        // 开始建立映射关系
        class2type[`[object ${item}]`] = item.toLowerCase();
    })

function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? class2type[Object.prototype.toString.call(obj)] || 'object'
        : typeof obj;
}

// v2:在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
// TODO: 解决IE6下的null和undefined 会被识别为[object Object]?
var class2type = {};
'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ').map(function (item) {
    class2type[`[object ${item}]`] = item.toLowerCase();
})

/**
 * 查看type的基础类型
 * @param obj
 * @return {string|*}
 */
function type(obj) {
    // 开始解决ie下的兼容问题
    if (obj == null) {
        return obj + '';
    }
    return typeof obj === 'object' || obj === 'function'
            //  ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object
            ? class2type[Object.prototype.toString.call(obj)] || 'object'
            : typeof obj;
}

/**
 * 查看obj是否为函数累类型
 * @param obj
 * @return {boolean}
 */
function isFunction(obj) {
    return type(obj) === 'function';
}


/**
 * 注意这里的isArray是一个函数，并不是一个函数执行的结果
 * @type {((arg: any) => arg is Array<any>) | (function(*=): boolean)}
 */
var isArray = Array.isArray || function (obj) {
    return type(obj) === 'array';
}


// TODO: plainObject, 就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对?
// 存放toString的映射结果
var class2type = {};
// Object.prototype.toString
var toString = class2type.toString();
// Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    // 排除掉宿主对象 eg: toString.call(window) === '[objct window]'
    if (!obj || toString.call(obj) !== '[object Object]') {
        return false;
    }

    /**
     * Object.getPrototypeOf() 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）,如果没有继承属性，则返回 null 。
     * eg: obj.__proto__ === Object.protptype
     * @type {any}
     */
    var proto = Object.getPrototypeOf(obj);
    // 如果没有原型对象的话，eg:Object.create(null), 就是纯对象
    if (!proto) {
        return true;
    }

    // 通过new Object方式创建的对象
    // 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
    var Constructor = hasOwn.call(proto, 'constructor') && proto.constructor;

    // 判断Constructor是不是Object的构造函数
    return typeof Constructor === 'function' && hasOwn.toString.call(Constructor) === hasOwn.toString.call(Object);
}


// TODO: EmptyObject如何判断？
function isEmptyObject(obj) {
    var name;
    // 看一下当前的这个obj对象有没有属性，如果有的话就返回false
    for (name in obj) {
        // 遍历的不仅仅是obj自身的属性，而且也遍历了obj原型上的属性
        return false;
    }
    return true;
}
// test
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true


// TODO: 判断是否为window对象？
// window对象的window属性指向其本身
function isWindow(obj) {
    return obj != null && obj == obj.window;
}

// TODO: 判断是否为document对象？
function isDocument(obj) {
    return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

// TODO: 判断是不是DOM元素
function isDOMElement(obj) {
    // 这里需要强制把返回的结果转换为bool类型，eg:obj = undefined,!!undefined=r\true
    return !!(obj && obj.nodeType === 1);
}


// TODO: isArrayLike如何实现？(可以判断数组和伪数组类型)
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
            || length === 0                     // 2. 长度为0(函数中的arguments参数)
            || typeof length === 'number'
            && length > 0
            && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}

// underscore 如何实现的？
function isArrayLike(collection) {
    var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    var length = getLength(collection);
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
}
```

【编程题与分析题】类型检测

# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# CSRF 跨站请求伪造
## 1. 介绍一下CSRF攻击的原理和防御？
>（Cross Site Request Forgy）,打开同一浏览器时其他的网站对本网站造成的影响。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。
![原理](../../img/csrf.png)


举个例子，用户同时打开了A网站和钓鱼网站。 假设A网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。
```html
<img src="http://www.domain.com/xxx?comment='attack'"/>
```


### 1.1 CSRF攻击原理
1. 用户登录A网站
2. A网站确认身份（给客户端cookie）
3. B网站页面向A网站发起请求（带上A网站身份）

### 1.2  CSRF防御
1. Get 请求不对数据进行修改
2. 不让第三方网站访问到用户 Cookie
3. 阻止第三方网站请求接口
4. 请求时附带验证信息，比如验证码或者 Token

1. SameSite
   - 可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。
2. Token验证
   - cookie是发送时自动带上的，而不会主动带上Token，所以在每次发送时主动发送Token
3. Referer验证
   - 对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。
4. 隐藏令牌
   - 主动在HTTP头部中添加令牌信息


禁止第三方网站带cookies

[same-site](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies#SameSite_Cookies)属性。 设置只有同一站点的请求才能携带cookie


### 1.3 CSRF蠕虫
如果某个用户打开了被攻击网页，并且用户同时访问了攻击者的网页。
那么攻击者的网页就会使用用户的身份发送一些请求，并且常用用户的身份发布一些评论或文章，里面包含攻击者的网页链接。如果其他用户看到了这个用户的这条评论，都甚至可以不点击，其他用户也会被盗用身份发送一些恶意请求。这样病毒的传播就会越来越快，影响越来越大。


### 1.4 CSRF攻击危害
 - 利用用户登录态
 - 用户不知情
 - 完成业务请求
 - 盗取用户资金
 - 冒充用户发帖背锅
 - 损坏网站名誉

【Web安全】CSRF攻击

1. 介绍一下CSRF攻击的原理和防御？

# HTML基础强化
## 1.如何理解HTML？
1. HTML类似于一份word“文档”
2. 描述文档的“结构”
3. 有区块和大纲

## 2.对WEB标准的理解？
> Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：
+ 结构化标准语言主要包括XHTML和HTML以及XML，
+ 表现层标准语言主要包括CSS，
+ 行为标准主要包括对象模型，DOM、ECMAScript等

### 2.1 结构层标准
> 结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

### 2.2 表现层标准
> 表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。

1.	尽可能使用外部引入的方式，达到分离的目的
2.	CSS选择器，优先级
3.	代码简洁

### 2.3 行为层标准
> 行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

+ DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

+ ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

## 3.对W3C的认识？
> W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点：
### 3.1 对于结构的要求
+ 1）标签字母要小写
+ 2）标签要闭合
+ 3）标签不允许随意嵌套
  
### 3.2 对于css和js的要求
+ 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
+ 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
+ 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
  
## 4.什么是前端语义化？
> [!NOTE]
>语义化就是是让机器可以读懂内容，web页面的解析是由搜索引擎来进行搜索，机器来解析。

### 4.1 标签是有语义的
h1~h6、thead、ul、ol等标签，初期的语义化标签：程序员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）（使用有语义的对于需要声明的变量和class，id）
### 4.2 HTML5的语义标签
w3C采用了header/footer; section（章节、页眉、页脚）/article（内容区域）; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 5.谈一下页面布局架构？
+ CSS布局：table布局，float布局，flex布局（瀑布流布局），inline-block布局
+ 三大框架，页面架构

## 6.HTML的版本问题？
1. HTML4/4.0.1(SGML)(标签允许不结束)
2. XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
3. HTML5（类似于HTML4的写法）

> [!NOTE]
> 关键点：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

## 7.HTML5新增的内容有哪些？
1. 新的区块标签：section,article,nav,aside
2. 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
3. 语义增强：header/footer; section/article; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 8.HTML的元素分类？
+ 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
+ 行内元素inline(一行中的某个位置)：a b span img input select strong（强调的语气）
+ inline-block(行内，有宽高属性)：selection

> [!NOTE]
> 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
> 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
> 空元素:br、meta、hr、link、input、img

## 9.HTML嵌套关系？
1. 块级元素可以包含行内元素
2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
3. 行内元素“一般”不能包含块级元素（a包含div是可以的）

## 10.HTML的默认样式？
1. 默认样式的意义
2. 默认样式代理的问题
3. CSS Reset 的作用

```css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
```

## 11.使用ajax方式来提交数据可以不使用form标签吗？
1. form标签可以使用submit, reset
2. 使用form可以直接一次性获取所有的form窗体的数据属性
3. form可以较好地实现表单验证等功能

### 11.1 Form表单提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">   
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
### 11.2 ajax提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
> [!NOTE]
> 扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？

【HTML相关】HTML基础强化

11.使用ajax方式来提交数据可以不使用form标签吗？

# 流行框架
## 1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
考察学习知识的态度，是否仅仅是停留在使用层面，要知其然知其所以然
## 2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
this执行init构造函数自身，其实就是jQuery实例对象，返回this是为了实现jQuery的链式操作
## 3、	jquery中如何将数组转化为json字符串，然后再转化回来？
$.parseJSON('{"name":"John"}');
## 4、	jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
递归赋值
## 5、	jquery.extend 与 jquery.fn.extend的区别？
Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例
## 6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
## 7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
可以同时绑定多个事件，低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册
## 8、	Jquery与jQuery UI有啥区别？
jQuery是操作dom的框架，jQueryUI是基于jQuery做的一个UI组件库
## 9、	jQuery和Zepto的区别？各自的使用场景？
jQuery主要用于pc端，当然有对应的jQuerymobile用于移动端，zepto比jQuery更加小巧，主要用于移动端
## 10、	针对 jQuery 的优化方法？
优先使用ID选择器
在class前使用tag(标签名)
给选择器一个上下文
慎用 .live()方法（应该说尽量不要使用）
使用data()方法存储临时变量
## 11、	Zepto的点透问题如何解决？
点透主要是由于两个div重合，例如：一个div调用show()，一个div调用hide()；这个时候当点击上面的div的时候就会影响到下面的那个div；
解决办法主要有2种：
1.github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，
2.根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要1.一个优先于下面的“divClickUnder”捕获的事件；2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。
## 12、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?
知识面的宽度，流行框架要多多熟悉
## 13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
Underscore的熟悉程度
## 14、使用过angular吗？angular中的过滤器是干什么用的
在表达式中转换数据<p>姓名为 {{ lastName | uppercase }}</p>
currency，是什么过滤器——格式化数字为货币格式，单位是$符。


【前端面试题】流行框架

1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？

2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

3、   jquery中如何将数组转化为json字符串，然后再转化回来？

4、   jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

5、   jquery.extend 与 jquery.fn.extend的区别？

6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

9、   jQuery和Zepto的区别？各自的使用场景？

11、  Zepto的点透问题如何解决？

12、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?

13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

14、使用过angular吗？angular中的过滤器是干什么用的

# Promise的模拟实现
```js
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn){
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []
  
  function resolve(value) {
    if(that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }
  
  function reject(value) {
    if(that.state === PENDING){
      that.state = REJECTED
      that.value = value;
      that.rejectedCallbacks.map(cb => cb(that.value));
    }
  }
  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  //对传入的两个参数做判断，如果不是函数将其转为函数
  onFulfilled = 
    typeof onFulfilled === 'function'
    ? onFulfilled 
    : v => v  // onFulfilled = v => v
  onRejected = 
    typeof onRejected === 'function'
    ? onRejected
    : r => {
      throw r
    }
  
  if(that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  else if(that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  else {
    onRejected(that.value)
  }
}

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功的回调数据')
  }, 1000)
}).then(value => {
  console.log('Promise.then:  ', value)
})
```

【编程题与分析题】Promise实现原理

# 运行环境	
## 4.1 页面加载过程	
### 4.1.1 从输入url到得到HTML的详细过程	
> [!NOTE]
> 参考计算机网络章节考点总结

### 4.1.2 window.onload和DOMContentLoaded的区别	
1. onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
2. DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
3. jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的

### 4.1.3 浏览器加载资源的形式有哪些？	
1. 输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
2. 加载html中的静态资源（CSS，JS，图片等）

### 4.1.4 描述一下浏览器渲染页面的过程	
1. 根据HTML结构生成DOM Tree（单个节点，没样式）
2. 根据CSS生成CSSOM（CSS对象模型）
3. 将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
4. 根据RenderTree开始渲染和显示
5. 遇到**script**标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码
   
### 4.1.5 CSS和JS的位置问题？
#### CSS
1. 浏览器是自上而下进行解析的，防止出现多次渲染
2. CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行

#### JS
1. 可以让页面快速的展示，提升性能
2. 可以在此处获取到页面上所有的标签


## 4.2 性能优化	
### 4.2.1 前端性能优化的方法有哪些	
1. 资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
2. 图片资源的优化
   图片压缩处理
   CSS雪碧图
   Image Inline（Base64编码）
   使用SVG和webp格式的图片
### 4.2.2 懒加载和预加载的区别和实现原理?
> [!NOTE]
> - 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中

> - 预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染
1.	使用img标签
2.	创建img对象
3.	Ajax请求（跨域问题）

### 4.2.3 重绘和回流的区别？
> [!NOTE]
> 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）

> 回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）

#### 避免重绘和回流的两种方法
1.	使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
2.	将重绘、回流的影响范围限制在单独的图层之内

#### 开启浏览器自动创建图层的方法
1. transform:translatez(0)
2. z-index
3. **video** 和 **canvas**标签

#### 性能优化点：
1. 使用top会触发回流，translate不会（transform : translaeY(0)）
2. 使用opacity替换visibility（visibility会触发重绘）
3. 使用className替代style

## 4.3 安全问题	
### 4.3.1	前端的安全问题及预防措施	
#### XSS攻击
利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]
#### CSRF攻击
论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）
#### 二者区别
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包



【JS相关】运行环境

4.1.1 从输入url到得到HTML的详细过程

4.1.2 window.onload和DOMContentLoaded的区别

4.1.3 浏览器加载资源的形式有哪些？

4.1.4 描述一下浏览器渲染页面的过程

4.2.1 前端性能优化的方法有哪些

4.2.2 懒加载和预加载的区别和实现原理?

开启浏览器自动创建图层的方法

4.3.1   前端的安全问题及预防措施

React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

什么是ReactPress？

【微信小程序开发】栀子手作花花微信小程序商城开发最佳实践

最新Windows永久激活,Office激活,Visio,Server,Project全系列万能永久激活教程（亲测可用，附激活工具下载）

【新】idea激活码，jetbrains全系列最新2020激活码和激活教程（亲测可用）