详情参考:
例子:
一: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,提取出链接地址提前下载,注意这里仅是先 下载内容,并不会开始解析和执行
这一行为还可以通过在页面中加入以下标签来提示浏览器
但这种写法目前并没有成为正式的标准,也只有Mozilla真正实现了该功能,可以看看
WebKit也在尝试该功能,具体实现是在的process成员函数中,它会调用ResourceHandle::prepareForURL()函数,目前从实现看它是仅仅用做DNS预解析的,和Mozilla对这个属性的处理不一致
对于不在当前页面中的链接,如果需要预下载后续内容可以用js来实现,请参考这篇文章
预下载后续内容还能做很多细致的优化,如在中,来自腾讯的黄希彤介绍了腾讯产品中使用的交叉预下载方案,利用空闲时间段的流量来预加载,这样即提升了用户访问后续页面的速度,又不会影响到高峰期的流量,值得借鉴
三:http:
编码识别:
页面的编码可以在http header或meta标签中指明,对于没有指明编码的页面,浏览器会根据是否设置了auto detect来进行编码识别(如在chrome中的View-Encoding菜单)
关于编码识别,Mozilla开源了其中的模块,感兴趣的可以对其进行学习
建议在http
header中指定编码,如果是在meta中指定,浏览器在得到html页面后会首先读取一部分内容,进行简单的meta标签解析来获得页面编码,如WebKit代码中的,可以看出它的实现是查找charset属性的值,除了WebKit以外的其它浏览器也是类似的做法,这就是为何HTML5中直接使用如下的写法浏览器都支持需要注意不设定编码会导致不可预测的问题,应尽可能做到明确指定
如淘宝页面:
加载
对于html的script标签,如果是外链的情况,如:
浏览器对它的处理主要有2部分:下载和执行
下载在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的
执行在所有浏览器中默认都是阻塞的,当js在执行时不会进行html解析等其它操作,所以页面顶部的js不宜过大,因为那样将导致页面长时间空白,对于这些外链js,有2个属性可以减少它们对页面加载的影响,分别是:
- async
- 标识js是否异步执行,当有这个属性时则不阻塞当前页面的加载,并在js下载完后立刻执行
- 不能保证多个script标签的执行顺序
- defer
- 标示js是否延迟执行,当有这个属性时js的执行会推迟到页面解析完成之后
- 可以保证多个script标签的执行顺序
下图来自,清晰地解释了普通情况和这2种情况下的区别
需要注意的是这两个属性目前对于内嵌的js是无效的
而对于dom中创建的script标签在浏览器中则是异步的,如下所示:
var script = document.createElement('script');script.src = 'a.js';document.getElementsByTagName('head')[0].appendChild(script);
为了解决js阻塞页面的问题,可以利用浏览器不认识的属性来先下载js后再执行,如就是这样做的,它能提高页面的相应速度,不过需要注意处理在js未加载完时的显示效果