详情参考：浏览器的加载与页面性能优化

例子：

一：DNS：在header中添加 <link rel="dns-prefetch" href="//HOSTNAME.com"> 帮助浏览器更好地进行DNS的预解析。

淘宝首页： 预先对页面中用到的所有域名进行dns与解析设置。

二：link prefetch：

由于Web页面加载是同步模型，这意味着浏览器在执行js操作时需要将后续html的加载和解析暂停，因为js中有可能会调用 document.write来改变dom节点，很多浏览器除了html之外还会将css的加载暂停，因为js可能会获取dom节点的样式信息，这个暂停 会导致页面展现速度变慢，为了应对这个问题，Mozilla等浏览器会在执行js的同时简单解析后面的html，提取出链接地址提前下载，注意这里仅是先 下载内容，并不会开始解析和执行

这一行为还可以通过在页面中加入以下标签来提示浏览器

<link rel="prefetch" href="http://">

但这种写法目前并没有成为正式的标准，也只有Mozilla真正实现了该功能，可以看看Link prefetching FAQ

WebKit也在尝试该功能，具体实现是在HTMLLinkElement的process成员函数中，它会调用ResourceHandle::prepareForURL()函数，目前从实现看它是仅仅用做DNS预解析的，和Mozilla对这个属性的处理不一致

对于不在当前页面中的链接，如果需要预下载后续内容可以用js来实现，请参考这篇文章Preload CSS/JavaScript without execution

预下载后续内容还能做很多细致的优化，如在Velocity China
2010中，来自腾讯的黄希彤介绍了腾讯产品中使用的交叉预下载方案，利用空闲时间段的流量来预加载，这样即提升了用户访问后续页面的速度，又不会影响到高峰期的流量，值得借鉴

三：http：

编码识别：

页面的编码可以在http header或meta标签中指明，对于没有指明编码的页面，浏览器会根据是否设置了auto detect来进行编码识别（如在chrome中的View-Encoding菜单）

关于编码识别，Mozilla开源了其中的Mozilla Charset Detectors模块，感兴趣的可以对其进行学习

建议在http
header中指定编码，如果是在meta中指定，浏览器在得到html页面后会首先读取一部分内容，进行简单的meta标签解析来获得页面编码，如WebKit代码中的HTMLMetaCharsetParser.cpp，可以看出它的实现是查找charset属性的值，除了WebKit以外的其它浏览器也是类似的做法，这就是为何HTML5中直接使用如下的写法浏览器都支持

<meta charset="utf-8">

需要注意不设定编码会导致不可预测的问题，应尽可能做到明确指定

如淘宝页面：

加载

对于html的script标签，如果是外链的情况，如：

<script src="a.js"></script>

浏览器对它的处理主要有2部分：下载和执行

下载在有些浏览器中是并行的，有些浏览器中是串行的，如IE8、Firefox3、Chrome2都是串行下载的

执行在所有浏览器中默认都是阻塞的，当js在执行时不会进行html解析等其它操作，所以页面顶部的js不宜过大，因为那样将导致页面长时间空白，对于这些外链js，有2个属性可以减少它们对页面加载的影响，分别是：

• async
  • 标识js是否异步执行，当有这个属性时则不阻塞当前页面的加载，并在js下载完后立刻执行
  • 不能保证多个script标签的执行顺序
• defer
  • 标示js是否延迟执行，当有这个属性时js的执行会推迟到页面解析完成之后
  • 可以保证多个script标签的执行顺序

下图来自Asynchronous and deferred JavaScript execution explained，清晰地解释了普通情况和这2种情况下的区别

需要注意的是这两个属性目前对于内嵌的js是无效的

而对于dom中创建的script标签在浏览器中则是异步的，如下所示：

var script = document.createElement('script');
script.src = 'a.js';
document.getElementsByTagName('head')[0].appendChild(script);

为了解决js阻塞页面的问题，可以利用浏览器不认识的属性来先下载js后再执行，如ControlJS就是这样做的，它能提高页面的相应速度，不过需要注意处理在js未加载完时的显示效果