浏览器调试

输出

• log输出

console.log("1");

• info级别输出

console.info("");

• warn级别输出

console.warn("1");

• error级别输出

console.error("1");

• debug级别输出

console.debug("1");

输出占位符

• %o占位符输出

console.log("%o aaa", { a: 1 });

• %s字符串输出

console.log("%s", "aaa");

• %d数字输出

console.log("%d", 123);

输出格式

• 输出 DOM 对象

console.dir(document.body);

• 以表格形式输出

const obj = { a: 1, b: 2 };

console.table(obj);

• 计数

for (let i = 0; i < 10; i++) {
  console.count();
}

• 打印归类

console.group("group");

• 打印计时

console.time("a");

• 断联提示

console.assert(true, "warning"); // 不会出现error
console.assert(1 === 2, "错误提示"); // 会出现error

• 调佣栈

function a() {
  console.trace();
}
function b() {
  a();
}

a(); //即可看见调佣栈
b(); //即可看见调佣栈

• 当前内存情况

console.memory; // 不要加()

内存泄露

• 是指程序对一个变量失去控制

• js 在定义一个变量时候，就已经分配好内存，同时也配备了垃圾回收机制，回收那些不再使用的内存，本质上是找到内存中可以释放的变量，然后在进行释放回收内存

• 程序认为这个变量已经没用了，但是垃圾回收机制确认为还在使用，从而导致这段程序无法使用

• 而不是内存突然暴增，暴增是因为程序没有优化好

• 在点击开始按钮时，内存暴增但是点击停止时清除内存，这段程序是可控的，不属于内存泄露

• 使用console.log也会导致内存泄露，所以在生产环境中需要去掉console.log

• 闭包也会导致内存泄露

• 不断添加元素最后移出元素也会导致内存回收不完全

reduce 方法

使用累加

[1, 2, 3].reduce((pre, cur) => {
  return pre + cur;
}, 0);

当前中设置初始值为 0，之后对数组遍历，pre 是缓存值，cur 是当前值

找最大值

const result = [1, 2, 3, 8, 3, 2].reduce((pre, cur) => Math.max(pre, cur));

数组去重

[1, 2, 3, 8, 3, 2].reduce((pre, cur) => {
  if (ore.indexOf(cur) === 1) {
    pre.push(cur);
  }
  return pre;
}, []);

• 分类

const dataList = [
  { name: "aaa", country: "1" },
  { name: "aaa", country: "3" },
  { name: "aaa", country: "1" },
  { name: "aaa", country: "2" },
];

const resultObj = dataList.reduce((preObj, cur) => {
  const { country } = cur;
  if (preObj[country]) {
    preObj[country] = [];
  }

  preObj[country].push(cur)
  return preObj
}，{});

• 反转字符串

const str = "hello world";
const resultStr = Array.from(str).reduce((pre, cur) => {
  return `${cur}${pre}`;
}, "");

console.log(resultStr);

Set 的基本 API

• set 数组操作

const set = new Set();
set.add("1"); // 插入
set.has("1"); // 判断
set.delete("1"); // 删除
set.size; // 大小
for of // 遍历
for (const value of set){
  console.log(set)
}

• 数组去重

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);

const union = new Set([...set1, ...set2]); // 并集
const intersction = new Set([...set1].fileter((item) => set.has(item))); // 交集
const different = new Set([...union].filter((item) => !intersction.has(item))); // 差集

Map 的基本 API

const map = new Map();

map.set("user", "1"); // 插入，可用JS任何类型作为key
map.get("user"); // 读取
map.has("user");
map.delete; // 删除
map.size; // 大小
for of / forEach// 遍历

• 内存占用︰不同浏览器有明显差异，但给定固定大小内存，Map 能比 Object 多存储 50%的键值对。遇到大体量结构化数据，选择 Map。
• 插入性能:Map 性能稍微好一点，特别涉及大量插入操作，尤为明显，选择 Map
• 查找性能:性能相当，但在少量“键/值对"的情况下，浏览器引擎会对 Object 有相关的优化策略，选择 Object。
• 删除性能:Map 性能优势明显，而且利用 delete 删除 Object 属性仅仅只是解除绑定，内存没释放，并不是真正的删除，而且会破坏 V8 引擎中线性结构的快属性，极大降低访问性能，毫无疑问选择 Map。

BFC

• 当布局两个盒子，一个距离底部 200，下面盒子距离顶部 100，这两个盒子实际距离为 200
• 如果想让盒子称为 300 的布局，需要触发 BFC(Block Formatting Context)

div {
  float: left;
  position: absolute;
  display: inline-block;
  overflow: hidden;
}

HTTP 缓存字段

1. Cache-Control
2. Expires
3. ETag/If-None-Match
4. Last-Modified/If-Modified-Since

Cache-Control

• 如果在请求头中设置 (‘Cache-Control’ ,‘public,max-age=10’)
  • 在 10 秒内访问服务器不会从服务器中返回真实数据，而是直接从缓存中获取

Expires

• 在请求头中设置(‘Expires’,new Date(Date.now()+10*1000).toUTCString())
• 在首次请求资源时，会从服务器端获取数据，

  将设置成未来时间

  ('Expires',new Date(Date.now()+10\*1000).toUTCString())
  

ETAG/If-None-Match

• 在 headers 请求头中设置：If-None-Match:Json字符

If-Modified-Since

• 需要在请求头中添加

headers:{
  'If-Modified-Since':Json字符串
}

什么是 RESTFul-API

1. GET 用于读取资源
2. POST 用于创建资源
3. PUT 用于更新资源(客户端提供更新后的完整资源)
4. 用于局部更新(客户端提供资源局部变量)
5. DELETE 用于删除资源

• Response 规范：需保持统一结构，code 对齐 HTTP 状态码

{
  code://描述状态
  data:// 返回数据
  message:// 状态描述
}

受控组件和非受控组件

• 页面中输入的 DOM，放到状态中，需要用的时候取出来

• 非受控组件，需要使用 ref，但是官方中不推荐写 ref。尽量还是使用受控组件更好

• 接口升级要如何处理

• 遇到事务性业务逻辑要如何设计 API

浏览器输入URL回车之后

1、URL解析
2、域名解析
3、tcp连接
4、http请求
5、响应请求
6、页面渲染