这次官网改版使用的提升网站性能的方法有:
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兼容性
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
上去看一下,怎么让黄色小块和蓝色小块和父元素的顶部平齐呢
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
<div class="big" style="height:300px;background-color:red;">
<div class="small" style="height:100px;width: 20%;background-color: blue;display:inline-block"></div>
<div class="small" style="height:200px;width: 30%;background-color: yellow;display:inline-block"></div >
</div>
</body>
</html>
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;
}