输入URL到页面渲染发生的事

老生常谈的题，网上文章都烂大街了。写这篇文章只是为了更好的总结。

OK！我们先整理一下目录：

• DNS解析域名
• 建立TCP
• 传递HTTP报文
• 服务器处理请求
• 服务器返回响应
• 关闭TCP连接
• 浏览器渲染

一.DNS解析域名

      我们知道域名对应了IP，那将域名解析成IP的就是DNS服务器了。输入URL地址后，系统会首先自动从

Hosts文件

中寻找对应的

IP地址

，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS

域名解析

服务器进行IP地址的解析。

二.建立TCP

     TCP的建立采用的是三次握手的方式。

       这里的重点在于为什么要采用三次握手————为了防止在客户端发起的连接请求因网络滞后在到达服务端时已经是失效的请求，故需要客户端在收到服务端的确认后需要再次发送确认信号确保请求没有失效。

三.传递HTTP报文

      连接TCP后客户端发起HTTP报文请求，HTTP可以说的不多。主要区别get跟post的使用。

Get 请求能缓存，Post 不能Post 相对 Get 安全一点点，因为Get 请求都包含在 URL 里，且会被浏览器保存历史纪录，Post 不会，但是在抓包的情况下都是一样的。Post 可以通过 request body来传输比 Get 更多的数据，Get 没有这个技术URL有长度限制，会影响 Get 请求，但是这个长度限制是浏览器规定的，不是 RFC 规定的Post 支持更多的编码类型且不对数据类型限制

四.五.服务器处理响应以及返回相应

      服务器接收请求后会获取相应的静态资源或其他数据库操作并返回到客户端。

六.TCP关闭

    TCP的关闭采用四次挥手。

       记住fin报文段的发送时间，只有再fin报文段发出后才表示该端所有信息已经发送完毕，可以等待关闭。

七.浏览器渲染

    

       浏览器接收到响应后的处理为上图步骤。在这一步中还有一个非常重要的知识点———渲染优化:

1.  解决渲染阻塞。                                                                                                                      在加载外部资源的时候，CSS>JS>HTML。在解析HTML中遇到CSS会优先解析CSS，    同    样在遇到JS会优先执行JS。可以采用以下方法避免渲染堵塞:
      CSS文件:采用媒体查询，只有在需要的时候引入。

      JS文件：在标签中使用 async或defer特性。async与defer的区别:async异步加载，             async为何时加载完该文件何时解析该文件，defer也为异步加载，但defer的解析是在             其 他 html解析完毕之后再执行。

   2.  减少对DOM的操作 

          对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。 解决办法：如果无法避免对DOM的操作可以使用改变其classname的方式代替直接修改其css样式。

总结

     了解页面渲染的流程有什么用？最大的作用在于对加载速度的优化。如果连如何渲染都不知道，又怎么知道该在哪里进行优化呢。

转载于:https://juejin.im/post/5d4d200fe51d4561da62010d