一、前端性能优化
1、从输入url到页面展现发生了什么?(万能面试题) 2、网络优化 3、浏览器优化
详细如下:
从输入url到页面展现发生了什么? 1)浏览器的地址栏输入URL并按下回车; 2)DNS 解析:将域名解析成 IP 地址; 3)TCP 连接:TCP 三次握手; 4)发送 HTTP 请求; 5)服务器处理请求并返回 HTTP 报文; 6)浏览器解析渲染页面; 7)断开连接:TCP 四次挥手 说完整个过程的几个关键点后我们再来展开的说一下。
1、URL
我们常见的URL是这样的:http://www.baidu.com,这个域名由三部分组成:协议名、域名、端口号,这里端口是默认所以隐藏。最常见的的协议是HTTP协议,除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。如HTTP默认端口80,HTTPS默认端口443。说到这里可能有的面试官会问你同源策略,以及更深层次的跨域的问题。
2、DNS 解析 ( * 网络优化 )
在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。
1、IP 地址 IP 地址是指互联网协议地址,是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式。
2、域名解析定义 DNS 协议提供通过域名查找 IP 地址,或逆向从 IP 地址反查域名的服务。DNS 是一个网络服务器,我们的域名解析简单来说就是在 DNS 上记录一条信息记录。
3) 浏览器如何通过域名去查询 URL 对应的 IP 呢? DNS域名解析分为递归查询和迭代查询两种方式,现一般为迭代查询。
DNS 应用
-
CDN (Content Delivery Network) 就是利用DNS的重定向技术,DNS服务器会返回一个跟 用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,提供所需的内容。
-
dns-prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。 OSI参考模型与TCP/IP四层模型
3、TCP 连接
客户端和服务端建立TCP连接需要三次握手。过程如下:
-
客户端发送一个带 SYN=1,Seq=X 的数据包到服务器端口(第一次握手,由浏览器发起,告诉服务器我要发送请求了)
-
服务器发回一个带 SYN=1, ACK=X+1, Seq=Y 的响应包以示传达确认信息(第二次握手,由服务器发起,告诉浏览器我准备接受了,你赶紧发送吧)
-
客户端再回传一个带 ACK=Y+1, Seq=Z 的数据包,代表“握手结束”(第三次握手,由浏览器发送,告诉服务器,我马上就发了,准备接受吧) 说明: **ACK:确认标识,**用于表示对数据包的成功接收。 **SYN:同步标识,**表示TCP连接已初始化。 三次握手的目的:为了防止已经失效的连接请求报文段突然又传送到了服务器端,从而产生错误。 4、发送HTTP请求 ( * 网络优化 ) 请求报文由请求行、请求头和请求体三部分组成。 1)请求行包含请求方法、url和协议版本。 2)请求头包含请求的附加信息,由键值对组成。如Host:github.com、User-Agent:""、Connection:keep-alive以及Cookie。 3)请求体主要是请求参数(Query String Parameters)。 注意:在发送HTTP请求的过程中,要先考虑浏览器缓存情况。缓存又分为强制缓存和协商缓存。 5、服务器处理请求并返回 HTTP 报文 每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。