Attack on Life ⚔️

最近项目并不紧张了，于是得空把一些基础理论梳理下

1. 当用户URL输入一个网址，浏览器根据用户输入的信息判断是关键词还是网址，如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址，如果输入即是有效网址，则加上协议形成URL，用户输入完内容，按下回车
2. 回车前，如果当前有页面存在则，执行beforeunload方法
3. 浏览器导航栏显示loading
4. 浏览器进程构建请求行信息，以IPC方式将请求行信息发送给网络进程
5. 网络进程接收到该URL请求
6. 网络进程中查询该URL资源是否有缓存(强缓存)，如果有则相当于请求结束拿到响应数据，直接返回200响应头给浏览器进程，如果没有，则继续发起网络请求
7. 网络进程中查询DNS确定URL对应的真正IP地址，如果是HTTPS，建立TLS连接
8. 通过IP地址和端口与目标服务器建立TCP连接【TCP连接三次握手】，成功后开始构建请求头(附带Cookie)，向服务器发送HTTP请求【单个域名TCP连接数量限制，比如Chrome是6】
9. 服务器获得信息后，会构建响应信息，发送给网络进程
10. 网络进程获得响应信息，解析响应行的状态码来确定下一步的动作，如果是301，302则获取location，然后重复执行接收到一个URL之后的一系列动作，如果是304说明客户端有缓存，则返回304头部到浏览器进程，如果是200则继续
11. 根据响应头的内容类型来确定下一步的动作，如果是下载类型，则唤起浏览器下载器进行下载，如果是HTML则继续
12. 渲染进程存在打开新进程的情况，如果是新开的页面，开启新的渲染进程，如果是A页面打开的B页面，同站点，且没有开启noopener则复用A的渲染进程
13. 浏览器进程接收网络进程的响应头数据，向渲染进程发送【提交文档】信息，渲染进程接收到【提交文档】信息后，与网络进程建立传输数据管道
14. 渲染进程接收完毕，向浏览器进程发送【确认提交】
15. 浏览器进程接收【确认提交】信息后，进行安全栏，前进后退界面更新
16. 渲染进程：DOM生成=>样式计算=>布局=>分层=>图层绘制=>分块=>光栅化=>合成绘制
17. 渲染进程渲染完成后，向浏览器进程提交页面加载完毕

参考资料

• https://github.com/skyline75489/what-happens-when-zh_CN
• https://time.geekbang.org/column/article/117637

作为前端developer总是要经常查看networks，HTTP请求不可避免要接触，但一直缺乏系统的学习，于是查询这里梳理下，加深下记忆。

HTTP定义

超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议HTTP是万维网的数据通信的基础。HTTP协议是1989年发起的，当前标准由万维网协会（World Wide Web Consortium，W3C）和互联网工程任务组（Internet Engineering Task Force，IETF）进行协调发布。

需要知道

1. HTTP是个已有30多年的历史的协议
2. HTTP通常建立在TCP/IP协议之上，但HTTP协议中并没有规定它必须使用或支持的层。因此HTTP可以在任何互联网协议或其它网络上实现
3. HTTP请求的发起端不一定是在浏览器，爬虫或者其他工具均可

Chrome DevTools下调试前端请求时，会注意到缓存分为两种MemoryCache，DiskCache，针对两者区别和Chrome是如何选择缓存介质的，这里基于我的认知总结下。

概念

单说区别，简单，仅从名字上也可以看出两者的区别，MemoryCache是从内存中存取，因此速度快，但时生命周期短，而DiskCache是磁盘存取，因此读写较慢，但生命周期相对较长，属于持久化存取。

缓存介质选择

对于两种缓存介质的选择，官方权威资料并没有找到，于是我只能做了下测试，同时得出以下的结论。

身为前端er，在过去的几年经常使用这两个函数但是真的傻傻分不清，总是需要使用使用看API，或者TS定义，还是抵消，最好的办法还是脑子里彻底记住，毕竟漫威英雄啥的咱不是记得都门儿清吗。so，还是功夫用的不够。

这里就mark下两者的区别，用于记忆。

splice

单词含义

绞接，捻接

最近Stackoverflow上看到一个问题，Are ES6 template literals faster than Array join at constructing long strings，这个问题被管理员直接关闭了，因此看不到有人给出答案，但问题确实有点意思，毕竟我不确定，于是这里就测试并记录下。

Benchmark

测试数据及代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var arr = Array(10000)
  .fill(1)
  .map(() => 'A' + Math.ceil(Math.random() * 100));


// array.join
var res=arr.join('; ');

// string literal
var finalString2 = arr.reduce((res, item) => {
  return `${res}; ${item}`;
}, '');

// string concatenation
var finalString3 = arr.reduce((res, item) => {
  return res + '; ' + item;
}, '');

测试结果如下，可以看出array.join的性能最佳，我尝试改变样本数据量即数组长度，但结果还是很固定。