参考资料

极客时间：图解Google V8

什么是技术栈

当我们需要开发一个新项目或者学习一门手艺时，应该将其所涉及的知识做一个全方位的了解
    而【技术栈】一词非常形象地表达了学习一门手艺所【需要的是哪些知识】，以及【按什么顺序去学习】

• 前端这门手艺栈底到栈顶：浏览器架构 、Web网络 、事件循环机制 、JavaScript核心 、V8的内存管理 、浏览器的渲染流程 、Web安全 、CSS 、React 、Vue 、Node 、构建工具链等

  其实上述每一层技术栈学起来都不难，难的是当我们抛开底层技术栈而去理解上层技术栈的内容，那么就很容易陷入知识盲区，并且后期需要花费大量的时间来缝缝补补缺漏的知识

• 以前的我就像一个无头苍蝇，横冲直撞，可能有一天也能理解这个知识体系，但是花费时间必然会更久，但是能早点搞定的事，为何要花上更长的时间去完成呢 ？

• 系统性地 、循序渐进地学习，性价比最高，在以后地学习道路上缝缝补补花费的时间就会更加少

  李兵老师这个例子说到我心里去了：比如我们在招聘前端工程师时，在我看来，这并不是技术栈，只不过是栈顶函数的上下文而已，而对于那些在技术栈底层上下文相关的知识，在简历中却很少有提及

• 所谓的技术栈应该是在某一领域从【底层的基础知识】到【上层应用技术】有一个完成的体系

如何建立技术栈

• 如果是一个成熟的领域，那么一般会有比较完整的技术栈，因此可以花费时间去寻找资料 -> 分析资料 -> 根据自身的特点构建出相应的技术栈

  如果是正在高速发展的领域，就更加需要花费时间去整理去自身所需要的技术栈了

• 李兵老师举了一个他学习神经网络的例子

  先系统性复习了微积分 、概率论 、线性代数，然后才结合实际项目来完成数据清洗 、构建模型 、模型训练，最后到实际应用

总结

• 接触新项目或学习一门新手艺时，【一定一定不要觉得】将时间花费在建立技术栈上浪费时间，耐下心来花时间去收集相关资料，再细心的分析它们，从而去构建一个技术栈，然后再按这个技术栈有规划的去学习他，这很重要！

  笔者之前学习前端，从上层应用技术开始学起，很难受，而且很多时候需要花费更多的时间去缝缝补补缺漏的知识点，写下此篇文章自省！

大学期间，我胆子起始特别小，从不会，也不敢逃课。从一开始连迟到都会怀揣着忐忑的心情，要是被老师抓住了怎么办？迟到后被老师训骂怎么办？但渐渐的，有了第一次，第二次，我渐渐变得不在乎几分钟的迟到了，迟到是那么的美好，不用早起，舒舒服服，做作业等也变得随便地应付了。努力一阵子，然后又松懈了，颓废了，回到宿舍又躺下了，加入大家玩游戏地阵营，然后又过一段时间，我又不安了，因为他明白不能一直这样下去，因为需要找工作，因此他又去图书馆学习一段时间，通过考试。从一开始地重视这些，慢慢变得功利起来，很明显废人不是一个自律地人，作为废人，他学到一些东西了，但是他学的很片面，很功利，但后面废人慢慢注意到了不可以这样啊，还是得努力，废人现在大三末了，突然间又想准备考研了，但又有点晚了（还是继续专心在前端这个领域专研），想多开阔自己的视野（以后有机会真想继续深造！）

接触一阵子前端，从一开始飘飘然，到现在知道自己不懂得东西实在太多了🐕，这一段经历中，让我重新审视自己。首先我问了自己，从事前端这个领域的目的是什么 ？

​ 深思许久，一方面感觉其实前端的各种知识还很有趣的，在深入原理的学习过程中，把一开始的黑盒一点点的剖析开，这个过程实在有趣。而另一方面当然是为了工作啦，两者互补，让我决定继续在前端这条路上走着吧

