Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

Html页面的性能优化以及缓存处理

<< Back

Html页面的性能优化

Html页面的性能优化的方法

1. 减少HTTP请求数。

打开网页,浏览器会发出很多请求,图片,脚本,每个对象的加载都需要花时间, 需要减负载。

  • 合并CSS,Js文件 ,减少Http的请求数
  • 合并框架图片以及相当变动较少的图片,合成一张。有时直接用Css完成。(css sprite)
  • 合理的使用本地的Cached来缓存 js/css/image

2. 减少被请求文件的大小,较少请求数据占用的网络带宽。

打开网页,浏览器会发出很多请求,图片,脚本,每个对象的加载都需要花时间, 需要减负载。

  • 压缩Js体积, 删除没有空行,注释,变量名。 大型的Js很乱,没有空行或换行,其实也是优化的表现。
  • 压缩CSS体积。
  • 用XHtml + Css 方式搭建网站结构,提高CSS的重用性。
  • 用服务端GZip压缩JS/Css 文件, 缩小传输文件大小(16.7.2)。

3. 通过版本化控制客户端的缓存。

打开网页,浏览器会发出很多请求,图片,脚本,每个对象的加载都需要花时间, 需要减负载。

  • 通常JS/CSS这类文件改动比较频繁,为加载加快,可能要设置这类文件的过期时间,为几天后从而实现缓存, 那我们的问题就是如何及时的更改这些被缓存的文件了。
  • 通过修改JS版本来及时告诉浏览器, 如: 该JS文件名,路径, URL Rewrite, 大版本不变,小版本不断追加,等一定时间后统一更新。

4. 帮页面减肥 。简洁风格,少用Flash等。

5. 删除页眉可有可无的内容。 如空格,注释。

6. 删除页面代码中的空语句。

7. 删除HTMl中的默认值,什么颜色,对齐之类的。

8. 优化CSS文件。

9. Visibility比Display渲染的快。

--如果是保持决定位置,用visibility: hindden 好。

10. 缓存区是区分大小写的,保持url大小写一致性。

11. 让html标记有始有终(结束标签),减少浏览器的判断时间。

12. 不用将全部内容塞入一个Table中。 因为Talbe要等内容加载完毕才显示出来。 如果某些内容有错,将拖延页面的访问速度。

13. 把Javascript移到HTML文件末尾,JS会阻塞后面的页面的显示。

14. 友情链接的学问, 尽量用文字。

15. 优化图片。 Gif图片比较少,一般做Logo,按钮,表情。 PNG,做透明背景比较多。

16. 网址后面加入一个反斜杠. www.maticsoft.com/220/ ,让服务器立即知道访问的是个文件夹。

17. 指定图片的大小,让浏览器一目了然。

18. 图片采用BASE64编码,减少数据请求。

Html页面缓存处理

如果需要在html页面上设置不缓存,这在head标签中加入如下语句

	<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
	

还有一些经常会被忽略的需要注意的标签规范的地方

  • 每个<img>标签都必须带有Alt属性;
  • 每个<a>标签都必须带有Title属性;
  • 每个<a>标签如果有外部链接都必须带有rel = "nofollow" 属性;

发表于: 10 Dec 2013