@色少1年前
基本流程：
1、用户在浏览器中输入url地址
面试延伸：浏览器进程与线程的认知程度。
浏览器是多进程的 浏览器之所以能够运⾏，是因为系统给它的进程分配了资源（cpu、内存）
简单点理解，每打开⼀个 Tab ⻚，就相当于创建了⼀个独⽴的浏览器进程。
2、浏览器解析域名得到服务器ip地址
浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。
面试延伸：
DNS 缓存：DNS 存在着多级缓存，从离浏览器的距离排序的话，有以下⼏种: 浏览 器缓存，系统缓存，路由器缓存，IPS 服务器缓存，根域名服务器缓存，顶级域名服 务器缓存，主域名服务器缓存
DNS 负载均衡：DNS 可以返回⼀个合适的机器的 IP 给⽤户，例如可以根据每台机 器的负载量，该机器离⽤户地理位置的距离等等，这种过程就是 DNS 负载均衡，⼜ 叫做 DNS 重定向。⼤家⽿熟能详的 CDN(Content Delivery Network) 就是利⽤ DNS
的重定向技术，DNS 服务器会返回⼀个跟⽤户最接近的点的 IP 地址给⽤户，CDN
节点的服务器负责响应⽤户的请求，提供所需的内容
3、TCP三次握手建立客户端和服务器的连接
因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：
第一次握手：客户端—>服务端 ack=1,seq=x（x随机生成）
第二次握手：服务端—>客户端 ACK=1,ack=x+1,seq=y（y随机生成）
第三次握手：客户端—>服务端 ACK=1,ack=y+1,seq=x+1
完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。
面试延伸：HTTP 协议 80/8080, HTTPS 协议 443。http 请求格式。
常⽤⽅法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。
请求报头：请求报头允许客户端向服务器传递请求的附加信息和客户端⾃⾝的信息。
常⻅ 的请求报头有: Accept , Accept-Charset , Accept-Encoding , Accept-Language , Content-Type , Authorization , Cookie , User-Agent 等。 Accept ⽤于指定客户端⽤于接受哪些类型的信息， Accept-Encoding 与 Accept 类似，它⽤于 指定接受的编码⽅式。 Connection 设置为 Keep-alive ⽤于告诉客户端本次 HTTP 请求结束 之后并不需要关闭 TCP 连接，这样可以使下次 HTTP 请求使⽤相同的 TCP 通道，节省
TCP 连接建⽴的时间。
请求正⽂： 当使⽤ POST, PUT 等⽅法时，通常需要客户端向服务器传递数据。这些数据 就储存在请求正⽂中。在请求包头中有⼀些与请求正⽂相关的信息，例如: 现在的 Web
应⽤通常采⽤ Rest 架构，请求的数据格式⼀般为 json。这时就需要设置 Content-Type: application/json 。
4、客户端发送HTTP请求获取服务器端的静态资源
面试延伸：HTTP 响应报⽂也是由三部分组成: 状态码, 响应报头和响应报⽂。
状态码是由 3 位数组成，第⼀个数字定义了响应的类别，且有五种可能取值:
1xx：指⽰信息–表⽰请求已接收，继续处理。
2xx：成功–表⽰请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进⾏更进⼀步的操作。
4xx：客户端错误–请求有语法错误或请求⽆法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
平时遇到⽐较常⻅的状态码有: 200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500
响应报头: 常⻅的响应报头字段有: Server, Connection…
响应报⽂: 服务器返回给浏览器的⽂本信息，通常 HTML, CSS, JS, 图⽚等⽂件就放在这⼀部分
5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
6、TCP四次挥手关闭客户端和服务器的连接
数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：
第一次挥手：客户端—>服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1
第二次挥手：服务器—>客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态
第三次挥手：服务器—>客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK
第四次挥手：客户端—>服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED
面试延伸：
TCP、UDP 和 HTTP 的区别
TCP、UDP：传输层协议
HTTP: 应⽤层协议
TCP（传输控制协议，Transmission Control Protocol）：
(类似打电话) ⾯向连接、传输可靠（保证数据正确性）、有序（保证数据顺序）、传输⼤量数据（流模式）、速度慢、对系统资源的要求多，程序结构较复杂，每⼀条 TCP 连接只能是点到点的，TCP ⾸部开销 20 字节。
UDP(⽤户数据报协议，User Data Protocol)：（类似发短信） ⾯向⾮连接 、传输不可靠（可能丢包）、⽆序、传输少量数据（数据报模式）、速度 快，对系统资源的要求少，程序结构较简单 ， UDP ⽀持⼀对⼀，⼀对多，多对⼀和多对多的交互通信，UDP 的⾸部开销⼩，只有 8 个字节。
7、浏览器解析文档资源并渲染页面
浏览器解析文档资源并渲染页面流程：
（1）解析html资源，构建DOM Tree
（2）解析css资源，构建CSS Rule Tree
（3）JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree
（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）
（5）调用操作系统Native GUI的绘制
（6）页面绘制完成
涉及到的其他知识点：
1、Render Tree的生成
DOM Tree和CSS Tree结合会生成Render Tree，是由可视化元素按照其顺序生成的树形结构，非可视化元素是不会出现到渲染树中的。
非可视化元素：head、display：none；（注意：visibility：hidden的元素会出现在渲染树中）
2、回流和重绘
回流（reflow，也叫重排、布局）：某部分的变化影响了布局，浏览器需要重新渲染。（如元素大小、位置的改变）
重绘（repaint）：元素的某一部分发生改变，尺寸、位置没有改变。（字体颜色、背景颜色的改变）
引起回流的几个主要原因：
（1）网页初始化
（2）JS操作DOM树（增加、删除元素等）
（3）某些元素的尺寸改变
（4）CSS属性的改变
浏览器的“dirty”系统：
为了避免页面细小的改变就引起回流和重绘，“dirty”系统会将这些改变操作积攒一批再进行操作，这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做：resize窗口、改变了页面默认的字体等，这些操作会直接触发回流。
编写代码时如何减少回流和重绘：
（1）修改样式不要逐条修改，定义CSS样式的class，直接修改元素的className
（2）不要将DOM节点的属性值放在循环中当成循环的变量
（3）为动画的HTML元素使用fixed或absolute的position属性，修改它们的CSS就不会触发reflow
（4）把DOM离线后修改，设置display：none或者clone元素到内存中，修改完成再显示回页面
（5）不要使用table布局，一个微小的改变就可能引起整个table的重新布局
3、性能优化
（1）提升HTML的加载速度
– 页面精简，删除不必要的内容，将内嵌的JS和CSS移至外部文件，使用压缩工具等
– 减少文件数量，合并文件，减少请求次数
– 减少域名查询，外部引入的资源尽量少使用不同的域名
– 使用缓存，重用数据
– 优化页面元素的加载顺序
– 使用合法的标签
– 根据浏览器类型选择合适的策略
（2）编写合理的CSS
– DOM的深度尽量浅
– 使用合法的CSS属性
– 不要为ID选择器指定类名或标签名
– 避免使用后代选择器，尽量使用子选择器
– 避免使用通配符
（3）关于JS标签
js标签的加载和执行特点：载入后立即执行，执行时会阻塞页面后续内容
– 将所有的js标签放在页面底部，保证脚本执行前已完成DOM渲染
– 尽可能合并脚本
– 减少内联js的使用
– 注意多个js标签的引入顺序
– 使用defer属性，该属性可以使脚本在文档完全呈现以后再执行
– 使用async属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现