读Javascript高性能编程重点笔记


Posted in Javascript onDecember 21, 2016

第一点

//高效简洁                     //低消能
children




        //childNodes
childElementCount            //childNodes.length
firstElementChild              //firstChild
lastEelmentChild              //lastChild
nextElementSibling           //nextSibling
previousElementSibling       //previousSibling

第二点:选择器的高效应用

<div id="footer_bottom">
<a href="/AboutUS.aspx">三水点靠木</a><a href="/ContactUs.aspx">联系我们</a><a href="/about/ad.aspx">广告服务</a><a href="/about/job.aspx">人才服务</a>©2006-2016 <a href="https://3water.com/">三水点靠木</a>
</div>
var aArr1= document.querySelectorAll("#footer_bottom a");//简洁高效
var aArr2 = docuement.getElementById("footer_bottom").getElementsByTagName("a");//繁杂低效

//return 
<a href="/AboutUS.aspx">三水点靠木</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">三水点靠木</a>

//选择多个节点
var divs = document.querySelectorAll("div.footer,div.main,div.header");

注意:大部分浏览器都支持上述属性,IE6,7,8仅支持children属性

减少DOM的重新渲染与排版(三种方式)

1.先将要处理的元素隐藏,然后对其处理,最后显示

2.创建文件片段的方式(推荐) document.createDocumentFragment();

3.对要处理的元素克隆一个副本,然后对副本操作,最后将副本替换原本

下面是三水点靠木小编的补充

将循环的对象存储

使用前:

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";
Javascript 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JavaScript严格模式详解
Jan 16 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
three.js中文文档学习之创建场景
Nov 20 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 #Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 #Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 #Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 #Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 #Javascript
详解jQuery选择器
Dec 21 #Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
You might like
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
对比分析json及XML
2014/11/28 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python中实现的RC4算法
2015/02/14 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
python使用matplotlib画饼状图
2018/09/25 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python如何实现转换URL详解
2019/07/02 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
详解Django中异步任务之django-celery
2020/11/05 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
公司老总年会致辞
2015/07/30 职场文书