• 总结过往的学习心态，方法，发现自身有很多不足

  • 其一，浮躁的内心，以为做出来某个功能就飘飘然了

  • 其二，缺乏思考的深度，很多时候学习一个知识，仅仅学会了应用而没有去思考、尝试不同的情境下如何去应用它

  • 其三，学习新知识，没有去规划学习的路线，好比如：前阵子学习react，观看b站视频学习完后，不知道下一步应该怎么做 ？然后花了几天，找了一个简单仿网易云音乐的项目来练习使用，再之后，练完了，又不知道干嘛了 ？然后又花了时间去计划。

    我觉得这样是十分不好的，应该一开始就有一个明确的计划，虽然具体的实施细节不清晰，但得有一个明确得方向，

    ​ 就好如：学习一个框架，第一步学习它的语法，然后再通过一个项目来熟练使用， 而再之后就是深入探索（反复阅读官网，内部源码实现）

    而我自身一开始头脑就没有这个计划，就只是说 我要学习react，然后找个比较不错的视频学习，然后学完再说。这显示是不科学，黑灯瞎火的走路，很容易摔跤！

• 针对这些不足之处，一定一定要改掉它！！！

  • 首先，沉下心来，脚踏实地，有广度和深度的去探索知识！
  • 学习知识要过脑子！！，自己可以通过举不同的场景来检验这个知识点
  • 每当去做一件事的时候，需要先花时间规划好整一个的学习路线，不要盲目去做（这一点真的很难，你不懂一个领域时，你如何去获取资料学习，又如何规划这个路线，还是多借鉴大佬们的看法吧！）

计划阅读书籍

• 红宝书 、 阮一峰的ES6

  待读：现代JavaScript教程 、JavaScript语言精粹 、你不知道的JS

• react技术揭秘 、build your own react 、官方文档

• css世界

• 浏览器工作原理与实践 、图解Google V8 虚拟机 、透视HTTP协议

• 期待神光大佬的小册（感觉自己对babel这种编译工具挺感兴趣的）

打好基础才是王道！

• 冴羽

计划学习的算法与数据结构 、leetcode

• https://github.com/CyC2018/CS-Notes

计划学习英语，实在受不了自己的英语水平，只想说两个字垃圾

• https://github.com/yujiangshui/A-Programmers-Guide-to-English

• 最后告诫自己一句话：你先是一名程序员才是一名前端开发工程师！

由HTTP的缓存控制到缓存代理

• https://calendar.perfplanet.com/2016/a-tale-of-four-caches/
• 极客时间：透析HTTP协议
• https://zhuanlan.zhihu.com/p/44789005

浏览器缓存

• memory cache是浏览器为了加快读取缓存的速度而作的优化

  读取速度：寄存器 > 高速cache > 内存 > 磁盘

HTTP缓存控制

条件请求

• 没有 If 开头的 条件请求 头字段时

1. 用HEAD请求获取该资源的Last-modified 或 ETag
2. 获取到的Last-modified 或 ETag与缓存的资源对比
3. 若资源发生了变化，那么就发送一次GET请求获取新的资源
   否则直接用缓存

• HTTP定义了一系列的 If 开头的 条件请求 头字段，交由服务端来检验缓存是否过期

       客户端			      服务端
if-Modified-Since		Last-modified	        (弱检验器)	
if-None-Match			ETag			(强检验器)

• ETag 全称 Entity Tag，资源的唯一标识符，用于解决Last-modified（单位秒）无法准确区分文件变化的问题

  • 强ETag要求资源在字节级别相同
  • 弱ETag要求资源在语义上相同即可（值前面有个 W/ 标记）

• 图片来源

两端缓存控制

• 以前用Expires，缺点就是客户端这边可以修改本地时间，那就乱了呀，而现在Cache-Control: max-age=x，用相对响应报文创建的时间（Date头字段）

• 响应报文的头字段没有对缓存进行说明时，浏览器会采用一套 启发式算法来尽量缓存一段时间

  • 响应报文提供了Last-modified，但没有提供Cache-Control 或 Expires

    RFC建议：max-age =（Date - Last-modified）* 10%

  • 如果响应报文连Last-modified都没有呢，这个得看具体客户端是采用什么算法去缓存了

• 响应报文的头字段 Cache-Control: max-age=0时，浏览器会不会缓存该资源呢 ？

  • 会，浏览器收到数据就会将其缓存起来，而内部有一套算法去清除，而max-age是浏览器清除缓存的参照物

