Attack on Life ⚔️

作为前端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的性能最佳，我尝试改变样本数据量即数组长度，但结果还是很固定。

12036最难的应该是班次查询买票，但前端性能也可以做的更好，这里以前端视角来分析下页面性能可以优化的项。

1. HTML，CSS，JS没有做压缩，通过Webpack等打包工具去除空格，换行等
2. GZIP/BR压缩开启，体积可以进一步缩小，降低带宽开销2/3
3. 全部使用的协商缓存，强缓存设置的0，这样带来了部分没必要的请求代价，应该两种结合使用
4. HTTP2.0应该开启，实现多路复用，请求效率更高
5. CDN静态资源，实现域名分片
6. 部分JS，CSS通过Webpack等打包工具bundle到一起，进一步降低请求次数
7. 懒加载部分资源比如非可见的图片，及部分数据请求
8. 预DNS解析，配置<link rel="dns-prefetch" href="//kyfw.12306.cn">

以上即观察后发现可以优化的项。

Chrome Dev Tools中有LightHouse可以对网站性能作出测试，同时给出优化建议，试了下，60分。so，还是有很多优化空间的。