从url输入到界面显示过程中那些优化点

[jiangtao]

写在前面

上周参加了珠峰架构成长计划，探讨和学习了前端可以优化的点。本篇幅记录前端优化，如有不对，欢迎指正。本篇幅所有观点经本人整理，参考链接会注明出处，如有侵权，请联系删除。若篇幅太长，考虑分成系列文章。本篇幅更新周期较长，敬请期待。

TLDR;每每说到优化要优化什么？前端要优化什么？后端要优化什么？真的有必要什么都优化吗？

先说前端优化什么？

• 从url输入到页面第一屏显示
• 动画
• 用户行为交互响应（包含滚动，传感器，窗口变化等等）

本章节谈谈首屏优化

首先分下从输入URL到页面显示发生了什么，这样更方便优化每个链路的时间，来缩短总体时间。

• URL是什么
• DNS查询
• HTTP连接
• HTTP报文
• 浏览器渲染
• Web资源
• 缓存

URL

为什么要提URL，URL在Web开发中和我们息息相关。什么是URL？

统一资源定位符（或称统一资源定位器/定位地址、URL地址等[1]，英语：Uniform Resource Locator，常缩写为URL）

统一资源定位符的标准格式如下：

协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

统一资源定位符的完整格式如下：

协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

其中【访问凭证信息@；:端口号；?查询；#片段ID】都属于选填项。

web系统中常见url列举：

• 域名网址：https://www.google.com.hk/search?safe=strict&source=hp&ei=8t0UWs_VOKHY0gLah4KoDw&btnG=Google+%E6%90%9C%E7%B4%A2&q=URL#url
• ip网址: http://119.75.213.51:80/s?ie=utf-8&f=8&r&wd=url
• 电话链接：tel:10086
• 短信链接: sms:10086?body=cxye
• 邮件链接: mailto:[email protected][email protected]&[email protected]&subject=test%20mailto&body=hello
• mongo连接: mongodb://admin:123456@localhost/test
• ftp连接: ftp://guest:[email protected]

了解URL的好处

1. 解析url query

url中的query可以传递数据，因此要parse url得到query，于是有了 qs

2. url query编码更安全

url的query传递数据，需要对query数据进行编码，曾经有网站因为传入特殊字符直接被干跨

3. 同源策略

web系统存在的同源策略，主要也是根据url的不同组成区分

4. 优化交互体验

片段可以帮助我们更好定位页面区域，提高交互

5. dns解析

域名需要DNS解析，DNS解析的快慢会影响页面的访问速度

DNS

维基百科详细介绍了是什么。这里重点分析下域名解析的过程，来帮我提高优化性能。

DNS查询

1. 解析domain name

浏览器输入url, 如 https://www.baidu.com/s?ie=utf-8&f=8&r&wd=dns, 浏览器将url解析出域名（domain name） www.baidu.com

2. 查找浏览器keep-alive记录

浏览器会查找sockets连接池是否有idl的www.baidu.com的 keep-alive记录。通过 chrome://net-internals/#sockets访问，如果有的话，解析完毕

3. 查找浏览器dns缓存

查找浏览器缓存 chrome://net-internals/#dns，如果缓存没过期，直接从缓存获取，解析完毕

4. 查找hosts映射

查找本机hosts有没有ip和域名映射，如果有，返回ip， 域名解析完毕

5. 查找本地dns缓存

查找本机DNS解析器缓存，如果有，返回ip，域名解析完毕

以上5步用图表示：

6. 路由器缓存和ISP缓存

网络会先通过路由器，再查找ISP（运营商）DNS缓存，之后，走向本地服务器。这个过程会遇到万恶运营商恶意劫持，污染缓存的现象。

7. 本地dns未设置转发

如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13个ip地址，�机器不见得是13台，可能更多。根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址https://www.baidu.com给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找baidu.com域服务器，重复上面的动作，进行查询，直至找到www.bai.com主机；若有cname地址接着往下找。可以通过dig +trace www.baidu.com查看此过程， 结果如下

# . DNS服务器， 返回ip

; <<>> DiG 9.8.3-P1 <<>> +trace www.baidu.com
;; global options: +cmd
.			58093	IN	NS	k.root-servers.net.
.			58093	IN	NS	e.root-servers.net.
.			58093	IN	NS	c.root-servers.net.
.			58093	IN	NS	h.root-servers.net.
.			58093	IN	NS	i.root-servers.net.
.			58093	IN	NS	m.root-servers.net.
.			58093	IN	NS	f.root-servers.net.
.			58093	IN	NS	a.root-servers.net.
.			58093	IN	NS	l.root-servers.net.
.			58093	IN	NS	b.root-servers.net.
.			58093	IN	NS	d.root-servers.net.
.			58093	IN	NS	g.root-servers.net.
.			58093	IN	NS	j.root-servers.net.
;; Received 504 bytes from 192.168.67.1#53(192.168.67.1) in 115 ms

