web 前端优化

1 make few  http request----尽量减少http请求

2  use a content network(CDN)---- 把公用资源放到资源服务器上:CDN

3 Avoid  empty src or href--减少空连接

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。
 
4 Add an Expires or a Cache-Control Header--- 增加头部过期时间
浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

简单点说:就是缓存一下不常修改的文件,提升访问速度。
再简单点说:就是在.htaccess文件中写入以下内容:

 

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

 
5 使用gzip压缩内容----apatch 配置文件
<ifmodule mod_deflate.c>
  AddOutputFilter DEFLATE html xml php js css
</ifmodule>

<ifModule mod_gzip.c>

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

  mod_gzip_item_include handler ^cgi-script$

  mod_gzip_item_include mime ^text/.*

  mod_gzip_item_include mime ^application/x-javascript.*

  mod_gzip_item_exclude mime ^image/.*

  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>


6 css 和js 的位置

 css 放到顶部,js 如果是插件放到顶部,如果是依赖于页面的代码应该放到底部

7避免使用CSS表达式-

8CSSJS放到外部文件中

目的是缓存,但有时候为了减少请求,也会直接写到页面里,需根据PVIP的比例权衡。

9DNS查找次数

 多数浏览器有自己的缓存,与操作系统的缓存有所不同。只要浏览器在自己的缓存上面保留DNS记录,它不会向操作系统请求DNS记录

当客户端的DNS缓存为空时(浏览器与操作系统),DNS查询的次数等同于网页中各域名的个数。包括该网页URL、图片、脚本文件、样式表、FLASH对象等使用的域名。减少域名数量可以减少DNS查询次数
减少域名主机可减少DNS查询的次数,但可能造成并行下载数的减少。避免 DNS查询可减少响应时间,而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个,最多4个不同的主机名上
10 精简css和js

11避免跳转

再写入链接时,虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
12 删除重复的JSCSS
 
13 配置ETags
什么是“ETag”?
HTTP协议规格说明定义ETag为“被请求变量的实体值” (参见 http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html —— 章节 14.19)。 另一种说法是,ETag是一个可以与Web资源关联的记号(token)。典型的Web资源可以一个Web页,但也可能是JSONXML文档。服务器单独负责判断记号是什么及其含义,并在HTTP响应头中将其传送到客户端。
其过程如
户端请求一个页面(A)。
服务器返回页面A,并在给A加上一个ETag
客户端展现该页面,并将页面连同ETag一起缓存。
客户再次请求页面A,并将上次请求时服务器返回的ETag一起传递给服务器。
服务器检查该ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应304(未修改——Not Modified)和一个空的响应体
 
  再apatch 里的配置
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
 
14Make Ajax catchable
Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率-----可以充分利用html5的本地存储
15use Get for Ajax requests
 这里区分get 和post 的用处
get 提供数据有限传递参数不会显示在连接中,
post 提供比较大的数据 传递参数显示在连接中
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。
16Reduce the number of DOM Elements
复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。
17 避免404错误
站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源
18减少Cookie的大小
19使用无cookie的域
所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。
使用 cookie-free domains 有什么好处呢?当用户浏览器发送一个静态文件,如图片imageCSS样式表文件时会同时发送同一个域名(或二级域名)下的cookies,但是网站服务器对发送过来的cookies完全不予理会
因此这些没用的cookies白白浪费了网站带宽,影响网站加载速度和网页性能表现。YSlow建议为了解决这个问题,就可以通过使用 cookie-free domains 的方法来做优化,从而提高网页效率。
20不要使用滤镜
如果需要Alpha透明,不要使用AlphaImageLoader它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7+用户。
21要在HTML中缩放图片---尽量使用等尺寸的图片--量使用等值尺寸的图片,不要浪费空
22缩小favicon.ico并缓存----减少了请求次数

 

 

posted @ 2012-08-14 11:01  莲步子  阅读(276)  评论(0)    收藏  举报