[转载]读淘宝HTML有感

[转载]【原】读淘宝HTML有感 – FMP-FMP – 博客园.

今天公司的前端让我帮看一下淘宝的样式表是怎么读取的,我看了一下,第一眼感觉有点奇怪:

整个首页仅有一个link标记和一个script标记

<link rel="stylesheet" href="http://a.tbcdn.cn/p/fp/2012/fp/??layout.css,dpl/dpl.css,sitenav/sitenav.css,logo/logo.css,search/search.css,<br>nav/nav.css,product-list/product-list.css,mainpromo/mainpromo.css,attraction/attraction.css,notice/notice.css,status/status.css,interlayer/interlayer.css,<br>cat/cat.css,convenience/convenience.css,act/act.css,expressway/expressway.css,guang/guang.css,hotsale/hotsale.css,helper/helper.css,footer/footer.css,<br>recom_new/recom_new.css,local/local.css,globalshop/globalshop.css,guide/guide.css?t=2012080220120724.css" />
<script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,<br>p/fp/2012/fp/directpromo.js?t=2012080620120724.js" data-fp-timestamp="20120806"></script>

简单的思考之后,基本上想到是怎么处理的了。

其实like标记的href属性、script标记的src属性其实都是链接到一个服务器端页面,将css,js文件名已参数的形式传进去,然后根据参数去读取这些文件,再把读取结果写会客户端。当然,肯定会利用到缓存。

除此之外,我用浏览器调试工具看了一下请求和响应结果,其中包含一项:

Status Code:304 Not Modified   什么意思? 看这里:http://bulaoge.net/topic.blg?dmn=webdev&tid=301677

 

淘宝就是淘宝,细节方面考虑的很周全,那么这么做有哪些好处呢 或者说咱学到了什么呢?

1.为什么一个页面会加载这么多个样式表? 我猜:都是按模块化写的,为了适应页面模块经常增删、调整。

2.为什么要把这些样式表写在一起?我猜:是为了减少请求次数,n个样式表只需请求和相应一次。

3.在加上读取文件缓存、CDN缓存、浏览器缓存。页面相应速度会加快很多。

4.样式和js有修改咋办?大家会看到链接后买年会有一个参数:t=2012080220120724.css  t=2012080620120724.js  ,我想是用来清理缓存用的。

 

淘宝就是淘宝,细致入微。记录下来希望以后开发中可以派上用场。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