[url=http://www.1sucai.cn/article/31167.htm]http://www.1sucai.cn/article/31167.htm[/url]。
JSONP与AJAX看起来有点像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,但JSONP与AJAX是两个不同的东西,这两者之间可以说没什么关系。
[b]五、正则表达式优化
[/b] 正则表达式的优化总的来说就是尽可能精确,减少回溯次数,具体来说主要是以下几点:
1.如果你的正则工具支持,在不需要引用括号内文本的时候使用非捕获型括号:(?:expression) 。
2.如果括号是非必须的,请不要加括号。
3.不要滥用字符数组,比如[.],请直接用\. 。
4.使用锚点^ $ ,这会加速定位。
5.从两次中提取必须元素,如:x+写成xx*,a{2,4}写成aa{0,2}。
6.提取多选结构开头的相同字符,如the|this 改成th(?:e|is)。(如果你的正则引擎不支持这么使用就改成th(e|is));尤其是锚点,一定要独立出来,这样很多正则编译器会根据锚点进行特别的优化: ^123|^abc 改成^(?:123|abc)。同样的$也尽量独立出来。
7.多选结构后边的一个表达式放入多选结构内,这样能够在匹配任何一个多选结构的时候在不退出多选结构的状态下查看后一匹配,匹配失败的更快。这种优化需要谨慎使用。
8.忽略优先匹配和优先匹配需要你视情况而定。如果你不确定,请使用匹配优先,它的速度是比忽略优先快的。
9.拆分较大正则表达式成一个个小的正则表达式,这是非常有利于提高效率的。
10.模拟锚点,使用合适的环视结构来预测合适的开始匹配位置,如匹配十二个月份,可以先预查首字符是否匹配:(?=JFMASOND)(?:Jan|Feb|…|Dec)。这种优化请根据实际情况使用,有时候环视结构开销可能更大。
注:以上几点节选自[url=http://www.1sucai.cn/article/31168.htm]http://www.1sucai.cn/article/31168.htm[/url],非常好的一篇正则表达式优化文章,推荐有兴趣的朋友看原文。
[b]六、visibility:hidden与 display:none 的区别
[/b] 区别主要有三点:
1、空间占据:元素设置为visibility:hidden后仍然占据物理空间,而元素设置为display:none后是不占据空间的。
2、性能:visibility:hidden因为仍然占据物理空间,所以不会引起页面的回流和重绘,所以性能更好,反之display:none会引起页面回流和重绘。
3、继承性:当父元素设置为display:none后所有子元素均会被引藏,不改变父元素可见性的情况下子元素没有办法显示出来,如果父元素设置为visibility:hidden,所有子元素也会不可见,但如果给子元素设置为visibility:visible的话,子元素就可以重见天日了。
[b]七、篇历DOM树
[/b]方法一:用nextSibling和childNodes
function traversalByNextSibling(obj){
var ch=obj.firstChild,
result=[];
do{
result.push(ch.nodeName);
if(ch.childNodes.length){
result.push.apply(result,traversalByNextSibling(ch));
}
}while(ch=ch.nextSibling);
return result;
}
方法二:用childNodes
function traversalByChildNodes(obj){
var ch=obj.childNodes,
result=[];
for(var i=0,j=ch.length;i<j;i++){
result.push(ch[i].nodeName);
if(ch[i].childNodes.length){
result.push.apply(result,traversalByChildNodes(ch[i]));
}
}
return result;
}
测试:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
</style>
</head>
<body>
<div id="test">Test</div>
<div>Hello World</div>
<p>PTest</p>
<script>
console.log(traversalByNextSibling(document));
//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT
//other:["html", "HTML", "HEAD", "#text", "META", "#text", "TITLE", "#text", "#text", "STYLE", "#text", "#text", "#text", "BODY", "#text", "DIV", "#text", "#text", "DIV", "#text", "#text", "P", "#text", "#text", "SCRIPT", "#text"]
console.log(traversalByChildNodes(document));
//IE6-8: #comment,HTML,HEAD,TITLE,META,STYLE,BODY,DIV,#text,DIV,#text,P,#text,SCRIPT
//otehr:["html", "HTML", "HEAD", "#text", "META", "#text", "TITLE", "#text", "#text", "STYLE", "#text", "#text", "#text", "BODY", "#text", "DIV", "#text", "#text", "DIV", "#text", "#text", "P", "#text", "#text", "SCRIPT", "#text"]
</script>
</body>
</html>
在IE6-8中把换行去掉了,在其他浏览器中把换行作为一个文本节点,所以会有很多#text,但IE6-8中出现了#comment我现在也没明白为什么。