这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了读 Javascript 高性能编程重点笔记, 需要的朋友可以参考下
第一点
- //高效简洁 //低消能
- children //childNodes
- childElementCount //childNodes.length
- firstElementChild //firstChild
- lastEelmentChild //lastChild
- nextElementSibling //nextSibling
- previousElementSibling //previousSibling
第二点:选择器的高效应用
- <div id="footer_bottom">
- <a href="/AboutUS.aspx">
- phperz
- </a>
- <a href="/ContactUs.aspx">
- 联系我们
- </a>
- <a href="/about/ad.aspx">
- 广告服务
- </a>
- <a href="/about/job.aspx">
- 人才服务
- </a>
- ©2006-2016
- <a href="http://www.phperz.com/">
- phperz
- </a>
- </div>
- var aArr1 = document.querySelectorAll("#footer_bottom a"); //简洁高效
- var aArr2 = docuement.getElementById("footer_bottom").getElementsByTagName("a"); //繁杂低效
- //return
- < a href = "/AboutUS.aspx" > phperz < /a>,
- <a href="/ContactUs.aspx ">联系我们</a>,
- <a href=" / about / ad.aspx ">广告服务</a>,
- <a href=" / about / job.aspx ">人才服务</a>,
- //选择第一个子节点
- var a = document.querySelector("#footer_bottom a ");
- //return <a href=" / AboutUS.aspx ">phperz</a>
- //选择多个节点
- var divs = document.querySelectorAll("div.footer,
- div.main,
- div.header ");
- "
注意:大部分浏览器都支持上述属性,IE6,7,8 仅支持 children 属性
减少 DOM 的重新渲染与排版(三种方式)
1. 先将要处理的元素隐藏,然后对其处理,最后显示
2. 创建文件片段的方式(推荐) document.createDocumentFragment();
3. 对要处理的元素克隆一个副本,然后对副本操作,最后将副本替换原本
下面是 phperz 小编的补充
将循环的对象存储
使用前:
- var str = "nanananana";
- for (var n = 0; n < str.length; n++) {}
使用后:
- var str = "nanananana",
- strLgth = str.length;
- for (var n = 0; n < strLgth ; n++) {}
循环对性能的消耗是很大的,将循环的对象存储,减少每次循环都要进行对象的计算。
最小化减少回流和重绘
使用前:
- var coored = document.getElementById("ctgHotelTab");
- document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";
使用后:
- var coored = document.getElementById("ctgHotelTab"),
- offetTop = coored.offsetTop + 35;
- document.getElementById("ctgHotelTab").style.top = offetTop + "px";
来源: http://www.phperz.com/article/17/0511/329308.html