浏览器输入url到页面展示出来的全过程
浏览器输入url到页面展示出来的全过程
基本流程：
1、用户在浏览器中输入url地址
2、浏览器解析域名得到服务器ip地址
解析域名的过程如下：
首先搜索浏览器的 DNS 缓存，缓存中维护一张域名与 IP 地址的对应表
若没有命中，则继续搜索操作系统的 DNS 缓存
若仍然没有命中，则操作系统将域名发送至本地域名服务器，本地域名服务器采用递归查询自己的 DNS 缓存，查找成功则返回结果
若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询
- 首先本地域名服务器向根域名服务器发起请求，根域名服务器返回顶级域名服务器的地址给本地服务器
- 本地域名服务器拿到这个顶级域名服务器的地址后，就向其发起请求，获取权限域名服务器的地址
- 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址
本地域名服务器将得到的 IP 地址返回给操作系统，同时自己将 IP 地址缓存起来
操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起
至此，浏览器就得到了域名对应的 IP 地址，并将 IP 地址缓存起
流程图如下：
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
完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。
4、客户端发送HTTP请求获取服务器端的静态资源
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
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属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现
这里再对defer和async做一下细致的划分
正常情况下script会阻碍HTML解析，等script下载完毕且执行完后才会继续解析HTML
而defer与async 都不会阻碍HTML解析（异步加载）
他们的区别在与：
- async 执行与文档顺序无关，先加载哪个就先执行哪个；defer会按照文档中的顺序执行
- async 脚本加载完成后立即执行，可以在DOM尚未完全下载完成就加载和执行；而defer脚本需 要等到文档所有元素解析完成之后才执行
- 可以概括：async:谁先加载完谁执行 defer：先下载 等dom加载完后再按顺序执行