你使用这些鲜为人知的网站网页页面性能优化最新技术吗?pre-fetch/pre-render/dns-pre-fetch

Steve Soulders负责Google公司的Web性能和开源组织。他是Firebug性能分析扩展工具——YSlow的创造者,也是O’ReillyWeb 性能与运作会议Velocity的联合主席。他曾经在Yahoo!担任Chief Performance。Steve在另一个讲座中,提到了部分新兴浏览器技术,这些新兴技术的作用在于页面被用户请求之前的预获取。Soulders解 释道,这个想法就是,浏览器应该能够在用户请求页面之前便预见到其可能想看的下一页。“你不知道用户的下一步会是什么,但是你能从他/她在刚刚请求的页面 上的意图找到更多的线索”,Soulders说。然后他解释了开发利用这一知识的几种技术。

开发人员可以向一个页面的超链接添加HTML dns-pre-fetch, pre-fetch和pre-render标签。一旦一个页面被加载,此类标签可以在用户请求之前,命令浏览器去获取在这个原始页面中被链接的页面的部分 内容。dns-pre-fetch标记告诉浏览器查找Web页面链接所指向的页面的域名,pre-fetch标签告诉浏览器抓取整个页面,pre- render告诉浏览器构建整个页面,就好像浏览器正在一个隐藏的选项卡上显示这个页面。当被部署时,所有这三个种标签可以缩短请求Web页面和显示那个 页面的时间间隔。

Soulders警告开发者要明智地使用这些标签,因为它们会增加带宽和处理器的使用率。但在许多情况下,例如在一个登陆或者显示搜索结果的页面 上,有相当高的可能性,用户将点击其于页面上发现并已经被交付的链接之一。不同的浏览器对于这些标签的支持各不相同,但大多数浏览器制造商似乎在向其即将 到来的新版本添加对它们的支持。

浏览器本身也有一些加快网页交付速度的方法,如DNS预解析和TCP预连接。利用DNS预解析,通过观察用户在导航栏中开始键入的字母是什么,或者 甚至通过例行获取用户最常访问的Web网站的IP地址等操作,浏览器可以预见到下一个将被访问的站点的域名。TCP预连接通过类似的手段预见用户的下一步 行动。Soulders说,它通过打开端口并针对一个最终请求设置所有协议,来“预热”与站点的连接。

提起网站优化,许多前端开发者会立刻想到Yahoo的网站优化准则,随着研究和技术的不断发展,规则也从最初的14条增长到了如今的34条,但是最核心的一些基本原则依然被网站开发者作为圣谕,包括:

  • 减少HTTP请求
  • 使用CDN技术
  • 设置HTTP文件头过期和缓存控制字段
  • 启用Gzip压缩
  • 尽量把样式表放在页面顶部
  • 尽量把Javascript代码放在页面底部
  • 避免CSS表达式
  • 将Javascript和CSS外链
  • 减少DNS查找
  • 避免重定向
  • 删除重复脚本
  • 配置Etags
  • 缓存Ajax
  • ……
Top Down