# com. DNS服务器， 返回ip

com.			172800	IN	NS	e.gtld-servers.net.
com.			172800	IN	NS	b.gtld-servers.net.
com.			172800	IN	NS	j.gtld-servers.net.
com.			172800	IN	NS	m.gtld-servers.net.
com.			172800	IN	NS	i.gtld-servers.net.
com.			172800	IN	NS	f.gtld-servers.net.
com.			172800	IN	NS	a.gtld-servers.net.
com.			172800	IN	NS	g.gtld-servers.net.
com.			172800	IN	NS	h.gtld-servers.net.
com.			172800	IN	NS	l.gtld-servers.net.
com.			172800	IN	NS	k.gtld-servers.net.
com.			172800	IN	NS	c.gtld-servers.net.
com.			172800	IN	NS	d.gtld-servers.net.
;; Received 507 bytes from 198.41.0.4#53(198.41.0.4) in 359 ms

# baidu.com. DNS服务器， 返回ip

baidu.com.		172800	IN	NS	dns.baidu.com.
baidu.com.		172800	IN	NS	ns2.baidu.com.
baidu.com.		172800	IN	NS	ns3.baidu.com.
baidu.com.		172800	IN	NS	ns4.baidu.com.
baidu.com.		172800	IN	NS	ns7.baidu.com.
;; Received 201 bytes from 192.26.92.30#53(192.26.92.30) in 453 ms

# 发现cname a.shifen.com. DNS服务器， 返回ip

www.baidu.com.		1200	IN	CNAME	www.a.shifen.com.
a.shifen.com.		1200	IN	NS	ns1.a.shifen.com.
a.shifen.com.		1200	IN	NS	ns5.a.shifen.com.
a.shifen.com.		1200	IN	NS	ns3.a.shifen.com.
a.shifen.com.		1200	IN	NS	ns2.a.shifen.com.
a.shifen.com.		1200	IN	NS	ns4.a.shifen.com.
;; Received 228 bytes from 202.108.22.220#53(202.108.22.220) in 5 ms

8. 本地dns服务器转发模式

如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。当前阶段查到ip，会告知上一阶段，并存入其dns缓存。

不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

DNS优化

从上面分析可以看出：

1. 使用keep-alive减少dns查找

2. 让域名缓存起来会大大的减少查询时间

3. 浏览器dns缓存有数量限制，超过数量，先进先出, 减少域名，减少dns查找

4. 选择较长的TTL（time to live）值以减少DNS的查找并降低其名称服务器的负载

Android 和 iOS可以通过设置缓存时间， 来控制DNS缓存时间。

DNS prefetch

1. X-DNS-Prefetch-Control

X-DNS-Prefetch-Control控制支持DNS预解析的浏览器，提前解析资源中的域名等，所以点击的时候可以提高加快. 可以用两种方式设置：

• response header形式： X-DNS-Prefetch-Control: on
• html meta形式：<meta http-equiv="x-dns-prefetch-control" content="on">

2. DNS prefetch

当然在其他端（Android， iOS）也可以提前解析，这里不做累赘。

web可以通过dns prefetch 提前解析指定域名,提前缓存dns，来加快dns解析，从而提高优化。taobao.com

写了一个demo，webpagetest下面对比地址:

• 使用dns prefetch
• 不使用dns prefetch

从对比效果结果来看，总体时间差不多。使用dns prefetch在域名解析时时间增长，但每个图片请求的时间缩短。当对应域下的图片过多时候，缩短的时间加起来可以累积大于dns延长的时间。因此，dns-prefetch使用的时候应注意场景，不可滥用。

有webpack插件可以处理 prefetch等Resource Hits优化策略。

DNS劫持和其他问题

阿里云这篇文章很详细的介绍了DNS的一些问题，和解决方案。

TCP连接

发送HTTP请求

HTTP报文

浏览器渲染

Web资源

web里面充斥着大量的资源，通过上面的分析了解，优化资源的原则：

• 减少http请求之合并资源
• 减少资源体积
• 使用更高性能的资源代替
• 使用缓存加快资源加载

图片优化

• 图片合并
• 使用svg
• webp接入 Vue移动项目webp接入 #10

Web缓存

其他优化

• 节流
• web worker

总结

性能一直是web系统中的重要的话题，本篇文章介绍了一些影响性能的原因和优化手段。希望对您有所帮助。
一个优秀的web系统，安全，性能，用户交互体验等必不可少的。因此也衍生出了性能检测工具，性能监控平台，安全监测工具, 以及各种优化工具。总之，路很长，坚持走， 未完待续。

参考资料

• dns原理入门
• dns解析过程
• 移动互联网时代，如何优化你的网络 —— 域名解析篇
• 修改hosts不生效，是DNS缓存
• DNS Prefetching的两三事

推荐阅读

• 小胡子哥的性能专栏