Web架构中的前端页面缓存技术 | IT@找着了HTTP缓存是如何实现-前端开发博客
推荐文章 01-05 07-24 12-25 07-05 10-27 04-16热门文章
9,853Views
5,815Views
4,980Views
4,632Views
4,066Views
3,753Viewshtml+css+javascript+jquery+ajax
《JavaScript dom 编程艺术》
初级开发：
《javascript高级程序设计》(第二版)
《高性能 JavaScript》
《JavaScript语言精粹》
中级开发：
《JavaScript DOM高级程序设计》
《JavaScript设计模式》
《高性能网站建设指南》
《高性能网站建设进阶指南》
所谓，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。
中文名称是网站头像。在我们的网站建设中，为网站打造一个契合网站主题的个性化标志则是必需的，这直接关系到能否成功地塑造网站的品牌。
favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是网站头像，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的，所以你在本站使用ICO图标转换工具就可以轻松达到你的要求。
常用的Favicon.ico图标有3种16&16、32&32、48&48。首先，利用图形工具创建2个反映网站主题的256色的小图片：1个为32&32像素，另一个为16 &16像素。需要注意的是，要选用“Windows 默认调色板”，不然，在最终的效果展示中图形可能会发生迥异于您初衷的颜色上变化。
图片制作好后，使用如Image2Ico之类的小程序或者其他在线生成的网站即可将2张到一个Icon文件中。
参考转载网址：
/lei2007/archive//3262897.html
/and/p/3390676.html
/Darren_code/archive//property.html
/Darren_code/archive//property.html
（一）浏览器请求和响应的过程
（二）第一步、浏览器预处理
查询Cache：读取Cache或者发送304请求
（三）第二步、查询DNS
一、优化规则--减少DNS查找
浏览器DNS缓存&计算机DNS缓存&服务器DNS缓存（TTL）
TTL是 Time To Live的缩写，该字段指定IP包被路由器丢弃之前允许通过的最大网段数量。TTL是IPv4包头的一个8 bit字段。TTL的作用是限制IP数据包在计算机网络中的存在的时间。TTL的最大值是255，TTL的一个推荐值是64。
当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。
较少的域名来减少DNS查找（2-4个主机）
（四）第三步、建立连接
优化规则——使用内容分发网络
优化规则——用域名划分页面内容
按页面内容划分域名，在合适的资源服务器上存放文件
（五）第四步、发送请求
优化规则——减少HTTP请求
HTTP请求30-40，合并文件，图片地图，内联图像
内联图片是一种新型的图像格式(在我看来是这样不知道理解对否),官方称为：data URI scheme。通常我们存储的图片在网页中需要写：&imgsrc=&/images/xmaoseo.jpg&/&而内联图片写法会是&&imgsrc=&data:image/base64,iVAGRw0KGDCFGNSUhEUgACBBQAVGADCAIATYJ7ljmRGGAAGElEVQQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPACCCTElFTEVBQmGA&&/&
内联图片语法。&img src=&data:image/base64,iVBOR....&data -&取得数据的协定名称
image/png&-&数据类型名称
base64&-&数据的编码方法
iUANR....&-&编码后的数据
:&,&;&- data URI scheme 指定的分隔符号
网络上有很多免费的base编码和解码工具，但是有个最简单方法就是我们写一个PHP文件。使用base64_encode()进行编码：比如：
echo base64_encode(file_get_contents('211-11.JPG'));
还有一点IE8以下都不支持这种图像，所以还是IE6的用户就比较悲催了。
js数目和css数目尽量减少
优化规则——优化CSS spirite
优化规则——避免404错误
避免内部无效的链接
优化规则——不要使用iframeset，少使用iframe
搜索引擎不友好，加载需要时间，阻止页面加载
（六）第五步、等待响应
优化规则——避免重定向
涉及服务器负载、数据查询、服务器端缓存等
（七）第六步、接收数据
优化规则——压缩组件
HTML文档、脚本和样式表、XML和JSON的文本响应&压缩如何工作压缩通常能将响应的数据量减少将近70%
优化规则——精简Javascript和CSS
从代码中移除不必要的字符以减少其大小，减少加载时间。
优化规则——尽量缩减页面大小
页面必须小于150K(不含图片）a)&静态文件是否gzipb)&图片是否压缩优化过
（八）第七步、读取Cache
优化规则——添加Expire或Cache-Control
应用于不经常变化的组件，包括脚本、样式表、Flash组件、图片Expires和Cache-Control
优化规则——&使用外部的Js和Css文件
尽可能使用外部Js和Css，因为我们目前大部分Js和Css都做了Gzip和缓存技术，可以充分利用。
（九）第八步、处理元素
不要对image和pdf等二进制文件进行gzip压缩
（十）第九步、渲染元素
优化规则——将样式表放在顶部
优化规则——建议将脚本放在底部
&一般浏览器可以允许并行下载，取决于主机个数、带宽等
优化规则——移除重复脚本
优化规则——避免CSS表达式
优化规则——优化图像
Javascript开发规范
大型的项目在前端 JS 方面有几个需要达成的目标：&
代码逻辑分层
避免全局变量
便于多人协作开发
各部分代码模块化，可以按需加载
保持全局变量的清洁
可进行单元测试
一、网页内容
1、减少http请求次数
（1）捆绑文件&：多个文件捆绑成一个文件
（2）css sprites：多个图片拼成一张图片&通过css控制在什么地方具体显示图片的位置
（3）Image Maps：也是将多幅图拼在一起，然后通过坐标来控制显示导航。
（4）Inline images：通过编码的字符串将图片内嵌到网页文本中
2、减少DNS查询次数
DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。
3、避免页面跳转
当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求
4、缓存Ajax
Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
压缩回复内容
减少dns查询
精简javascript
5、延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
6、提前加载
与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型
无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。
有条件加载：根据用户的输入推断需要加载的内容
有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。
7、减少DOM元素数量
想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，document.getElementsByTagName('*').length
8、根据域名划分内容
浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询也是个问题。
9、减少iframe数量
使用iframe要注意理解iframe的优缺点
可以用来加载速度较慢的内容，例如广告。
。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载
即使iframe内容为空也消耗加载时间
会阻止页面加载
10、避免404
结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
二、服务器
1、使用CDN
提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。
2、添加Expires 或Cache-Control报文头
这条规则分为两个方面，
对于静态内容添加Expires，将静态内容设为永不过期，或者很长时间以后。在IIS中设置Expires可以看。
对于动态内容应用合适的Cache-Control，让浏览器根据条件来发送请求。关于asp.net的caching，可以看和。
3、Gzip压缩传输文件
Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。
值得注意的是pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，gzip对其效果不大，而且会浪费CPU
4、配置ETags
首先Etag简单来说是通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。
但是Etags的版本信息即使主流服务器未能很好地支持跨服务器的判断，比如你从一个服务器集群中一台得到Etags，然后发送到了另一台那么校验很有可能会失败。
5、尽早flush输出
后台程序中我们知道有个方法叫，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。
那在什么时候调用这个方法比较好呢？一般情况下我们可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次，客户端收到了关于脚本或其他外部资源的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。
6、使用GET Ajax请求
浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。
7、避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。
三、服务器
1、减少Cookie大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中
去除没有必要的cookie，如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
设置合适的过期时间，比较长的过期时间可以提高响应速度。
2、页面内容使用无cookie域名
大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。
1、将样式表置顶
css放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。
2、避免CSS表达式
CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。
3、用&link&代替@import
避免使用@import的原因很简单，因为它相当于将css放在网页内容底部
4、避免使用Filters
滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。
五、Javascript
1、将脚本置底
把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
现在主流浏览器都支持关键字，可以指定脚本在文档加载后执行。
HTML5中新加了关键字，可以让脚本异步执行。
2、使用外部Javascirpt和CSS文件
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。
同时将Javascript和CSS从inline变为external也减小了网页内容的大小。
使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。
3、精简Javascript和CSS
精简就是将Javascript或CSS中的空格和注释全去掉
4、去除重复脚本
重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。
5、减少DOM访问
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意
缓存已经访问过的元素
Offline更新节点然后再加回DOM Tree
避免通过Javascript修复layout
6、使用智能事件处理
这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。
1、优化图像
查GIF图片中图像颜色的数量是否和调色板规格一致。
尝试把GIF格式转换成PNG格式，看看是否节省空间。
在所有的PNG图片上运行（或者其它PNG优化工具）
在所有的JPEG图片上运行。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息&
2、优化CSS Sprite
Spirite中水平排列图片，垂直排列会增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100&100的图片为1万像素，就是100万像素。
3、不要在HTML中缩放图片
不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。
4、使用小且可缓存的favicon.ico
网站图标文件favicon.ico，不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以我们要确保这个图标
文件尽量小，最好小于1k
设置一个长的过期时间
七、移动客户端
1、保持单个内容小于25KB
这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用上了。
2、打包组建成符合文档
把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组建。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。
Repaint 和 Reflow 也就是重绘和重排。
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。
修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：　
　　ID选择符&#box　　类选择符&.box &　　标签 div　　伪类和伪元素 a:hover
　　当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。
CDN的全称是Content Delivery Network，即内容分发网络。
　　&其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。&&
注意控制Cookie大小和污染　
因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
　　使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响
　　Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。
转载网址：/indream/p/3602348.html
事务，以及界面、数据、事件、业务
当需求变得庞大，解决方案也会变得庞大；当解决方案变得庞大，就会出现细分；当出现细分，就会出现按哪种方式管理的问题。
软件从处理一件事务发展到了要处理许多事务，各事务间有包含、顺序、主次等等的关系，变得越来越复杂。因为数据与逻辑庞大了，所以数据与逻辑就分离了，然后事件和业务分离了。
它们的关系已经在我们还理得清之前持续发展而变得更加难理得清，但在一个时间点上，它们UI的领域大致分化成这些原子：
MVC全名是Model View Controller 是模型（model）-视图（view）-控制器（conctroller）的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方式组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
MVC&是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：
Model（模型）表示应用程序核心（比如数据库记录列表）。
View（视图）显示数据（数据库记录）。
Controller（控制器）处理输入（写入数据库记录）。
MVC&模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。　　通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。　　通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
我们可以看到的是，界面被分到了View，数据分到了载体Model上由Model“携带”，业务集中在Controller中，而推动业务的事件由用户与View交互，通过View向Controller发动。
当然，实现由很多种，每种细节上都有不同，所以我才只讲也只能讲大致的MVC。MVC的其中一个缺点便是没有明确的定义，所以不同的实现（比如Struts和ASP.NET MVC）细节上都是不一样的。
MVC的一般流程是这样的：View（界面）触发事件&--& Controller（业务）处理了业务，然后触发了数据更新&--&不知道谁更新了Model的数据&--&Model（带着数据）回到了View &--&&View更新数据
Model-View-Presenter和一些衍生
在MVC，当你有变化的时候你需要同时维护三个对象和三个交互，这显然让事情复杂化了。
随着需求变得庞大的时候，需求变化也变得频繁，这是一个出现了无数次以后也将会出现无数的无数次的一个问题，所以它需要一个解决方案，哪怕它不一定能被解决。
放在UI的模式和MVC上来讲，就是优化或者替代MVC模式，其中之一就是Model-View-Presenter（MVP）模式。
两幅图是不同的，但是对MVC的改进的思想却是一样的：切断的View和Model的联系，让View只和Presenter（原Controller）交互，减少在需求变化中需要维护的对象的数量。
这种方式很符合我们的期待，因为我们倾向于：
用更低的成本解决问题
用更容易理解的方式解决问题
MVP定义了Presenter和View之间的接口，让一些可以根据已有的接口协议去各自分别独立开发，以此去解决界面需求变化频繁的问题。上面两图都有接口，不过接口的实现和使用细节不一样，不过思想上是一致的。
在这里要提到的是，事实上，需求变化最频繁的并不一定是最接近用户的界面，但基本可以确定的是，最接近用户的界面是因为需求变化而需要最频繁更改的。
Model-View-ViewModel
从图上看是比MVP简单了，更不用说MVC了。个人不认为MVVM是从MVP进化而来，我只觉得这是在MVP之后出现的一种“更好的”UI模式解决方案，但是用MVP来与之对比比较容易说明问题。
ViewModel大致上就是MVP的Presenter和MVC的Controller了，而View和ViewModel间没有了MVP的界面接口，而是直接交互，用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例，而是自动地双向同步。数据绑定你可以认为是Observer模式或者是Publish/Subscribe模式，原理都是为了用一种统一的集中的方式实现频繁需要被实现的数据更新问题。
比起MVP，MVVM不仅简化了业务与界面的依赖关系，还优化了数据频繁更新的解决方案，甚至可以说提供了一种有效的解决模式。
至此，我们能理解为什么许多人认为MVVM是最好的一种模式，没有之一。但事实上，MVVM也是依赖于我们至今所讲的“特有的情境”。
前一阵做了几个移动端的小站，虽然页面不多，但还是遇到了问题。
一、移动端要适配不同分辨率，宽度要设置成100%，那么元素的高度呢？设置成px不合适啊？margin呢？padding呢？
如果margin、padding设置成固定的px值，在不同分辨率下显示效果会不一致，小分辨率下10px已经很大了，但是在大分辨率下如pad上，10px就很小。
这是个很纠结的问题。为此我用chorme浏览器查看了淘宝、京东的手机端页面。京东的做法是用em，把px转化成em
比如font-size=16px，那么1em=16px。1px=0.0625em
这样计算之后，把宽度、高度、margin、padding等设置成em。
又利用css3的媒体查询，在不同分辨率下设置不同的字体大小，如下
@media screen and (min-width:480px){
&.wrapper,input{font-size: 21}
@media screen and (min-width:640px){
.wrapper,input{font-size: 28}
这样一个相同的em值在不同的分辨率下就都可以适用了。
二、图标、背景图片的问题
一张图片怎样适应不同分辨率下的设备呢？
理所当然，小分辨率下要用小的图标，大分辨率下要用大的图标。一个图标要是做好几个尺寸那切图就很费力气啊，没想到还是em解决了问题。
每个图标或背景图都只做一张，尽量使用大尺寸。
然后再写css的时候，背景图要写background-size：**em **em。背景图的宽度和高度也写成：width：**em；height：**em；这个em的两者要相同的比例。
多张图标可以放在一张图片里面，background-position：**em&**em
这样就能使同一个图标在不同分辨率下显示不同的大小了。
三、好用的box-sizing
在手机端经常遇到一个问题：一个元素要设置成百分比，但它还要有边框、padding之类的，如果按照一般的css写法，设置百分比的时候就要预留边框、padding的大小，这样百分比就比原来预想的要小一些，并且要估算，不是很精确了。css3有一个新的样式可以解决这个问题，就是box-sizing。
-moz-box-sizing: border--webkit-box-sizing: border--o-box-sizing: border--ms-box-sizing: border-box-sizing:border-
这样设置之后，设置的宽度就是一个包含内容宽度+padding宽度+边框看度的一个值了。
转自：http://yanue.net/post-106.html
HTML5在引入新标签（见：）的同时，废弃了不少常见元素，大抵分为如下几类。第一类：表现性元素
建议用语义正确的元素代替他们，并使用CSS来确保渲染后的效果第二类：框架类元素因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。
但html5支持iframe。第三类:属性类很多表现性的属性也被新规范移除，如下：
body标签上的link、vlink、alink、text属性
height和width
iframe元素上的scrolling属性
hspace和vspace
table标签上的cellpadding、cellspacing和border属性
header标签上的profile属性
链接标签a上的target属性
img和iframe元素的longdesc属性
第四类：其他
abbr取代acronym（用于表示缩写）
object取代了applet
ul取代了dir
在ie6下a标签套span标签，而span标签里面有背景图，a标签又有hover 状态，默认和hover状态下span的背景图不同。
&a href=&#& class=&btn-pre&&&span&&/span&&/a&
如果只设置& a:hover span{}&&在ie6下是不生效的。需要先设置a:hover{}&再设置&a:hover span{}&才会生效&。
如果span标签里面有背景图，在a:hover span下背景图又要换成其他图片，这种情况a标签也需要设置背景图，而且a:hover 状态也需要设置背景图切换。
我试过a:hover{bacakground:url(1.png) no-repeat 200px 200}其实图片只有50px*50px，也就是说背景图片取不到。&&但这样设置以后，在ie6下才会显示正常。
转自：http://blog.csdn.net/freshlover/article/details/9746821
Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有限制，主要是因为chrome认为汉字小于12px就会增加识别难度，尤其是中文常用的宋体和微软雅黑。而我们在实际项目中，对于数字/英文内容，其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示，这个时候就需要取消浏览器的自动调整功能了。
一般解决方案是禁止webkit浏览器配置调整网页的字体大小。如下CSS定义方式：
.classstyle{&-webkit-text-size-adjust: font-size:9&}&&
再讲一下text-size-adjust属性，该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小，safari 3.0+，chrome 1.0+可以支持。属性值，可以为三种：percentage：字体显示的大小；
auto：默认，字体大小会根据设备/浏览器来自动调整；
none:字体大小不会自动调整
据说该属性最初专门是为iPhone版safari设计的，用来自动调整普通网页在iPhone手机端字体的展现问题，不过，既然是webkit的私有属性，现在也经常用在webkit内核的桌面浏览器限制页面展示
。实际上，这是webkit的一个bug。在最新版的Chrome已经修复。
需要注意的是，不合理的使用-webkit-text-size-adjust:none会造成许多不好的影响。比如将其定义为全局属性的话，在Chrome中当用户放大缩小页面（PC上按住Ctrl滚动鼠标滚轮可缩放网页）的时候，文字却维持定义的大小而不放缩，给用户带来的不太友好的体验。所以我们在使用时，最好定义为局部有效，而不要图省事一句html{-webkit-text-size-adjust:}了事。
由于没有&-o-text-size-adjust，这样的CSS 属性，在 Opera，我们就只能通过自己手动设置了：工具-&首选项-&高级-&字体-&最小字体大小（像素）。
PC桌面版Chrome 27正式取消了-webkit-text-size-adjust属性的支持，实际上是修正了原有的bug。如果定义该属性在Chrome调试窗口会显示Unknown property name，所有字号最小为12px。但是，
移动端chrome/safari目前依然支持-webkit-text-size-adjust属性。因为此属性的滥用会使得webkit内核的浏览器失去调节能力，对于有视觉障碍的浏览者非常不友好（尤其是移动终端），那么现在该如何实现原来的需求呢？
我们可以尝试通过对文字区域局部应用以下样式解决：
.chrome_adjust {& font-size: 9&&-webkit-transform: scale(0.75);&&}&
12&0.75=9，对于其它浏览器来说，12px以下的字号都是可以识别的，这里仅需要对于Chrome浏览器进行缩放。可是如何分辨是Safari还是Chrome，目前尚没有有效的CSS hack。可以通过javascript来判断是否为Chrome。判断方法：var isChrome =&!!window.当检测为Chrome的时候，将.chrome_adjust这个类添加到对应的标签。
但是，问题还没有解决。看到网页在三种浏览器的不同表现：
1）、Chrome下由于启用了缩放，所以字符间距出现问题，影响了美观，这时候如果追求完美，可能你还会想到js判断为Chrome后再用CSS属性letter-spacing去修复；2）、Firefox不认识-webkit，所以表现正常，9px；
3）、Opera 12.5+能够识别-webkit-前缀（Opera 12.15版本，内核暂未更换为webkit，但是已能够识别-webkit-前缀了，而且在检查元素时还抹掉了前缀），但又能够显示12px以下的字号，结果变成了9&0.75，影响了肉眼的识别，这时候，又得给opera添加-o-transform: scale(1);这个属性。
其实，源自挪威的Opera一贯使用自己的引擎(Presto)，但经常造成一些所谓的“兼容性问题”。在越来越多网站针对WebKit优化的情况下，Opera的对策就是，引入一些WebKit引擎的前缀属性，以避免开发者因为网页属性选择而影响Opera功能的发挥。Opera 12.50将是其第一个支持Webkit属性的桌面浏览器，包括-webkit-linear-gradient、-o-linear-gradient两种不同类型。移动版本也会使用同样的核心。相关测试的开发人员可以下载模拟器Opera Mobile Emulator——Windows、Linux、Mac版本。&
最后总结一下：对于www web站点，完全没有必要使用-webkit-text-size-adjust属性，因为桌面版屏幕空间比较大，12px满足大部分需求场所，没有必要非设为12px以下的字体，除非有特殊需求。在手机等移动端web页面，由于webkit浏览器支持设置小于12px的字体，虽然浏览器依然保留了对该属性的支持，但我们完全没有必要使用。
所以结论就是在万不得已需要使用-webkit-text-size-adjust的情况下，一定要写作-webkit-text-size-adjust: 100%;&。因为此写法只有mobile版支持（本人iOS 下safari/chrome均测试通过），而Chrome 27+和其他低版本的桌面版webkit浏览器，都不识别，也不会有设为none对视觉障碍用户不能放缩的负面影响。
IE6/IE7下对display:inline-block的支持性不好。
1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；
2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；
&&&&&&对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性）
&&&& IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE6下块元素如何实现display:inline-block的效果？
有两种方法：1、&先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：&div {display:inline-...}&div {display:}2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：div { display:inline- _zoom:1;_display:}&/*推荐*/div { display:inline- _zoom:1;*display:}&/*推荐:IE67*/
CSS2.0中，有四个属性是设置元素最大宽度、最小宽度、最大高度和最小高度的，它们分别是：max-width、min-width、max-height和min-height。使用它们，可以方便为元素设定最大、最小宽度和高度。
但是，万恶的IE6竟然不支持它。所以我们只能对IE6另外寻找方法了，本文使用的方法是expression。
代码如下：
/*&最小宽度&*/
.min_width{min-width:300&&&/* sets max-width for IE */&&
_width:expression(document.body.clientWidth & 300 ?&&300px&&:&&auto&);}
/*&最大宽度&*/
.max_width{&& max-width:600&&&/* sets max-width for IE */&&
_width:expression(document.body.clientWidth & 600 ?&&600px&&:&&auto&);}
/*&最小高度&*/
.min_height{&& min-height:200&&&/* sets min-height for IE */&&
_height:expression(this.scrollHeight & 200 ?&&200px&&:&&auto&);}
/*&最大高度&*/
.max_height{&& max-height:400&&&/* sets max-height for IE */&& _height:expression(this.scrollHeight & 400 ?&&400px&&:&&auto&);}
/*&最大最小寬度&*/
.min_and_max_width{&& min-width:300&& max-width:600&&&
/* sets min-width & max-width for IE */&&
_width: expression(&&&&& document.body.clientWidth & 300 ?&&300px&&:&&&&&&&&( document.body.clientWidth & 600 ?&&600px&&:&&auto&)&&&);}
/*&最大最小高度&*/
.min_and_max_height{&& min-height:200&& max-height:400&&
&/* sets min-height & max-height for IE */&&
_height: expression(&&&&& this.scrollHeight & 200 ?&&200px&&:&&&&&&&&( this.scrollHeight & 400 ?&&400px&&:&&auto&)&&&);}
解释一下代码中的expression：expression是微软为IE5.0版本以后的浏览器加入到一个属性，用来把CSS属性和JavaScript表达式关联起来。简单的说就是CSS属性后面可以跟一段JavaScript表达式。上面的例子就是通过JavaScript表达式计算出元素的最大、最小宽度和高度的值，然后赋予CSS。&&&