网站性能:
网站性能主要考虑两个部分:一部分是后端优化,编译器选择、数据库索引和内存管理。实际上只有10%到20%是
从web服务器获取HTMl文档并且传送到浏览器中.另外一部分就是用户体验。即从服务器端发送到浏览器以后HTML
所引用的组件比如:图片,脚本,样式表,flash
减少最终用户体验的规则
规则1:减少HTTP请求
(1)、图片地图Image Map:图片地图允许一个图片关联多个URL。而不是一个图片一个URL。这样就减少了请求图片的次数
<map name="map1">
<area shape="" coords="" href="" title="">
<area shape="" coords="" href="" title="">
</map>
(2)、合并脚本和样式表
好多js,css将其放到外部的脚本和样式表文件里。还是内嵌入到HTML 文档中?一般来说通过模块化的方式
把js,css 放在 外部小文件里面更有利,因为在不同的页面可以重用。但是这样会提高http 请求的次数。
合并脚本,把多个分散的脚本合并成一个脚本。合并脚本很容易,但是合并脚本过程中组合的数量却是很
庞大的过程。这就要去权衡。
规则2:添加Expires 头
浏览器和代理通过缓存来减少HTTP请求的数量。并减少HTTP相应的大小。使web页面加载得更快。Expires
告诉浏览器它可以使用一个组件的当前副本,直到指定的时间为至。局限性:服务器端和客户端时钟必须同步
Cache-Control头克服Expires局限性。
Cache-Control:max-age=315000000 指定组件被缓存多久
规则3:压缩组件
压缩组件通过减小响应大小来缩短响应时间。
accpet-Encoding:gzip
如果Web 服务器看到请求中有这个头,就会使用客户端列出来的方法的一种来压缩响应。
除了压缩HTML文档,脚本,样式表,还可以压缩XML JSON 在内的任何响应文本。
压缩的成本有-服务器端花费额外的cup周期来完成压缩,客户端要对压缩文件解压缩。
规则4:将样式表放在顶部
我们将样式表放在head中能是页面加载更快。
问题:把样式表放在前端会延迟页面其它组件的加载。
逐步呈现:因为我们关心的是逐步加载呈现,也就是希望浏览器尽快的显示内容。浏览器逐步的加载页面
页头,导航条,logo,所有这些都会为用户提供视觉反馈。改善整体用户体验。如果将样式放在底部会阻止
内容逐步呈现。浏览器会延迟显示任何可视化组件。
规则5:将脚本放在底部
经过编程的脚步下载需要时间,脚本阻塞了并行下载,使用脚本时候,对于位于脚本以下的内容,逐步呈现被
阻塞,将脚本放在网页靠下的位置,意味着越多的内容逐步呈现。
并行下载概念:
对浏览器响应时间影响最大的是组件数量。当缓存为空时,每个组件都会产生一个HTTP 请求。
一般浏览器对同一域下的资源只能保持两个并发下载但可以将资源存放到多个域下,来保持更多的并行连接。
所以并行下载的优点是明显的,可以缩短相应时间。但是在下载脚本是并行下载是被禁止的。即使使用了
不同的主机名,浏览器也不会启动其他下载。其中一个原因是,脚本可能使用document.write 来修改页面
内容,因此浏览器会等待,以便页面能恰当地布局。还有一个原因是保证脚本能够按照正确的顺序执行,如果
并行下载多个脚本,就无法保证响应是按照特定顺序到达浏览器的。比如,后面执行的脚本比前面出现的
脚本更小,它可能会提早执行,如果他们存在数据依赖关系,不按顺序执行可能会导致javaScript错误。
最佳情况是把脚本放在页面底部,不会阻止页面内容的呈现,而且页面中的可视组件可以提早下载。
规则6:使用外部的JavaScript 和CSS
内联示列只有一个HTML文档,所有的css和JavaScript 都包含在这个文档里面,这样比把css和JavaScript
放在外部要快,因为它不需要承担多个HTTP请求带来的开销。但现实中使用外部文件产生较快的页面,是
因为css 和JavaScript 有机会被浏览器缓存起来,这样HTML文档大小减小了,而且HTTP 请求次数也没有改变。
使用外部的JavaScript 和CSS还有一个好处就是组件重用。如果在网站中使用了相同的javaScript 和 Css外部
文件可以提高这些组件的重用率。
规则7:避免使用重定向
重定向(redirect)用户从一个URL重新路由到另外一个URL
HTTP 1.1 301 Moved Permanently
Location:http://www.com/newuri
Content-Type:text/html
301 是重定向的状态码,浏览器会自动将用户带到Location字段所给的URL.重定向所必需的所有信息都出现在这个
头中。
HTML 文档头的meta的refresh标签可以在其content属性所指定的秒数之后重定向用户
<meta http-equiv="refresh" content="0";url="http://www.com/newuri">
js 中的document.location="http://www.com/newuri" 也可以执行重定向。
重定向延迟了页面的加载,因为在HTML文档到达之前,页面不会呈现任何东西。也没有任何组件被下载。