YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Serve resources from a consistent URL

前端性能优化:Serve resources from a consistent URL

今天介绍 PageSpeed 的前端性能优化规则是:Serve resources from a consistent URL(由同一网址提供资源)。

consistent URL 简介

首先我们看看Consistent URL, 直接翻译 consistent URL 意思就是一致的URL地址。那什么是一致的URL地址?PageSpeed 文档为了我们举了一个例子:

// 同在example.com域名下
/images/example.gif
www.example.com/images/example.gif

虽然写法不同,但是在同一个域名下/images/example.gifwww.example.com/images/example.gif地址是一致。而接下来这么调用 example.gif 文件 URL 就不一致了:

// 域名 www.example.com	
/images/example.gif 
mysite.example.com/images/example.gif

尽管服务器上只有一个 example.gif 文件,而且两个URL地址其实指向也是同一个文件,但是上面的两个调用的URL地址就不一致。浏览器会发出两个不同的HTTP请求,将example.gif文件下载两遍。

Serve resources from a consistent URL 的作用

PageSpeed 是这么介绍由同一网址提供资源的:

It’s important to serve a resource from a unique URL, to eliminate duplicate download bytes and additional RTTs.

通过唯一的URL地址来访问(调用服务器上的)一个资源文件是非常重要的,这样可以消除对同一资源文件的重复下载,节省时间。

上面这句话的意思其实很明确了,一个文件我们就应该用唯一的URL地址(来调用它)。这里的一个文件 更具体点说,其实指的就是中会被反复调用的同一个资源文件。例如我们网站公用的 CSS 和 JS 文件,再例如会被很多页面重复调用的图片文件。

因为使用统一(唯一)URL调用同一个文件,文件在调用一次后,如果给文件设置了缓存,其他页面在次调用它时就浏览器就会读取本地缓存文件,而不会重复下载它。而实际上,即便我们没有在服务器端给这个资源文件设置缓存,在我们使用统一的URL地址调用资源文件时,大多数浏览器在一个会话时间(Session)内是不会为单个(唯一)URL地址发出多次HTTP请求的,实际上浏览器也是加载的已经下载的文件。这个时候浏览器对这个资源跟设置缓存后的处理机制是差不多的。PageSpeed 文档是这么描述的:

Also, most browsers will not issue more than one HTTP request for a single URL in one session, whether or not the resource is cacheable, so you also save additional round-trip times.

因此,我们在同一个页面中反复调用同一个图片,浏览器是不会重复下载这个文件多次的,例如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Serve resources from a consistent URL</title>
<meta name="keywords" content="Serve resources from a consistent URL,www.hubei.gov.cn" />
<meta name="description" content="Serve resources from a consistent URL,www.hubei.gov.cn" />
<link href="http://www.yaohaixiao.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script>
</body>
</html>

当然,我们不能因为浏览器的这个特性,而在同一个页面中反复调用同一个CSS或者JS文件,例如:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Remove duplicate JavaScript and CSS</title>
<meta name="keywords" content="Remove duplicate JavaScript and CSS,www.hubei.gov.cn" />
<meta name="description" content="Remove duplicate JavaScript and CSS,www.hubei.gov.cn" />
<link href="http://www.yaohaixiao.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://www.yaohaixiao.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://www.yaohaixiao.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script>	
<script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script>
</body>
</html>

这么反复调用CSS和JS带来的性能问题,我们在介绍 Remove duplicate JavaScript and CSS 规则时讨论过了。

Serve resources from a consistent URL

对于使用统一URL,PageSpeed 给我的优化建议是:

Serve shared resources from a consistent URL across all pages in a site.

其实很简单,原则就是不管在一个站点的不同页面之间调用同一个文件时,还是在不同站点间调用同一个资源的时候,我们都应该使用统一(唯一)的URL。例如,page_a.html和page_b.html在www.example.com域名下,page_c.html在photo.example.com域名下,page_a.html、page_b.html,page_c.html都要使用一些相同的文件,我们要这么处理:

// page_a.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Page A</title>
<meta name="keywords" content="Page A" />
<meta name="description" content="Page A" />
<link href="http://www.example.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<script type="text/javascript" src="http://photo.example.com/js/jquery.js"></script>
</body>
</html>

// page_b.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Page B</title>
<meta name="keywords" content="Page B" />
<meta name="description" content="Page B" />
<link href="http://www.example.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<script type="text/javascript" src="http://photo.example.com/js/jquery.js"></script>
</body>
</html>


// page_c.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Page C</title>
<meta name="keywords" content="Page C" />
<meta name="description" content="Page C" />
<link href="http://www.example.com/css/layout.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<img src="http://www.yaohaixiao.com/images/logo.gif" alt="YAOHAIXIAO.COM LOGO" width="300" height="80" />
<script type="text/javascript" src="http://photo.example.com/js/jquery.js"></script>
</body>
</html>

例子很简单,这3个页面都同时共用了 layout.cs、logo.gif 和 jquery.js 文件,我们使用一致的URL地址来调用。即便在www.example.com的/js/目录下有jquery.js文件,在photo.example.com的/css/目录下有layout.css文件,我还是应该统一使用一个域名下的唯一的URL地址来调用资源文件。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Serve resources from a consistent URL

« »

1 条评论

  • 集中權重的一致做法啦

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)