CSS Sprites技术能减少图片的请求数
[u][color=black]从代码方面来探讨前端优化的方法：1.减少http请求数
图片，css，script，flash，等等这些都会增加http请求数，减少这些元素的数量能减少响应时间。
CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。
内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中(css被缓存)，这样就会更好的减少http请求数而且不增大html的体积。
很多用户都是在空缓存的情况下进入你的网站的，这样第一次的速度就会显得很重要。
第一条规则是最重要的一条规则。
2.把样式表放到顶部
[url=http://www.92.la/][u][color=black]上海SEO公司[/color][/u][/url]发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的，待加载完样式后，页面重绘，内容一闪即改变了样式表现。本文由[url=http://www.92.la/xwgzx/][u][color=black]新闻稿[/color][/u][/url]公司 -夏易网络整理提供-[url=http://www.92.la/][u][color=black]http://www.92.la/[/color][/u][/url]
3.把脚本放到底部
把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。
对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容，第二个脚本引起的问题是阻止平行下载。 “http/1.1 specification”建议浏览器对一个域名，同一时间下载数不超过2个(按：实际监测发现一般有超过2个)，我曾经让ie并行下载100个图片。 当脚本正在下载的时候，浏览器不会开始下载任何东西。
4.避免css expressions
css expressions 是一个有力(和危险)的方式动态的改变css的属性。他们自ie5就开始被支持，举个例子，用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
expressions的问题就在与它的计算频率绝对超出我们的想象，甚至当我们移动鼠标，都会引起页面的重绘!
下面是举例页面
减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值，就让样式等于这个值，不再变动。如果样式的属性一定要动态的改变，就用时间句柄吧!
5.让脚本和样式外延
Javascript和CSS应该是外部调用还是内嵌呢?
用外部调用文件的方式更快，因为他们是可以被缓存的，如果是内嵌在页面中他们就无法被缓存了!想想如果用户要在你的网站看很多很多的页面，如果都是使用同一个外部脚本和样式，那么他们一旦被缓存，就再也不需要下载了，这样会给你带来很大的潜在好处。
6.减小脚本体积
有两个比较流行的工具是用来减小脚本的体积的–JSMin和YUI Compressor。(按：这个压缩和Gzip压缩是不一样的，Gzip是传输压缩，这个是代码压缩)。
我们以上方法，读者应该适当的选择或配合使用，我们在选择方法的原则是应该以最低的代价来完成客户端的功能。
HTML代码优化
1. 使用相对URL
对于页面中的各种URL，例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等，如果能够确定它们与当前页面是处于同一域名下的话，则可以使用相对URL，这样每一个URL都能够节省至少一个域名的长度。
2. 删除HTTP或HTTPS
绝对URL都以HTTP或HTTPS等协议头开始，如果能确定URL的协议与当前页面URL的协议是一致的，或者说该URL在多种协议下均是可用 的，则可以考虑删除这个协议头。这样做虽然有些非主流，但事实证明是可行的，而且也有理论依据(见http://www.ietf.org/rfc /rfc2396.txt第5.2节描述)。Nexus One的这个页面中有些资源URL就删除了协议头，虽然并不是出于节省资源的目的，但至少证明删除协议头是可行的。
对于CSS，如果删除协议头在IE7、IE8下会造成CSS下载两次，这个是需要注意的问题。
3. 删除注释
与CSS、Javascript一样，也可以通过删除HTML中的注释来实现优化。然而，这一点对于HTML来说却要复杂一些，因为在HTML中存在某些特殊作用的注释是不能删除的。
(a).IE条件注释
诸如这样的语法，只有符合expression的浏览器才能识别其中的内容。
(b).CDATA注释
CDATA本身是XHTML中才需要的，在CDATA中的内容不需要对特殊字符进行转义，不过为了兼容老版本的浏览器，需要加上注释，以免出错。不过，对于这个注释，如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的，除此之外还需要服务器能够派application/xhtml+xml这样的内容格式，另外还需要浏览器支持，目前IE并不支持XHTML格式。因此，目前你的页面可能是按照XHTML规范来写的，也能通过HTML验证，但想要兼容IE则一定还是以HTML方式来展示的。
(c). 自定义注释
产品中自定义的一些具有特定功能的注释，例如统计。
4. 压缩空白符
在HTML中的大多数标签中，多个空白符都会被压缩成一个来显示，于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的 空白符都可以这样做，例如pre、textarea中的空白符是按原样显示的，标签属性中的属性值也是按原样显示的，例如title、value等。
5. 压缩inline css & Javascript
不管inline还是external，都需要压缩，这是减小体积的最直接的方式。
6. CSS&Javascript尽量外链
外链CSS和Javascript，不仅仅是减小HTML本身的体积，而且还可以充分利用浏览器的缓存机制，所以当CSS、Javascript的代码量超过一定体积时，尽量外链。除此之外，尽量避免在页面中使用onmouseover=”xxxx”的方式来注册事件，既不利于维护也容易产生不必要的冗余代码。
7. 删除元素默认属性
在HTML规范中，很多HTML元素的属性是有默认值的，对于这些默认值可以抹去不写，下面是不完全统计。
标签 属性 默认值
style media screen
link media screen
form method get
form
input type text
一些非常规的方法
1. 删除或替换
DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。
2. 删除标签属性值的引号
引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。
(提醒：不符合XHTML规范)
3. 省略某些属性值
例如disabled、checked、multiple等的值都可以省略。
(提醒：不符合XHTML规范)
4. 删除可选的闭合标签
例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。
(提醒：不符合XHTML规范)
5. 删除自动闭合标签的”/”
(提醒：不符合XHTML规范)
总结
非常规的方法只适用于某些特定的页面，使用时务必谨慎。
传输优化
这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是google的方案，把首页做的极其精简，图片，html，静态文件都很小，再就是缓存，把文件放到本地缓存区读取。还有http请求数，减少文件传输中的排队等待。
字节优化：
1. 减少冗余html，结构化，语义化的html来实现，行为，表现，结构分离，独立的html文件将变得很小。
2. 压缩文本文件，css，html，js去掉注释、空格、换行等。
3. 降低图片字节，选择合适的图片类型，png-8是一个好东西，再用工具将图片进行压缩去掉，比如png-8的压缩工具。用合适的图片尺寸，不要把大图控制一下宽高就用上了。
4. gzip压缩一下，减小服务器端传输到客户端时候的字节。
6. flash文件和flash+xml的动态flash也减小字节
缓存：
服务器端配置一下，提高缓存的命中率和把不经常修改的文件缓存了。
Add Expires headers、Etags、ajax使用get方式便于缓存。
把能分离出来的css，js分离成外部文件便于缓存。
使flash和xml文件可缓存。
打通不同运营商的限制
CDN提高不同类型运营商的网络传输速度，电信，网通，铁通，教育网统统搞定。
请求数：
减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。
分域提高同时加载数，优化排队等待。
避免404无效请求数。
避免重定向。
延迟加载和预载：
把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。
客户端优化
1. 讨厌的IE的滤镜和CSS expressions少用，小心把浏览器搞挂，CUP 100%死机。
2. CSS放到前面，js能放到后面的放在代码后面。将页面尽早展示给用户。
3. 减少iframe的使用，避免CPU扛不住。
4. 减少DOM个数，减低浏览器解析压力。
5. 使用 而不是@importChoose over @import，在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
6. 提高js的执行效率，话题太大不提了
7. 缩小 Cookie，针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
8. 还有小图片的repeat背景会提高浏览器的CPU占用。
页:
[1]