项目：××官网改版总结经验和收获
这次官网改版使用的提升网站性能的方法有：
css sprites、事件委托、加载更多使用innerHTML一次性批量加载、懒加载图片、CSS/JS代码压缩
1.透明度
color上的值:rgba是IE9+才可以支持，rgba只作用于元素
IE上的flter:alpha(opacity=60)和其他浏览器上opacity:.6和rgba不同，它们不只作用于元素，还作用于元素内的所有内容
但IE8-还是可以实现的，
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AARRGGBB,endColorStr=#AARRGGBB)因为#AARRGGBB中的A就是rgba中的a, 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
要想详细了解，如何在IE8-上应用背景上的透明，而不是元素上所有内容都透明，
参考这篇文章：rgba颜色与兼容性的半透明背景色
2.IE只支持a:hover，其他元素上的:hover不支持，具体的CSS选择器的浏览器支持，在一个网页上总结的很好了
建议放在收藏夹或者背熟：CSS选择器的浏览器支持
3.CSS3 transition属性只在父元素设置过渡的话，子元素是不会有过渡的，顺便说一下兼容性
transition IE10+,transfrom 2d IE9+，再顺便推荐一个非常有用的网页，查看CSS3和HTML5兼容性
can i use ??
4.如何使用CSS sprite呢？
有几个方法，使用PS、firework这些类似的软件手动拼接图片，
或者使用使用自动化软件：cssGaga,看到知乎上推荐的，使用了感觉不错
又或者在线自动生成： css sprites generator
5.如何缩写font-size？
要缩写font-size属性的，font的前三个值允许以任意顺序写，并且都是可选的，而后面二个属性fong-size和font-family不仅要按顺序写，而且必须要有，所以很多时候我还是分开写font这些属性的
6.事件委托怎么写，怎么判断子元素
首先当然是先获取target啦，然后根据ID或者className或者是类型等等
7.还未解决的一个问题，大家可以粘贴在 http://www.w3school.com.cn/tiy/t.asp?f=html_intro
上去看一下，怎么让黄色小块和蓝色小块和父元素的顶部平齐呢
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
8.JS上的innerHTML各浏览器都支持，但注意IE8-下的table，tbody，tr等设置会出错，但主流的div，p，h1等都可以用，不过有点可惜的就是fragment不支持
style上cssText和innerHTML一样，各浏览器支持，而且批量处理，只一次flow，但要记得cssText会覆盖掉原本的样式，
所以可以这样写cssText += ";" + newStyle,但务必要记得先加上分号
9.这次的官网改版我做成了单页面应用SPA，使用的方法也就是根据URL中的HASH值#value来对应事件，但要记住刷新后又回到页面最开始的时候，所以刷新的时候也要记得使用和hash值改变一样的函数，关键事件
window.onhashchange()，兼容IE8+
10.还未解决的问题，有没有批量删除子元素的方法，感觉只使用removeChild()方法效率有点慢，
难道要获取所有子元素，然后改变长度，嗯嗯，就是这样
11.怎么设置和获取块元素的文本
innerText属性：返回操作元素中包含的所有文本内容，包括子文档树中的文本，写入值中，结果会删除元素的所有子节点，插入包含相应文本值的文本节点
支持此属性的浏览器包括IE4+、Safari 3+、Opera 8+和Chrome。
firefox不支持此属性，不过支持textContent，支持此属性的浏览器IE9+
支持此跨浏览器兼容性写法如下：
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent ： element.innerText;
}
function setInnerText(element){
if(typeof element.textContent == "string"){
element.textContent = text;
}else {
element.innerText = text;
}
}12.伪元素:before和:after支持IE8+
content属性是必须的，但没什么用处可以设置为空格字符串，还可以和伪类元素一起使用
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}13.在IE8-的浏览器上a标签虽然可以嵌套替换元素和块级元素，显示上没问题，
但就是点击a标签时的链接不会跳转。
还有个问题是这样的，在IE8上a标签不设置宽高，只设置dispaly:block, 即使a标签下的img设置了宽高也没用，a标签的宽高还是0
这个问题困扰我真的很久，好在解决了
14.如何使左右边导航栏悬浮
①百度贴吧的做法是：当滚动条到达某一个高度让左边导航栏的某部分设置position:fixed、bottom:10px;，继续增加到底部footer要覆盖时就慢慢加载bottom属性
②而看到这个网页的左导航栏时候，点击打开链接，我惊呆了，然后还可以这样更简单
直接当滚动条到达某一个高度设置position:fixed、top:10px;继续增加到底部footer要覆盖了就让footer覆盖好了，设置一下z-index为负就好了，更简单
③或者是像新浪微博一样，当滚动条到达某一个高度是position:fixed、top:10px，之后到达footer后就设置position:absolute,top的值变化为一个固定的值
所以这一次我是使用了③的方法，但感觉②更简单方便，因为只有两个阶段
15.函数提升和声明提升
名字解析顺序
javascript中一个名字(name)以四种方式进入作用域(scope)，其优先级顺序如下：
1、语言内置：所有的作用域中都有 this 和 arguments 关键字
2、形式参数：函数的参数在函数作用域中都是有效的
3、函数声明：形如function foo() {}
4、变量声明：形如var bar;
名字声明的优先级如上所示，也就是说如果一个变量的名字与函数的名字相同，那么函数的名字会覆盖变量的名字，
无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。
所以说要不能在函数提升上面定义声明提升，因为是函数提升优先级高于声明提升的，我在这个项目就犯了这个错误：
var a = document.querSelector(".article-page");
function b(){
alert(a.value);
}变量提升要注意的是：只是提升变量的声明，并不会把赋值也提升上来
另外也要注意Javascript是函数级作用域，if中的作用域和外部包含函数作用域是一样的，也就是if没有块级作用域
详情戳这个链接：深入解读Jvascript中的Hoisting机制
15.清除浮动，在浮动元素的父元素上运用
.cf::after {
content:"";
display:table;
clear:both;
}