一.从浏览器接受url开始，开启网络请求线程。参考https://www.cnblogs.com/chengxs/p/11039155.html在他的基础上补充了些
1.浏览器是多进程的
（1）浏览器是多进程的
（2）不同类型的标签页会开启一个新的进程
（3）相同类型的标签页会合并到一个进程中
2.浏览器中各个进程及作用
（1）浏览器进程：只有一个进程，负责各个标签的创建和销毁；负责浏览器页面显示，负责资源的下载和管理。
（2）第三方插件进程：每个第三方插件使用都会创建一个对应的进程
（3）GPU进程：最多一个进程，负责3D绘制和硬件加速
（4）浏览器渲染进程：每个tab页对应一个进程，主要负责html，css，js的解析，执行和渲染，以及事件处理等
3.浏览器渲染进程
每个tab页是一个浏览器内核进程，该进程是多线程的：GUI线程，JS引擎线程，事件触发线程，定时器线程，异步的http网络请求线程。JS引擎线程是内核线程中的一个线程，所以常说JS引擎是单线程的。
4.解析url
url：统一资源定位符。包括：protocol，host，port，path，query，fragment
二.开启网络请求线程到发出一个完整的http请求。
1.每一次网络请求需要开辟单独的线程进行，比如URL解析到http协议，就会新建一个网络线程去处理资源下载。
URL会根据解析得协议，开辟网络线程，前往请求资源。
2.开启网络线程到发出一个完整的http请求
（1）DNS解析：根据输入的域名，需要对其进行解析成对应的ip，解析过程为：先去浏览器缓存中查找该域名，如果未命中就去本机的缓存中查找，如果还没有命中，就去查找本机的host文件，如果还没有命中就去请求本地域名服务器（，这个DNS服务器不是权威服务器，而是相当于一个代理的dns解析服务器，他会帮你迭代权威服务器返回的应答，然后把最终查到IP返回给你，可在本机进行配置，如果没有配置回去请求公共域名解析地址114.114.114.114和8.8.8.8），如果还没有命中，本地域名服务器就会从配置文件中读取配置13个根域名服务器的地址，向其中一台发出查询请求，如果该域名不属于该服务器，该服务器也会知道它是属于哪台根服务器的域名并将这台根服务器的ip返回，然后本地域名服务器再向这台服务器发起请求，这台服务器会将ip返回，本地域名服务器再给用户返回，并保存在缓存中。
DNS解析是很耗时的，因此如果解析域名过多，首屏加载会变慢。
（2）tcp/ip请求构建：http请求就是tcp/ip请求构建，需要通过3次握手建立连接，断开连接时会经历四次挥手。
三次握手：
客户端：hello，你是server么？（发送标有SYN的数据包）
服务端：hello，我是server，你是client么（发送标为SYN/ACK的数据包）
客户端：yes，我是client（发送ACK的数据包）
四次挥手：
主动方：我已经关闭了向你那边的主动通道了，只能被动接收了（客户端发送FIN=1代表主动关闭连接，不能发送，但是可以接受）
被动方：收到通道关闭的信息（服务端收到FIN，并向客户端发送一个确认报文ACK=U+1，客户端收到这个状态后会进入等待状态，等待服务端请求释放连接）
被动方：那我也告诉你，我这边向你的主动通道也关闭了（服务端发送完数据后，就发送FIN报文，请求释放链接）
主动方：最后收到数据，之后双方无法通信（客户端收到后回复一个确认信息，ACK=1，并关闭连接）
（3）tcp/ip的并发限制
浏览器对同一域名下并发的tcp连接是有限制的（2-10个不等）
（4）get和post的区别
get请求时，浏览器会把header和data一起发送出去，服务器响应200并返回数据
post请求时，浏览器首先发送headers，服务器响应100continue，浏览器在发送data，服务器响应200并返回数据
（5）五层网络协议栈
五层网络协议：应用层（DNS，FTP，HTTP）：DNS解析成IP并发出http请求；传输层（TCP，UDP）：建立tcp连接；网络层（IP）：IP寻址；数据链路层：封装成帧；物理层（利用物理介质传输比特流）：物理传输，
整体流程为：应用层经过dns解析成IP后发送http请求，传输层通过tcp/ip连接，再经过网络层的IP寻址（寻找mac地址）再到数据链路层封装成帧，再到物理层通过物理介质传递
三.服务器接收到请求到对应后台接收请求。
服务端收到请求时会经历一系列处理：请求到达调度服务器（反向代理服务器，如nginx的均衡负载）调度服务器根据实际的调度算法，分配不同的请求到集群中的服务器执行，调度服务器等待实际服务器的http响应，并且反馈给用户
（1）请求到达实际服务器时，会先到达后台所在的容器（如tomcat）
（2）然后到达对应的程序，程序会先进行统一的验证，如安全拦截等，如果不符合就会返回相应的http报文
（3）如果验证通过了，会进行计算，数据库操作等
（4）程序执行完成之后会返回一个http响应（继续经过五层网络协议，不过是方向），然后返回前端，完成交互。
四.后台和前端的http交互。
后台和前端通过http报文进行交互
1. http报文结构包括：通用头部，请求/响应头部，请求/响应体
（1）通用头部（General）
Request URL：请求的web服务器地址
Request Method：请求方法
Status Code：请求状态（1xx：表示请求以接受，继续处理；2xx：表示请求成功；3xx：重定向或请求以发出但是内容未修改；4xx：客户端错误，语法错误或者请求无法实现；5xx:服务端错误）
Remote Address：服务器的IP地址
（2）请求头（Request Headers）
Accept：浏览器接受的MIME类型，同浏览器返回的content-type（通知服务器能够处理的媒体类型及媒体类型的相对优先级，相对优先级通过q=？表示，范围为0-1，当服务器提供多种内容时，将会首先返回权重值高的媒体类型，使用type/subtype形式，一次指定多种媒体类型）
Accept-Charset首部字段用于通知服务器客户端支持的字符集及字符集的相对优先顺序，可以一次指定多种字符集，同样用权重q值来表示相对优先级
Accept-Encoding：浏览器支持的压缩类型，如gzip（用于告知服务器客户端支持的内容编码及内容编码的优先级顺序，如：gzip，compress，deflate，identity）
Accept-Language：接受的语言类型（告知服务器客户端能够处理的自然语言集如：zh-ch,zh;en-us,en）
Connection：浏览器与服务器通信时对长连接的处理，如keep-live
Content-type：客户端发送的实体内容类型( MediaType，即是Internet Media Type，互联网媒体类型；也叫做MIME类型，在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息。)
Content-length：发送给服务端实体正文的长度（以字节为单位）
Cookie：有cookie且同域名访问时会静止
Host：请求的服务器URL
Origin：请求的域名（只会精确到端口 ）
Refer：该页面的来源（精确到详细地址）
User-agent：用户客户端的相关信息
（3）响应头（ Response Headers）
Content-type：服务端返回的的实体内容类型
Date：数据从服务端发送的时间
Cache-Control：告诉浏览器什么情况可以缓存
Set-Cookie：设置该域名的cookie，服务端通过这个头部把cookie传给客户端
Keep-Live：如果客户端有keep-live，服务端也会有回应（如time-out=38）
Server：服务器的一些相关信息
（3）请求/响应体 (Form Data)
请求实体会将需要的参数放入
响应实体就是服务端需要传给客户端的内容（json或者html）
五.缓存问题：http缓冲(待补充)
强缓冲
协商缓冲
六.浏览器收到http数据包后的解析流程（词法 分析生成dom树，同时css生成规则树，二者合并生成render树，layout布局确定dom位置，painting渲染，复合图层的合成，GPU绘制）
1. 使用GUI渲染线程：GUI渲染线程与JS引擎线程是互斥的，当JS引擎线程执行时，GUI线程会被挂起，GUI线程会被保存在一个队列里等到JS引擎空闲时执行
（1）解析html，构建DOM树；同时解析CSS，生成CSS规则树。
（2）合并DOM树和CSS规则树，生成Render树。
（3）布局Render树（layout/reflow回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树）,负责各元素的尺寸，位置计算。
（4）绘制render树（paint重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了），绘制页面像素信息。
（5）浏览器会将各层的信息发给GPU。GPU会将各层合成（composite），显示在屏幕上。
回流一定伴随着重绘，重绘却可以单独出现。
2.优化方案：
（1）减少逐项更改样式，做好一次性更改样式。或者将样式定义为class，并一次性更新。
（2）避免循环操作dom，创建一个documentFragment或div，在他上面进行所有的dom操作，最后添加到window.document中。
（3）避免多次读取offset等属性，无法避免就将他们缓存到变量中。
（4）将复杂的元素绝对定位或者固定定位，使他们脱离文档流，否则回流代价很高。
3.复合图层的概念(以下几点转载：http://web.jobbole.com/83575/)
将该元素变成一个复合图层，就是传说中的硬件加速技术
- 最常用的方式：translate3d、translateZ
- opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
- will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），
作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）
- <video><iframe><canvas><webgl>等元素
- 其它，譬如以前的flash插件
4. absolute和硬件加速的区别
可以看到，absolute虽然可以脱离普通文档流，但是无法脱离默认复合层。所以，就算absolute中信息改变时不会改变普通文档流中render树，但是，浏览器最终绘制时，是整个复合层绘制的，所以absolute中信息的改变，仍然会影响整个复合层的绘制。（浏览器会重绘它，如果复合层中内容多，absolute带来的绘制信息变化过大，资源消耗是非常严重的）而硬件加速直接就是在另一个复合层了（另起炉灶），所以它的信息改变不会影响默认复合层（当然了，内部肯定会影响属于自己的复合层），仅仅是引发最后的合成（输出视图）
5. 复合图层的作用？
一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能
但是尽量不要大量使用复合图层，否则由于资源消耗过度，页面反而会变的更卡
硬件加速时请使用index
使用硬件加速时，尽可能的使用index，防止浏览器默认给后续的元素创建复合层渲染
具体的原理时这样的：
**webkit CSS3中，如果这个元素添加了硬件加速，并且index层级比较低，
那么在这个元素的后面其它元素（层级比这个元素高的，或者相同的，并且releative或absolute属性相同的），
会默认变为复合层渲染，如果处理不当会极大的影响性能**
简单点理解，其实可以认为是一个隐式合成的概念：如果a是一个复合图层，而且b在a上面，那么b也会被隐式转为一个复合图层，这点需要特别注意
另外，这个问题可以在这个地址看到重现（原作者分析的挺到位的，直接上链接）：
七：Js引擎执行过程
另开一篇，传送门：https://www.cnblogs.com/pianruijie/p/11454598.html
另开一篇，传送门：https://www.cnblogs.com/pianruijie/p/11454598.html