输入url之后

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。（DNS优化 DNS缓存 DNS负载均衡）
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

浏览器解析渲染页面.png

1、从浏览器接收url到开启网络请求线程（涉及到：浏览器机制，线程和进程之间的关系等）
2、开启网络线程到发出一个完整的http请求（涉及到：dns查询，tcp/ip请求，5层网络协议栈等）3、从服务器接收到请求到对应后台接收到请求（涉及到：均衡负载，安全拦截，后台内部的处理等）
4、后台和前台的http交互（涉及到：http头，响应码，报文结构，cookie等，可以提下静态资源的cookie优化，以及编码解码如gzip压缩等）
5、缓存问题：http缓存（涉及到：涉及到http缓存头部，etag，expired，cache-control等）
6、浏览器接收到http数据包后的解析流程
（涉及到：html的词法分析，然后解析成dom树，同时解析css生成css规则树，合并生成render树。然后layout布局、painting渲染、复合图层的合成、GPU绘制、外链接处理、loaded和documentloaded等）
7、css可视化格式模型（涉及到：元素渲染规则，如：包含块，控制框，BFC，IFC等概念）
8、js引擎解析过程（涉及到：js解释阶段，预处理阶段，执行阶段生成执行上下文，VO（全局对象），作用域链，回收机制等）
9、其他（扩展其他模块：跨域，web安全等）

从浏览器接收到url到开启网络请求线程
涉及到：浏览器的进程和线程模型，js的运行机制。
1、浏览器是多进程的
（1）浏览器是多进程的；
（2）不同类型的标签页会开启一个新的进程；
（3）相同类型的标签页会合并到一个进程中。
浏览器中各个进程以及作用：
1、浏览器进程：只有1个进程，
（1）负责管理各个标签的创建和销毁；
（2）负责浏览器页面显示；
（3）负责资源的管理和下载；
GPU进程：最多1个进程，负责3D绘制和硬件加速；
浏览器渲染进程：可以是多个进程，浏览器的内核，每个tab页一个进程，主要负责HTML，css，js等文件的解析，执行和渲染，以及事件处理等。
浏览器渲染进程（内核进程）
每一个tab页面是浏览器内核进程，然后这个每一个进程是多线程的
它有几大类子线程：（1）GUI线程；（2）JS引擎线程；（3）事件触发线程；（4）定时器线程；（5）异步的http网络请求线程


200——表明该请求被成功地完成，所请求的资源发送回客户端
304——自从上次请求后，请求的网页未修改过，请客户端使用本地缓存
400——客户端请求有错（譬如可以是安全模块拦截）
403——禁止访问（譬如可以是未登录时禁止）
401——请求未经授权
404——资源未找到
500——服务器内部错误
503——服务不可用

浏览器内核拿到内容后，渲染大致分为以下几步：
（1）解析html，构建DOM树；同时解析CSS，生成CSS规则树。
（2）合并DOM树和CSS规则树，生成Render树
（3）布局Render树（layout/reflow）,负责各元素的尺寸，位置计算。
（4）绘制render树（paint），绘制页面像素信息。
（5）浏览器会将各层的信息发给GPU。GPU会将各层合成（composite），显示在屏幕上。

Layout，也称为Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树。
Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以
什么引起回流：1.页面渲染初始化  2.DOM结构改变，比如删除了某个节点 3.render树变化，比如减少了padding
4.窗口resize
5.最复杂的一种：获取某些属性，引发回流， 很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流， 但是除了render树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效

回流一定伴随着重绘，重绘却可以单独出现。
优化方案：
1）减少逐项更改样式，做好一次性更改样式。或者将样式定义为class，并一次性更新。
（2）避免循环操作dom，创建一个documentFragment或div，在他上面进行所有的dom操作，最后添加到window.document中。
（3）避免多次读取offset等属性，无法避免就将他们缓存到变量中。
（4）将复杂的元素绝对定位或者固定定位，使他们脱离文档流，否则回流代价很高。
注意：改变字体大小会引起回流。


静态资源：
css 下载时异步的，不会阻塞浏览器构建 DOM 树。但会阻塞渲染
js脚本处理时，阻塞浏览器的解析（defer 与 async去优化）defer 是延迟执行，而 async 是异步执行。
遇到图片等资源时，直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有src的地方

JS的解析.png

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end') 
}
async1()

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

//script start  async2 end Promise  script end  async1 end promise1 promise2
首先，打印script start，调用async1()时，返回一个Promise，所以打印出来async2 end。
每个 await，会新产生一个promise,但这个过程本身是异步的，所以该await后面不会立即调用。
继续执行同步代码，打印Promise和script end，将then函数放入微任务队列中等待执行。
同步执行完成之后，检查微任务队列是否为null，然后按照先入先出规则，依次执行。
然后先执行打印promise1,此时then的回调函数返回undefinde，此时又有then的链式调用，又放入微任务队列中，再次打印promise2。
再回到await的位置执行返回的 Promise 的 resolve 函数，这又会把 resolve 丢到微任务队列中，打印async1 end。
当微任务队列为空时，执行宏任务,打印setTimeout。

JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。
但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，
这就是：同步任务(synchronous)和异步任务(asynchronous)。
JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。
同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。
所有的同步任务在主线程上执行，形成一个执行栈;
异步任务有了运行结果就会在任务队列中放置一个事件；
脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，
这个过程是不断重复的，所以又叫做事件循环(Event loop)

JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

HTTP默认端口80，HTTPS默认端口443。
DNS实际上是一个域名和IP对应的数据库

第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入等待服务器确认的状态；

第二次握手： 服务器收到syn包，必须确认客户端的syn（ack=j+1），同时自己根据syn生成一个ACK包，此时服务器进入等待状态；

第三次握手： 客户端收到服务器的ACK包，向服务器发送确认，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

第一次握手是浏览器发完数据，然后发送FIN请求断开连接。
第二次握手是服务器向客户端发送ACK，表示同意。
第三次握手是服务器可能还有数据向浏览器发送，所以向浏览器发送ACK同时也发送FIN请求，是第三次握手。
第四次握手是浏览器接受返回的ACK，表示数据传输完成。

输入url之后.png