白屏-优化

白屏时间：

即用户点击一个链接或打开浏览器输入url地址后，从屏幕空白到显示第一个画面的时间

白屏过程，经历了什么？

1. DNS解析，浏览器从DNS服务器中进行域名查询
	浏览器会对页面进行域名解析，获取到服务器的IP地址后，进而和服务器进行通信
2. 建立TCP请求连接
	TCP通过三次握手建立连接，并提供可靠的数据传输服务

	三次握手：建立连接
	
	第一次握手：建立连接时，客户端发送syn包（seq=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。 [3] 

	第二次握手：服务器收到syn包，必须确认客户端的SYN（ack=j+1），同时自己也发送一个SYN包（seq=k），即SYN+ACK包，此时服务器进入SYN_RECV状态。 [3] 

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

	四次挥手：关闭连接
	
	第一步，当主机A的应用程序通知TCP数据已经发送完毕时，TCP向主机B发送一个带有FIN附加标记的报文段（FIN表示英文finish）。
	第二步，主机B收到这个FIN报文段之后，并不立即用FIN报文段回复主机A，而是先向主机A发送一个确认序号ACK，同时通知自己相应的应用程序：对方要求关闭连接（先发送ACK的目的是为了防止在这段时间内，对方重传FIN报文段）。
	第三步，主机B的应用程序告诉TCP：我要彻底的关闭连接，TCP向主机A送一个FIN报文段。
	第四步，主机A收到这个FIN报文段后，向主机B发送一个ACK表示连接彻底释放。

3. 服务端请求处理响应
	TCP连接建立，web服务器处理请求，同时浏览器等待服务器的处理响应。
	web服务器对静态资源如图片、css文件、静态HTML进行响应
4. 客户端下载、解析、渲染显示页面
	服务器返回数据，浏览器接收数据，进行HTML下载、解析、渲染显示
	a. 如果是Gzip包，则先解压为HTML
	b. 解析HTML的头部代码，下载头部代码中的样式资源文件或脚本资源文件
	c. 解析HTML代码和样式文件代码，构建HTML的DOM树以及与CSS相关的CSSOM树
	d. 通过遍历DOM树和CSSOM树，浏览器依次计算每个节点的大小、坐标、颜色等样式，构造渲染树
	e. 根据渲染树完成绘制过程
	      浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。
      当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，
                  当两棵树构建完毕，构建渲染树，然后进行绘制。

	Tips:浏览器安全解析策略对解析HTML造成的影响：

	当解析HTML时遇到内联JS代码，会阻塞DOM树的构建
	特别悲惨的情况： 当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时！！！
                            根据浏览器的安全解析策略，浏览器暂停JS脚本执行，暂停HTML解析。直到CSS文件下载完成，
                            完成CSSOM树构建，重新恢复原来的解析。
	一定要合理放置JS代码！！！

白屏-性能优化

至此，我们已经了解了从浏览器在打开一个链接开始，到屏幕展示的过程-白屏时间的历程，
那这对每个环节中发生的事情，我们可以有针对性的进行相关的优化。

1. DNS解析优化
   针对DNS Lookup环节，我们可以针对性的进行DNS解析优化。

    a DNS缓存优化
    b DNS预加载策略
    c 稳定可靠的DNS服务器
   

2. TCP网络链路优化
   采用cdn的做法将某些内容放在不同的域里面，从一定意义上可以增加下载的并行度

3. 服务端处理优化
   服务端的处理优化，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等

4. 浏览器下载、解析、渲染页面优化
   根据浏览器对页面的下载、解析、渲染过程，可以考虑一下的优化处理：

    尽可能的精简HTML的代码和结构
    尽可能的优化CSS文件和结构
    一定要合理的放置JS代码，尽量不要使用内联的JS代码