在浏览器中输入url到页面显示出来的过程发生了什么？【前端每日一题-11】

在浏览器中输入url到页面显示出来的过程发生了什么？

考点：

• dns
• http及缓存
• 网络知识
• 页面渲染过程

答案：

一下是我的回答，但是水平不够，所以层次比较简陋。后面有附上大神的答案。

1.url的组成
协议:http https
域名+端口
虚拟目录
参数
2.IP寻址
浏览器缓存
本地hosts
路由器缓存
dns域名服务器
优化dns预解析，dns-prefetch
3.建立TCP请求
三次握手
TCP/IP协议栈：应用层（应用层，表示层，会话层），传输层，网络层，数据链路层，物理层
3.发起http请求
浏览器对同域名下的TCP连接有5-7的限制（优化方法：域名分片，资源放在cdn服务器上）
http缓存：强缓存和协商缓存，expires和cache-control，etag和last-modefied。
http1.0：expires容易被客户端串改缓存过期时间，last-modefied精确到秒，一秒内的改变没法准确的命中。一个连接请求一个返回一个，重新建立连接。
http1.1：cache-control是expires的强化版本，距离当前时间的一个区间，etag是last-modefied的强化版本，记录文件修改的标志。一个连接多次请求，但也是请求一个返回一个。
http2.0功能介绍如下：
二进制分帧：在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码 ，其中 HTTP1.x 的首部信息会被封装到 HEADER frame，而相应的 Request Body 则封装到 DATA frame 里面。
头部压缩：http2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。高效的压缩算法可以很大的压缩header，减少发送包的数量从而降低延迟。
多路复用：一个域名建立一个tcp连接发送所有的http请求和响应
https：防止中间人攻击，使用对称和非对称加密，对传输内容进行加密传输，CA证书机构。
4.内容渲染
生成HTMLTREE，生成CSSOM，生成renderTree，进行页面的渲染
CSS放在头部，css是从右往左进行解析，减少匹配次数
JS放在底部，async和defer的区别，前者加载完立即执行，后者等dom加载完后执行
涉及到重绘和重排，重绘改变颜色，重排改变大小和位置，重排一定会引发重绘复制代码

参考：

dailc.github.io/2018/03/12/…

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