这个系列的文章的第二篇，继承总结~~

这是从一个题目上衍生出的学问体系，这个题目是
从输入URL到页面加载的历程。
先梳理下这个流程

第一步

从浏览器吸收url到开启收集要求线程（浏览器的历程/线程模子，js的运行机制）

浏览器的历程

浏览器是多历程的。有一个主历程，以及每一个tab页都邑新开一个历程（某些情况下（比方空缺tab）多个tab齐集并成一个历程）
历程可以包括主历程，插件历程，GPU，tab页等等。

• brower历程

主历程，担任谐和，主控等

• 第三方插件历程

每种范例的插件都邑有一个历程，仅当运用插件时才会竖立。

• GPU历程

只要一个，用于3d绘制

• 浏览器默许历程(内核)

每一个tab页对应一个历程，担任页面衬着，剧本实行，互不影响，有时刻会优化（多个空缺tab齐集并成一个）

浏览器的多线程内核

每一个tab页可以看做浏览器的内核的历程，这个历程是多线程的，它有以下几大线程:

• GUI衬着线程
• JavaScript线程(这就是为何一直说JS是单线程的缘由)
• 事宜触发线程
• 定时器触发线程
• 收集要求线程

每次收集要求都须要拓荒零丁线程举行，假如url剖析到http要求，就会新开线程去处置惩罚资本下载。（http2.0可以完成tcp衔接复用）

JS的运行机制

参考我的另一篇文章
js实行机制 事宜轮回

第二步

开启收集线程到发出一个完全的http要求（dns查询，tcp/IP要求，五层因特网协定栈等学问）

DNS查询IP

假如输入的是域名，须要DNS剖析成IP，历程以下：

• 假如浏览器有缓存，就直接运用浏览器的缓存，假如没有，就运用当地的缓存
• 假如当地也没有缓存，就用host，再没有的话就向DNS效劳器查询（中心路由有缓存的话，可以用路由缓存等）IP

dns查询是很耗时的，假如剖析域名过量，会让首屏加载变慢，可以用dns-prefetch优化

tcp/IP要求

http的实质就是tcp/ip要求
这部份须要相识三次握手和断开衔接时的四次挥手。

三次握手

tcp将http的长报文分为短报文，经由过程三次握手竖立衔接，举行传输数据。

1. 客户端：hi，我是客户端,你是效劳器吗
2. 效劳器: hi，我是效劳器,你是客户端吗
3. 客户端: 对，我是客户端

竖立衔接胜利后，就可以最先传输数据啦~~

四次挥手

1. 主动方: hi，我要断开衔接啦，我只能被动吸收数据了
2. 被动方: hi, 我收到啦
3. 被动方: hi，我也要断开衔接啦
4. 主动方：好的，我被动吸收数据的衔接也关掉了。

以后就断开了衔接，没法通讯。

tcp/ip的并发限定

浏览器对统一域名下的并发的tcp衔接是有限定的（2-10个不等），而且在http2.0之前，一个资本下载就须要一个tcp/ip要求。

get/post的区分

get和post实质上虽然都是tcp/ip，然则除了在http层面外，在tcp/ip层面也有区分的，get只会发生一个数据包（把headers和data一同发出去）,post要求会发送两个数据包(先发送headers,收到100以后会再发data)

五层因特网协定栈

从客户端发出http要求到效劳器吸收，中心会经由一系列的流程.简朴归纳综合就是：
从应用层发送http要求，到传输层经由过程三次握手竖立tcp/ip衔接，再到收集层ip寻址，再到数据链路层的封装成帧，末了到物理层的应用物理介质传输.
另有一个完全的OSI七层框架，多了会话层和示意层
会话层：治理差别用户和历程之间的对话，比方控制登录和登出
示意层: 处置惩罚两个通讯体系中交流信息的示意体式格局，包括数据花样的交流，数据加密与解密，数据紧缩等。

第三步

从效劳器吸收到要求到对应背景吸收到要求（负载平衡，平安阻拦以及背景内部的处置惩罚）

负载平衡

