本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找、避免重定向.完整教程可查看:Web前端性能优化

    一、减少DNS查找

    基础知识

    DNS(Domain Name System): 负责将域名URL转化为服务器主机IP.

    DNS查找流程:首先查看浏览器缓存是否存在,不存在则访问本机DNS缓存,再不存在则访问本地DNS服务器.所以DNS也是开销,通常浏览器查找一个给定URL的IP地址要花费20-120ms,在DNS查找完成前,浏览器不能从host那里下载任何东西.

    TTL(Time To Live):表示查找返回的DNS记录包含的一个存活时间,过期则这个DNS记录将被抛弃.

    影响DNS缓存的因素

    1. 服务器可以设置TTL值表示DNS记录的存活时间.本机DNS缓存将根据这个TTL值判断DNS记录什么时候被抛弃,这个TTL值一般都不会设置很大,主要是考虑到快速故障转移的问题.

    2. 浏览器DNS缓存也有自己的过期时间,这个时间是独立于本机DNS缓存的,相对也比较短,例如chrome只有1分钟左右.

    3. 浏览器DNS记录的数量也有限制,如果短时间内访问了大量不同域名的网站,则较早的DNS记录将被抛弃,必须重新查找.不过即使浏览器丢弃了DNS记录,操作系统的DNS缓存也有很大机率保留着该记录,这样可以避免通过网络查询而带来的延迟.

    最佳实践

    当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等.所以减少唯一主机名的数量就可以减少DNS查找的数量.

    然而减少唯一主机名的数量会潜在地减少页面中并行下载的数量,避免DNS查找降低了响应时间,但减少并行下载可能会增加响应时间.当页面的组件量比较多的时候,可以考虑将组件分别放到至少2-4个主机名,已获得最大收益.

    延伸阅读: CloudXNS免费DNS服务:线路细分 宕机监控等 减少域名DNS解析时间将网页加载速度提升新层次 盘点十大免费DNS域名解析服务:稳定、可靠 国内免费DNS服务使用评测:360DNS、ZnDNS等

    二、避免重定向

    什么是重定向?

    重定向用于将用户从一个URL重新路由到另一个URL.

    常用重定向的类型

    301:永久重定向,主要用于当网站的域名发生变更之后,告诉搜索引擎域名已经变更了,应该把旧域名的的数据和链接数转移到新域名下,从而不会让网站的排名因域名变更而受到影响.

    302:临时重定向,主要实现post请求后告知浏览器转移到新的URL.

    304:Not Modified,主要用于当浏览器在其缓存中保留了组件的一个副本,同时组件已经过期了,这是浏览器就会生成一个条件GET请求,如果服务器的组件并没有修改过,则会返回304状态码,同时不携带主体,告知浏览器可以重用这个副本,减少响应大小.

    重定向如何损伤性能?

    当页面发生了重定向,就会延迟整个HTML文档的传输.在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载.

    来看一个实际例子:对于 webform开发来说,对于新手很容易犯一个错误,就是把页面的连接写成服务器控件后台代码里,例如用一个Button控件,在它的后台click事件中写上:("");然而这个Button的作用只是转移URL,这是非常低效的做法,因为点击Button后,先发送一个Post请求给服务器,服务器处理("")后就发送一个302响应给浏览器,浏览器再根据响应的URL发送GET请求.正确的做法应该是在html页面直接使用a标签做链接,这样就避免了多余的post和重定向.

    重定向的应用场景

    1. 跟踪内部流量

    当拥有一个门户主页的时候,同时想对用户离开主页后的流量进行跟踪,这时可以使用重定向.以为例,主页新闻的链接主机名是,后面跟着识别的参数,点击后再产生一个301重定向,这样就记录了离开门户主页后的流量去向.

    我们知道重定向是如何损伤性能的,为了实现更好的效率,可以使用Referer日志来跟踪内部流量去向.每个HTTP请求都有一个Referer表示原始请求页(除了从书签打开或直接键入URL等操作),记录下每个请求的Referer,就避免了向用户发送重定向,从而改善了响应时间.

    2. 跟踪出站流量

    有时链接可能将用户带离你的网站,在这种情况下,使用Referer就不太现实了.

    同样也可以使用重定向来解决跟踪出站流量问题.以百度搜索为例,百度通过将每个链接包装到一个302重定向来解决跟踪的问题,例如搜索关键字"跟踪出站流量",搜索结果的第一个URL为后面跟着一连串字符,即使搜索结果并没有变,但这个字符串是动态改变的,我认为这里的搜索连接URL好像没有改变的需要,不知道这里起到怎样的作用?

    除了重定向外,我们还可以选择使用信标(beacon)--一个HTTP请求,其URL中包含有跟踪信息.跟踪信息可以从信标Web服务器的访问日记中提取出来,信标通常是一个1px*1px的透明图片,不过204响应更优秀,因为它更小,从来不被缓存,而且绝不会改变浏览器的状态.