✊不积跬步，无以至千里；不积小流，无以成江海
本文有点干，建议全文背诵。
什么是互联网
最好的教程来自mdn。
developer.mozilla.org/zh-CN/docs/…
对于互联网知识的梗概了解，可以参阅上面这个链接。
什么是http
HTTP的全名是是超文本传输协议。主要的行为有两个，一个是请求，一个就是响应。
HTTP请求
请求者在发出请求的时候要这样说话，包含：
第一部分 - 请求行（中间用空格连接）
- 动词。如：get/post/push/patch
- URL。格式通常为‘/’开头，如“/index”
- http版本号
第二部分 - 请求头 冒号隔开的key-value形式。如：
- accept：text/value （我希望接收到text/value；你给不给我随意）
- host：域名（我想要访问这个网址，你返不返回这个网址是你的事情）
- connect：keep-alive
- content-type：application/json（我希望我第四部分接收到的格式）
第三部分 - 回车+换行
固定死了“\r\n”
第四部分 - 消息体
根据第二部分的第四行来决定。
HTTP响应
响应者在发出响应的时候要这样说话，包含：
第一部分 - 状态行（中间用空格连接）
- http版本号（通常与上面一致）
- 状态码
- 对状态码的解释，如：ok
第二部分 - 响应头 冒号隔开的key-value形式。如：
- content-type：application/json（我希望我第四部分回应到的格式）
- set-cookie：session—id = XXX；expires...
- connect：keep-alive
- content-encoding：gzip
第三部分 - 回车+换行
固定死了“\r\n”
第四部分 - 消息体
根据第二部分的第一行来决定。
补充知识点
HTTP动词，除了GET和POST还有哪些？
- HEAD
- PUT
- DELETE
- OPTIONS
- PATCH
- CONNECT
- TRACE
如果一个 POST 请求的消息体为 {"name":"sherry"} 这样的 JSON 内容，那么这个请求的请求头里「最好」应该包含怎样的信息？
- 请求头里应该有 Content-Type: application/json
如果用户已经登录，请求 /api/update 时服务器发现他权限不足，那么 HTTP 响应的状态码「最好」是哪一个：
- 403
什么是域名/dns
域名全称DNS（domain name system）。 简单来讲，你在浏览器输入一串域名，浏览器返回一个1.2.3.4的ip地址并进行tcp连接这个过程就是dns。
什么是host
详细来说。当我们输入一个域名的时候，浏览器会优先查看自己的缓存，如果没有，再去向操作系统询问，操作系统也会查看自己的缓存，如果还是没有，则会向ISP询问，isp（即移动联通等运营商）一定会有这样一个ip地址，再返回去。
平时我们会手动设置一个hosts，就相当于是操作系统的缓存。
什么是TCP连接
全名 transmission control protocol。传输控制协议。
三次握手 + 中间传输内容 + 四次挥手 = TCP连接
什么是三次握手
以打电话举例。A《——》B之间互相致电。
- A->B 拨号
- B->A 喂
- A->B 喂
以上的过程就是三次握手。
实际上；A = 浏览器；B = 服务器
- A->B SYN(X)（SYN是同步的缩写，同步信息的同步）
- B->A ACK(X+1) SYN(Y)（ACK是获悉的缩写）
- A->B ACK(Y+1)
因此可以确保：
A可以向B发信息；B可以收到A的信息。
B可以向A发信息；A可以收到B的信息
疑问：为什么要有最后一次？
可以假设一个场景，a向b发送后，a发现b未回复，a就挂断本次链接；即使b后面再回复给a，也不会再收到任何回复，本次连接失败。即，b能够确保a能够发送，但没有确保a能够接受。因此需要第三次握手，证明a即能够发送，也能够接受。
什么是四次挥手
以打电话举例。A《——》B之间互相致电。
- A->B 我说完了
- B->A 哦
- B->A 我也说完了
- A->B 哦
以上的过程就是四次挥手。
实际上；A = 浏览器；B = 服务器
- A->B FIN(X)（FIN是结束的缩写）
- B->A ACK(X+1)
- B->A FIN(Y)
- A->B ACK(Y+1)
疑问：为什么B->A不一起发送？
因为存在情况，知晓和结束中间保留内容，因此需要发送两次。
补充知识点
TCP 和 UDP 的区别是什么？
- TCP 面向连接有状态，UDP 无状态
- TCP 可靠（不丢失不重复），UDP 不可靠
- TCP 传输效率较低，UDP 较高
浏览器渲染原理
一般我们得到一个HTTP响应，它是一个HTML文档。HTML文本中有CSS，JS和图片。把这些文本转换为图像的行为就是浏览器的渲染原理。
浏览器我们能看到的部分，比如外框，比如按钮，都是浏览器的外壳。当我们对浏览器的外壳进行任何操作之后，就会开始调用浏览器的核心功能。比如可能一上来就会调用它的网络模块。渲染引擎负责呈现中间的页面。但比如遇到js，就需要调用网络模块下载js。
HTML的解析过程
先下载HTML，然后再解析HTML。（下载完毕再解析，还是边下载边解析，视浏览器而定）。
解析HTML的过程中由于没有解析到CSS，无法绘图，只能先构建dom树。
下载CSS和解析CSS也是一样。解析CSS时会构建一个CSS树。此时dom树和CSS树是独立的，并没有开始渲染。
当执行到JS的时候，HTML的解析会被阻塞，即JS阻塞了HTML的解析，也就是说，要优先下载JS，执行JS，执行完毕后再返回解析HTML。
HTML解析被JS阻塞的原因
-
为什么JS的执行会阻塞解析HTML？ 因为执行JS可能会修改dom树。
-
为什么JS的下载会阻塞解析HTML？ 因为解析是一行行的，只有执行到了这一行才会开始下载，而下载就必须等待执行完毕。
在script标签上加async和defer的区别
当解析script遇见defer的时候，依旧会开始下载js，但是继续HTML的解析。也就是defer让JS的下载和HTML的解析可以同时进行。当defer都执行完毕后才会执行dom ready事件。如果同时有两个defer，依照写的顺序来执行。
当解析script遇见async的时候，依旧会开始下载js，但是继续HTML的解析。也就是async让JS的下载和HTML的解析可以同时进行。但和defer不同的是，HTML解析完成后立刻执行dom ready事件。因此，dom ready事件和执行JS事件完全不一定谁先谁后。
（因此如果js只是进行一些单纯的计算，和dom没关系，那么可以用async）
JS执行被CSS阻塞
如果CSS的下载时间变的很长，那么需要等待CSS下载完之后，才能执行JS。解析CSS不会影响JS。
为什么呢？ 因为JS需要读取CSS的结果，所以必须等待CSS全部下载完成后才能够执行JS。
页面渲染原理
当拿到dom树和CSS树之后，会将二者合成一个渲染树。
拿到渲染树之后，首先要进行layout-布局的操作。主要功能是计算div的大小和尺寸。布局之后就能够知晓当前页面有哪些div需要展示。
知道布局后就要对这些div进行着色，即绘制。绘制主要是绘制颜色 & 阴影。
当绘制完成后，就进行合成。把处于同一个div的物体合为一体。多层次的和为一个层次。
页面的重绘与重排
重排发生在对layout-布局的改变。比如原有div为10cm，我想把它变成20cm，这个增高的变化就是重排，即reflow。重排时，浏览器要对页面所有的div重新排布。
重排发生之后，浏览器也要对这些内容进行重新绘制，即重绘（repaint）。
哪些变化会触发重绘，哪些改变会触发重排，可以参考css-triggers。
