大厂面试注重的前端原理：http

对于初级前端工程师来说，有几个原理黑箱，隐藏在日常开发背后，不易被感知。

它们是浏览器内核、Javascript底层、http原理等。

现在的框架已经封装好很多东西，入门开发者不了解底层原理，也能实现业务需求、写项目。

但这会阻碍你向中级前端进阶，因为熟悉原理才能令你快速定位bug的所在，并给出优化建议。

 

《HTTP权威指南》，封面是小松鼠那本，★★★★★

手册型的书，类似于http报文、状态码等知识，工作中遇到一个再记一个，从实战中学，没必要一页一页看。

以下重点总结HTTP缓存、HTTP/2，搜了腾讯、阿里、字节跳动的面试，基本都有问这个。

 

（一）HTTP缓存

 

老生常谈：

强制缓存（Cache-Control、Expire）对比协商缓存（ETag、If-None-Match、If-Modified-Since）

（1）强制缓存：

Expires头：

服务器跟客户端说：“扔给你一个过期时间，没过这时间不要来找我，自己去缓存数据库找去～”

时间格式：Fri, 28 Jul 2019 20:50:00 GMT

用绝对时间来计算过期，两端时钟不同步的话有误差，不推荐。

Cache-Control头：

用相对时间来计算过期

常用值： max-age=484200 （秒数）

                must-revalidate 过了max-age，客户端必须向服务器发送请求，验证缓存

                no-cache           假关闭缓存

                no-stroe             真关闭缓存

                public                 CDN也可以去缓存

                private                客户端才有权缓存

（2）对比缓存：

Last-Modified头 && If-Modified-Since头

服务器对客户端说：“扔给你一个Last-Modified，下次记得带这个来找我，你到时说是If-Modified-Since~”，客户端就弱弱地带着If-Modified-Since去找服务器

这两个是一对时间密令，两个掏出来一对比，相同就是未过期，响应304；不同就是过期了，重新响应200

注意：1、密令的单位是秒，不适用毫米级别更新的文档 2、如果文档被脚本定时刷新，文档内容并没有变，会造成缓存不必要的失效

 

Etag头 && If-None-Match头

密令由时间变为hash字符串，优先级高于上者

注意：GET请求才有缓存

 

参考文章：[一文读懂前端缓存] (https://zhuanlan.zhihu.com/p/44789005?utm_source=qq&utm_medium=social&utm_oi=815669732077355008)

                  百度百科ETag (https://baike.baidu.com/item/ETag/4419019?fr=aladdin)

 

（二）HTTP/2

（1）信道复用

允许服务器和客户端把HTTP消息分解成独立的帧，交错传输，到达另一端后再组装。整个过程只用了一个TCP连接。

原理：在传统的HTTP应用层中，分出一个叫“二进制帧层”的东西。

帧（frame）：H2通信的最小单元。前9个字节包含多个重要信息，帧长度、帧标识、流id等。解析时读取它，能知道整个桢的期望字节数

流（stream）：一系列桢。相当于H1中的一个请求或响应，不同的是它可分帧，可以多个流交错，不会阻塞。

不再需要分块编码（chunked encoding）

（2）服务端推送（Server Push）

服务器向客户端推送额外的资源，如html以外的css、js

一个请求可以有多个响应，省去了客户端对文档引用资源的检查的延迟

（3）头部压缩

 传统的GZIP压缩能被快速破解加密信息，改用霍夫曼编码

后到的请求，有一个索引，对应地可以在服务器表中找到先前请求重复的header

 

参考

HTTP/2新特性总结 https://www.jianshu.com/p/67c541a421f9

《HTTP/2基础教程》封面两只小松鼠