从浏览器输入url的过程来讨论前端性能优化

上一篇文章梳理了浏览器输入url的一系列流程，那么在这些流程中，作为一个前端，又能有哪些优化方案呢？接下来就好好梳理一下，该怎么做。

---

1 DNS解析-优化方案

DNS预解析

在页面的html标签中添加dns-prefetch告诉浏览器对指定域名预解析

1.dns-prefetch 应该尽量放在网页的前面
<link rel="dns-prefetch" href="//demo.com">

2.可以通过用meta信息来告知浏览器
<meta http-equiv="x-dns-prefetch-control" content="on">

浏览器就会在用户访问链接之前解析域名，当用户访问时，dns就不会再延迟
注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

减少DNS查询次数

需要减少来自不同domain的请求数量，如尽量将外部域的对象下载到本地服务器上。

2 发起TCP连接-优化方案

尽量减小HTTP报文和头的大小

cookie往往是造成HTTP头偏大的主要因素，所以要限制cookie大小

预先连接

TCP连接需要三次握手操作，才表示连接成功，资源太多就很费时间，我们可以在请求资源之前，预先连接

<link rel="preconnect" href="//demo.com">

3 发起HTTP请求-优化方案

开启HTTP2

http2 的头部压缩,能够节省消息头占用的网络的流量。多路复用，请求和响应可以在一个tcp通道里双向通信

善用HTTP缓存

强缓存：Cache-Control（优先），Exipres。浏览器直接读本地缓存，不会再跟服务器端交互，状态码 200。

协商缓存：Last-Modified / If-Modified-Since， Etag /If-None-Match（优先），每次请求会让服务器判断一下资源是否更新过，从而决定浏览器是否使用缓存，使用缓存返回 304，否则重新完整响应。