• 返回304和200的区别在于304不会携带实体数据，只是告诉浏览器Not Modified，让它去用缓存

应用

• https://jakearchibald.com/2016/caching-best-practices/
• https://zhuanlan.zhihu.com/p/44789005

模式1: 不常变化的资源

• 设置很长时间的强制缓存（时效性不强）

Cache-Control: max-age=31536000

模式2: 经常变化的资源

• 设置使用前需要验证的强制缓存（时效性很强）

Cache-Control: no-cache
ETag: xxx
Last-modified: xxxx

模式1和2结合

• 时效性不算太强，也不算太弱，来取个中

no-cache <=> max-age=0,must-revalidate
# 取中间
Cache-Control: max-age=600,must-revalidate

• 很容易导致不同版本的资源组合在一起，导致报错

假设有三种资源：  index.html  index.js  index.css 存入浏览器缓存
	1. index.html的缓存有效时间先到期，被浏览器清除，而index.js index.css的缓存仍存在。
	2. 而此时浏览器请求到的新版本的index.html和旧版本的index.js和index.css组合很容易会报错

HTTP的代理服务

• 代理一个是链路增长（成本），另一个交由它人处理（可信度）

client <=> proxy1 server <=> ... <=> proxyn server <=> origin server

• X-Forwarded-For 和 Via 头字段经过代理节点就会添加上代理主机的信息

  • 前者添加 请求方的IP地址，后者添加 代理节点的Host
  • X-Real-IP === 仅有一个代理节点的 X-Forwarded-For 添加的IP地址

  

• 客户端发送请求报文后，服务端会传来一个TCP报文表示 我将要传输的报文大小，请稍等

  步骤2 和 4的TCP报文作用修改为上述描述

• 而服务端发送响应报文，请求方收到后会发送TCP报文表示收到该报文

  步骤5 和 7的TCP报文作用修改为上述描述

• 四次挥手并没有规定是从客户端还是服务端开始，而三次握手是客户端主动发起的

  • 只不过通常都是客户端主动断开，所以看到是客户端先发送tcp，但服务端也可以主动断开（超时，短链接，节约资源）

• 因为通过X-Forwarded-For || X-IP || Via 都需要修改原始报文，添加上相应的头字段

  • 一方面加大了代理节点的工作量
  • 其次在SSL/TLS加密的情况下，不允许修改原始报文

• 所以出现了 "代理协议"（The PROXY protocol）

• 反向代理的负载均衡算法有哪些 ？
  • 加权随机
  • 加权轮询
  • 最小连接法 || 最快连接法
  • 源地址哈希法

缓存代理

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

• 需要区分的是private cache 和 public cache

  HTTP协议的标准并没有规定默认使用private还是public，具体的看浏览器或代理服务器的实现，一般默认是private

源服务器的缓存控制

• no-transform

  • An intermediate cache or proxy cannot edit the response body，Content-Encoding，Content-Range，or Content-Type

    如：代理有时候会将缓存下来的数据做一些优化（图片生成png 、webp等几种格式），no-transform禁止这些变换

• 仅在代理服务器生效的头字段，proxy-revalidate | s-maxage | no-transform

• 图片来源

客户端的缓存控制

• 使用 only-if-cached 请求头字段，如果代理上没有缓存或缓存过期，返回504（GateWay Timeout）

请求报文中 max-age，max-stale，min-fresh 对`当前`缓存的有效时间的约束
    [min-fresh,)
    [start~max-age], start > 0
    [max-age,max-stale]
符合上述条件以及相应的 "Last-modified" and "ETag" 也符合的缓存返回

• 图片来源

Vary

• vary主要用在缓存，用来告诉缓存代理此报文依据的是哪些请求头字段返回

  1. 返回带有Vary字段的响应报文给代理服务器，然后代理服务器将【w/ URL 
  and hash】作为key，该响应报文作为value存入缓存中
  * hash是根据vary字段的值，在该报文中提取出相应的值计算hash所得
  
  2. 当有新的请求访问代理服务器时，通过计算请求报文的相关头字段，得到相应的key，看缓存中是否存在
  	存在，则返回缓存
  	否则，向源服务器获取最新资源了

• 图片来源