网页优化相关笔记一

Yahoo WEB优化14条法则

减小HTTP请求次数是性能优化的起点。这最提升首次访问的效率起到很重要的做用。

减小HTTP请求次数

Image maps组合多个图片到一张图片中。总文件大小变化不大，但减小了HTTP请求次数从而加快了页面显示速度。该方式只适合图片连续的状况；同时坐标的定义是烦人又容易出错的工做。

CSS Sprites是更好的方法。它能够组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。

Inline images使用data: URL scheme来在页面中内嵌图片。这将增大HTML文件的大小。组合inline images到你的（缓存）样式表是既能较少HTTP请求，又能避免加大HTML文件大小的方法。

优势： 　　①. 减小资源请求连接数。 　
缺点： 　　①. 不会被浏览器缓存起来； 　　②. 移动端性能比http URI scheme低。

　　　　　　　　　　　　　　　　　　　　　　　　　
　可经过在css文件的background-image样式规则使用Data URI Scheme，使其随css文件一同被浏览器缓存起来。

Combined files经过组合多个脚本文件到单一文件来减小HTTP请求次数。样式表也可采用相似方法处理。这个方法虽然简单，但没有获得大规模的使用。10大美国网站每页平均有7个脚本文件和2个样式表。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但若是作到的话，将能加快响应时间。

使用CDN(Content Delivery Network, 内容分发网络)

能够经过 CDN服务提供商增长Expires Header缓存相关

压缩页面元素

经过压缩HTTP响应内容可减小页面响应时间。从HTTP/1.1开始，web客户端在HTTP请求中经过Accept-Encoding头来代表支持的压缩类型

把样式表放在头上

咱们发现把样式表移到HEAD部分能够提升界面加载速度，所以这使得页面元素能够顺序显示。

把脚本文件放在底部

与样式文件同样，咱们须要注意脚本文件的位置。咱们需尽可能把它们放在页面的底部，这样一方面能顺序显示，另方面可达到最大的并行下载。
在某些状况下，不是很容易就能把脚本移到底部的。如，脚本使用document.write方法来插入页面内容。同时可能还存在域的问题。不过在不少状况下，仍是有一些方法的。
一个备选方法是使用延迟脚本（deferred script）。DEFER属性代表脚本未包含document.write，指示浏览器刻继续显示。不幸的是，Firefox不支持DEFER属性。在IE中，脚本可能被延迟执行，但不必定获得须要的长时间延迟。不过从另外角度来讲，若是脚本能被延迟执行，那它就能够被放在底部了。

避免CSS表达式

一种减小CSS表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式。若是必须动态设置的话，可以使用事件处理函数代替。若是您必须使用CSS表达式的话，请记住它们可能被执行上千次，从而影响页面性能。

把JavaScript和CSS放到外部文件中

在现实世界中，使用外部文件会加快页面显示速度，由于外部文件会被浏览器缓存。若是内置JavaScript和CSS在页面中虽然会减小HTTP请求次数，但增大了页面的大小。另一方面，使用外部文件，会被浏览器缓存，则页面大小会减少，同时又不增长HTTP请求次数。
所以，通常来讲，外部文件是更可行的方式。惟一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式。通常来讲，在一个session中，主页访问此时较少，所以内嵌方式能够取得更快的用户响应时间。

减小DNS查询次数

减小主机名可减小DNS查询的次数，但可能形成并行下载数的减小。避免DNS查询可减小响应时间，而减小并行下载数可能增长响应时间。一个可行的折中是把内容分布到至少2个，最多4个不一样的主机名上。

最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除没必要要的字符，从而下降下载时间。两个流行的工具是#JSMin 和YUI Compressor。
混淆是最小化于源码的备选方式。象最小化同样，它经过删除注释和空格来减小源码大小，同时它还能够对代码进行混淆处理。做为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程。Dojo Compressor (ShrinkSafe)是最多见的混淆工具。

避免重定向

重定向功能是经过301和302这两个HTTP状态码完成的，如：

HTTP/1.1 301 Moved Permanently
  Location: http://example.com/newuri
  Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是下降了用户体验。

删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能，即它会创建没必要要的HTTP请求和额外的JS执行。

配置ETags

不是很懂，留个坑

缓存Ajax

提升Ajax的性能最重要的方式是使得其response可缓存