Web浏览器性能测试及其调优

浏览器的URL及其渲染

访问URL要进行DNS域名解释

访问域名目的真正的是去访问IP：通过设置hosts文件可以强制指定域名对应的IP

浏览器的工作过程就是一个浏览器如何找到一个网站的简易工作原理。

用户在浏览器的地址栏中敲入了网站的网址 ( 比如: alibaba.com ) ,这时浏览器会首先通过访问的域名来定位到IP (DNS) 从而找到去哪里获取资源。

DNS查询原理图

对网站第一次的域名访问，DNS查询策略：

• Browser cache 浏览器缓存。浏览器首先会在自己的缓存中查找有没有对应的 域名-IP 匹配
• OS cache 操作系统缓存。 浏览器缓存中没有找到，一个系统进程就会调取系统中的DNS缓存进行查询
• Router cache 路由器缓存。前两者都没找到，然后就到路由器缓存中查找。
• ISP（网络提供商） DNS cache。上面的缓存都没找到，去ISP (网络提供商) 的DNS缓存服务器中寻找了, 一般情况下, 在ISP端的缓存中都能找到相应的缓存记录。
• Recursive search 递归查找。前面都没有办法命中的DNS缓存的情况下, ISP的DNS服务器开始从root域名服务器开始进行递归, 顺序是从.com顶级域名服务器到alibaba的域名服务器, 再没找到的话就是该网站不存在。

启用全新域名来做静态资源存储服务时, 基本上上述的1 – 5个步骤都得走上几遍. 才能让新域名在各DNS缓存服务器上留下记录.

DNS相关的优化:

DNS解析的复杂性决定了不当的使用多域名获取资源会造成不必要的性能开销.

通常我们在DNS和HTTP这两方面优化。

DNS的优化：尽可能少的造成DNS查询开销,尽可能少的域名解析。可以直接用IP。

HTTP的优化：避免单域名下连接数的缺陷来进行资源多通道下载，适当的使用多域名服务 

某些现代浏览器 ( 如：Google Chrome, Firefox 3.5+ )支持DNS的预取：就是在浏览器加载网页时, 对网页中的<link>或者<a>的href属性中的域名进行后台的预解析(上文中的 1- 5步), 并且将解析结果缓存在浏览器端, 当用户在真正点击链接时, 省去在当下的DNS解析消耗, 把这个消耗过程转嫁到用户无法感知的浏览过程中去.

方法：

第一, 现代浏览器已经支持且默认打开了DNS Prefetch的功能。

当然也可以通过浏览器的配置来管理该功能:

    用Firefox3.5+可以这样: 浏览器默认就打开了HTTP协议下的DNS预取功能, 默认关闭HTTPS协议下的DNS预取功能, 可通过 about:config 的 network.dns.disablePrefetch 和network.dns.disablePrefetchFromHTTPS <两个选项来控制两种协议下的预取功能.

Chrome管理DNS Prefetch方法暂时缺少.

第二, 可以通过用meta信息来告知浏览器, 我这页面要做DNS预取:

<meta http-equiv="x-dns-prefetch-control" content="on" />

第三,可以使用link标签来强制对DNS做预取:

<link rel="dns-prefetch" href="http://www.alibaba.com/" />