关于大型项目来讲，并发接见量是很大的，这类情况下一台效劳器肯定是不够的，所以平常会有若干个效劳器构成一个集群，合营反向代办完成负载平衡。
用户提议要求都指向调理效劳器，然后调理效劳器依据现实的调理算法，分派差别的要求给对应的集群中的效劳器实行，然后调理器守候现实效劳器的http响应，再返回给浏览器

平安阻拦

背景平常都邑加阻拦器，平安阻拦考证，跨域考证等等

第四步

1. 前台和背景的交互（http头部，响应码，报文构造，cookie等 ,gzip紧缩等）

http头部

这部份包括三个部份

通用头部

Request Url: 要求的效劳器的地点

Request Method: 要求体式格局(GET,POST,HEAD,OPTIONS,PUT,DELETE,CONNECT,TRACE)
(http1.0定义了三种要求要领，GET,POST,HEAD，http1.1新增了5种要领，OPTIONS,PUT,DELETE,CONNECT,TRACE)

Status Code: 要求返回的状况码

Remote Address: 要求的长途效劳器的地点(会转成IP)

要求头部

Accept: 吸收范例，示意浏览器支撑的MIME((Multipurpose Internet Mail Extensions) 是形貌音讯内容范例的因特网规范)范例,对应效劳端返回的的content-type

Accept-Encoding:浏览器支撑的紧缩花样，如gzip

Content-Type: 浏览器发出去的实体内容的范例

Cache-Control: 指定要乞降返回的缓存机制，如no-cache

If-Modify-Since: 对应效劳端的Last-Modified,用来婚配文件是不是更改，是不是运用缓存，只能准确到1s内，是http1.0的

Expires: 在这个时刻内运用缓存，http1.0

Max-age: 代表资本在当地缓存若干秒，有用时刻内运用缓存

If-none-Match： 对应效劳端的Etag,用来婚配文件内容是不是转变

Cookie：有cookie而且同域接见时会带上

Connection: 效劳端和客户端通讯衔接体式格局，keep-alive，示意运用长衔接（数据传输完成了坚持TCP衔接不断开（不发RST包、不四次挥手），客户端的长衔接不可以无限期的拿着，会有一个超时时刻，效劳器有时刻会关照客户端超时时刻，假如效劳器没有关照客户端超时时刻也没紧要，效劳端可以主动提议四次挥手断开TCP衔接，客户端可以知道该TCP衔接已无效；别的TCP另有心跳包来检测当前衔接是不是还在世）

Host：要求的效劳器URL

Origin: 最初的要求是那里提议的，只会准确到端口

Referer: 该页面的泉源，会准确到页面地点，csrf阻拦常用到这个字段

User-Agent:用户客户端的一些信息，如浏览器信息

响应头部

Access-Control-Allow-Headers: 效劳器许可的要求的headers

Access-Control-Allow-Methods: 效劳器许可要求的要领

Access-Control-Allow-Origin: 效劳器许可的要求的origin

Content-Type：效劳器返回的实体内容的范例

date：数据从效劳端提议的时刻

cache-control：关照客户端缓存机制

Last-modified: 要求资本的末了修正时刻

Expires：示知客户端在这个时刻内运用缓存

Max-age：示知客户端在当地缓存若干秒

Etag：要求资本的标识，示意资本是不是转变

Set-cookie:设置和页面相干联的cookie，效劳器经由过程这个头部把cookie传给客户端

keep-alive:假如客户端设置了keep-alive，效劳端会有响应的响应，比方timeout=20

Server：效劳器的信息。比方Apache

响应码

差别局限的状况的意义

• 1xx—要求已被吸收，继承处置惩罚
• 2xx—要求已被接收，明白
• 3xx—重定向，完成操纵须要进一步的处置惩罚
• 4xx—客户端毛病（参数毛病，语法毛病或许要求没法完成）
• 5xx—效劳端毛病

罕见的状况码

• 200—要求已被吸收并胜利返回客户端
• 302—重定向
• 304—用浏览器的缓存
• 400—客户端要求有误，要求参数有误等
• 401—要求没有权限
• 403—制止接见(比方未登录时制止)
• 404—找不到资本
• 500—效劳器内部毛病
• 503—效劳不可用

cookie

