高标准设计的div css网站
根据相关网站统计分析,在采样美国的前10的网站中,只有一家超过5但少于20,其他80的时间是用来读取网页其他内容的,也就是说,前端(原文是front-end,意思就是不包括html代码的其余内容,可以
根据相关网站统计分析,在采样美国的前10的网站中,只有一家超过5但少于20,其他80的时间是用来读取网页其他内容的,也就是说,前端(原文是front-end,意思就是不包括html代码的其余内容,可以是图片,脚本,flash,视频,各种东西)。这就是为什么我们要把目光集中在这些东西来提高显示速度的关键原因。
为什么要从前端开始着手有三个主要原因:
1、这里有提升和改进的网站响应时间。如果能减少一半的体积,就能减少40的响应时间
2、改进前端比改进后端需要的时间和资源更少。(改进后端要重新设计应用程序规划,代码,寻找优化代码的方法,添加或改变硬件配置,分布式数据库,等等)
3、前端的改进在我们的工作中已经被证实,提高了他们的用户端响应时间达到25或更高。
我们的黄金规则是:首先优化前端表现,这些东西耗费了用户端响应时间中的80。
1、减少http请求
图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间。
CSS Sprites技术能减少图片的请求数,把零散的小图片放到一起,运用background-position来改变背景图片的位置,前提是html元素事先定义好宽高,其实就像一个遮罩,移动背景就会看到不同的景象。
内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中,这样会增大html代码的体积,改进的方式是把内嵌图片嵌入到css中(css被缓存),这样就会更好的减少http请求数而且不增大html的体积。
很多用户都是在空缓存的情况下进入你的网站的,这样第一次的速度就会显得很重要。
第一条规则是最重要的一条规则。
2、运用cdn网络加速技术
见: http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html
3、加一个长时间过期的头部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题,就是如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,在yahoo工作组用的是版本号,例如yahoo_2.0.6.js
4、Gzip数据压缩技术
Gzip是现在最流行和最有效的压缩方式,她是GNU开发的,RFC1952标准化。
(Gzip是在服务器端压缩图片,css,脚本等,传送到用户端的浏览器再解压,这样可以提高传输速度,不过对服务器的压力会增大,一般选择部分元素压缩比较合适。)
5、样式表放到顶部
我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它