读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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
js表单验证实例讲解
Mar 31 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
js轮播图代码分享
Jul 14 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
深入理解JS异步编程-Promise
Jun 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
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
canvas知识总结
2017/01/25 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
最小二乘法及其python实现详解
2020/02/24 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
会议邀请函范文
2014/01/09 职场文书
联谊活动策划书
2014/01/26 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
保管员岗位职责
2015/02/14 职场文书
2016国培研修心得体会
2016/01/08 职场文书
素质教育学习心得体会
2016/01/19 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
人民币使用说明书
2019/04/17 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
python通过函数名调用函数的几种方法总结
2021/06/07 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers
MySQL新手入门进阶语句汇总
2022/09/23 MySQL