cookie是浏览器当地存储的一种体式格局，平常协助客户端和效劳端通讯，用来磨练身份，连系效劳端的session运用。

简朴说下运用场景：

1. 用户登录
2. 效劳端收到要求，天生session,会有用户的信息
3. 天生一个sessionid
4. 效劳端在登录页面写入cookie
5. 浏览器就有这个cookie了，接见同域名的时刻都邑自动带上这个cookie

gzip

gzip的紧缩效力很高，高达70%以上，详细可以参考我另一篇文章前端机能优化之gzip

第五步

1. 缓存题目（http缓存，缓存头部，etag，cache-control等）

缓存这部份可以参考我另一篇文章
浏览器缓存机制剖析

1. 浏览器吸收到http数据包后的剖析历程（剖析html，词法剖析剖析成dom树，剖析css天生css划定规矩树，合并成render树，然后规划，绘制衬着，复合图层的合成，GPU绘制，外链资本的处置惩罚，loaded和domcontentloaded等）

复合层，合成层，GPU，硬件提速请参考这篇文章 https://juejin.im/entry/59dc9…

1. css的可视化模子（元素的衬着划定规矩，如包括块，控制框，BFC,IFC等观点）

BFC部份可以参考这篇笔记
BFC

1. JS引擎剖析历程（JS的诠释阶段，预处置惩罚阶段，实行阶段天生上下文，VO，作用域链，接纳机制等）

JS实行机制部份可参考这篇文章
js实行机制

总的来讲，学问要点就是以下这些~~

中心学问

浏览器模子

浏览器的历程和线程

衬着道理

构建dom树，css树，render树，reflow，repaint，复合层和简朴层，GPU衬着

JS剖析历程

字节-> 分词 -> 语法树 -> 剖析成机器码

JS运行机制

变量提拔，函数提拔，VO, AO, this

重点学问

http相干

http1.0 http1.1 http2.0，https
http2.0的重要新特征

1. 多路复用（一个tcp/ip衔接可以要求多个资本）
2. 首部紧缩(http头部紧缩，削减体积)
3. 二进制分帧（在应用层和传输层多了一层二进制分帧层，改进了传输机能，完成低耽误和高吞吐量）
4. 效劳端推送(效劳端对客户端的一个要求可以发出多个响应，可以主动关照客户端)

https就是竖立在http基础上，在要求前先竖立ssl衔接，确保接下来的通讯都是加密的，没法被盗取。

下面简朴说下SSL/TLS握手流程:

1. 浏览器要求竖立ssl衔接，并向效劳端发送一个随机数client random和客户端支撑的加密要领，比方RSA加密，此时是明文传输
2. 效劳端从中选出一组加密算法与hash算法，复兴一个随机数server random，并将本身的身份信息以证书的情势发给浏览器（包括网站地点，非对称加密的公钥，证书的颁布机构等）

3. 浏览器收到效劳端发的证书后

   • 考证证书的正当性（颁布机构是不是正当，证书中的网址是不是和地点的网址雷同），假如证书信托，浏览器前面会涌现一个小锁的图标
   • 用户吸收证书后（不论信不信托），浏览器会天生一个新的随机数premaster-key，然后用证书中的公钥和指定的加密体式格局加密premaster-key，发送给效劳端

• 应用client random，server random和premaster-key经由过程肯定的算法可以天生一个http衔接传输的对称加密session key
• 运用约定好的hash算法盘算握手音讯，并运用天生的session key加密，将之前天生的一切信息发送给效劳端

1. 效劳端吸收到浏览器的复兴

• 应用已知的加解密体式格局和本身的私钥解密客户端发来的信息，猎取premaster-key
• 和浏览器雷同的划定规矩天生session key
• 运用session key解密浏览器发来的握手信息，并考证hash是不是与浏览器发来的一致
• 运用session key加密一段握手信息，发送给浏览器

1. 浏览器解密效劳端发来的握手信息的hash，假如与效劳端发来的hash一致，则此次握手完毕。

web平安相干（xss，csrf）

xss 跨站剧本进击
csrf 跨站要求捏造

跨域及处置惩罚

跨域处置惩罚参考这个系列的前一篇文章~~
从前端小白到中高级前端须要控制的妙技总结（1）