兼容&图片整合&优化

图片整合（精灵图、css sprites、css精灵、雪碧图）

把网站里面的小图标有规则的整合在一起，利用   background-position 改变背景图的位置，每个图标应用。

优点:
	（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
	（2）CSS Sprites能减少图片的字节；
	（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
	（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
	
缺点:
	（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
	（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
	（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
	（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

图片整合原则

1)边切图边整合。
2)定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错
误。
3)将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它
的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
4）单张整合好的sprite图片在100KB以内。
5）按分类整合图片。
6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。
7）整合好的图片必须是背景透明的图片png或者gif

兼容

浏览器大战

第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape Navigator浏览器大打出手。

第二次浏览器大战发生在20世纪。

    战争产物：Internet Explorer 9

13年市场比重

14年市场比重

15年市场比重

浏览器内核 ( 现代4大内核 )

Trident 代表作：IE

元老级内核之一，由微软开发，并于1997年10月首次在ie 4.0中使用，凭借其windows垄断优势，Trident市场占有率一直很高。然而并非垄断，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持HTML5和CSS 3，因此我们也经常会看到有些网站在浏览时会提示用户（在Internet Explorer 9.0+以上浏览效果最佳）。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。
**Triden 只能应用与Windows平台，且不开源。**

Gecko 代表作：Mozilla

元老级内核之一，由Netscape公司Mozilla组织开发。1998年，Netscape在于IE浏览器竞争失利之后，成立了非正式组织Mozilla，由其开发新一代内核，后命名为“Gecko”。FireFox也是这班人开发出来了，因此这也就是Mozilla一直使用的内核。
Gecko的特点是代码完全公开，因此其开发程度很高，全世界的程序员都可以为其编写代码，增加功能。**一套开放源代码的，以C++编写的网页排版引擎。最大优势是跨平台，能在Microsoft Windows、Linux和MacOS等主要操作系统运行**

WebKit :代表作： Safari苹果 & 之前版本的谷歌

这是苹果公司开发的内核，也是其旗下产品Safari浏览器使用的内核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分别是从KDE的KHTML和KJS衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统开发。
Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核（在脚本理解方面，Chorome使用自己研发的V8引擎）。

Blink : 代表作：新版本谷歌 & 新版本Opera欧鹏

这是由Google和Opera Software开发的浏览器排版引擎，Google计算将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
**特点在于源码结构清晰，渲染速度极快**

Presto ( Opera前内核 已经废弃 )

世界上公认的渲染速度最快的引擎

为什么会出现浏览器兼容问题？

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

CSS Bug、CSS Hack和Filter

• CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
• CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
• Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

常见的BUG

常见CSS解析Bug及hack

1)加了超链接的图片有边框BUG
当图片加<a href=“#”></a>在IE上会出现边框
Hack:给图片加border:0;或者border:none;


2)图片间隙
div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
hack1:将</div>与<img>写在一行上；
hack2:将<img>转为块状元素，给<img>添加声明：display:block;
hack3:给<img>添加声明：vertical-algin:meiddle/top/bottom;  //只要不是基线（baseline）对齐都可以


3)  双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;


4)默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;

5)表单元素对齐不一致
描述：表单元素行高对齐方式不一致
hack1:给表单元素添加声明：float:left;
hack2:给input改变垂直对齐方式：vertical-align:middle/top/bottom


6)按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。


7)鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack:    如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer


cursor:         ;
	auto默认
	crosshair加号
	text文本
	wait等待
	help帮助
	progress过程
	inherit继承
	move移动
	ne-resize向上或向右移动
	pointer手形
	
8）百分比bug
描述:在IE7及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。
(也会受系统影响)
hack:给右面的浮动元索添加声明: clear:right;   意思:清除右浮动。


9)透明属性
兼容其他浏览器写法：opacity:value;(规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）)
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

10 ) li列表的BUG
1 :当父元素(1i)有float:left;子元素(a)没设置浮动的情况下会出现垂直bug;
Hack:给父元索li和子元素a都设置浮动;
2 :当给li中的a转成block ;并且有height,并有float的时候, li中没设置浮动会出现阶梯显示，
hack :同时给li加float;

11)当1i里a、 span分别添加左右浮动时,并且li设置高度后, 1E7及以下浏览器会出现li下方多出3像素左右的空隙;
hack :给li添加float : left ;和width : 100% ;

12 )当前元素(父元素里面第一个子元素井且是块状元素 )与父元素没有设置任何浮动的情况下,设置margin-top后,会错误的把margin-top加在父级元素上。
Css hack:
1、 给父级元素添加overflow:hidden;(推荐使用)
2. 给父元素或者子元索加浮动
3、 当父元素有边框时,可以直接给子元素添加margin-top值;

13 ) margin BUG
当两个上下排列的元素,上元素有margin-bottom : 30px ;下面元素有margin-top:20px ;他们中间的距离不会相加,而是会设置为较大的值;

过滤器

  1.下划线属性过滤器  //用于兼容IE6及以下版本
  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
  
  语法：选择符{_属性：属性值；}
 

  2. !important关键字过滤器
  
  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

  语法：选择符{属性：属性值!important;}
 

  3. "*"属性过滤器

  当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属
性的作用。

 语法：选择符{*属性：属性值；}


  4.   \9  ：IE8及以下版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}

  5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别

优化

1）页面主题优化

实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容。

2）页面头部优化

<meta name="keywords"   content="" />向搜索引擎说明你的网页的关键词；
<meta name="description"    content=""/>告诉搜索引擎你的站点的主要内容；

说明
	1、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
	2、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。

3）超链接优化

1、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.
2、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
3、最好别使用图片热点链接，理由和第一点差不多

4）图片优化

图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。

5）PageRank（pr值,友情链接）

PR值是Google提出的一个重要参数，它标明了某个网站的重要程度，那么pr值是如何确定的呢？目前普通的解释为：假如有ABC三个网站，彼此互作友情链接，那么当一个访客通过A上的友情链接来到B时，Google就认为A为B投了“一票”，同理，如果有人从C访问B，那么B又得一票，如果全世界的网站上都有B的友情链接，B就是世界上最重要的网站了！

扩展

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<ifram src="" width="" height="" framborder="" scroll="">
	src 规定在iframe中显示的文档的URL
 	framborder  规定是否显示框架周围的边框
 	scroll  规定是否在 iframe 中显示滚动条。

扩展：回流(reflow) & 重绘(repaint)

• 页面的渲染流程

什么是DOM树
什么是样式结构体
什么是呈现树

呈现树的特点  

回流必将引起重绘 重绘不一定引起回流。