位置: 编程技术 - 正文

Javascript执行效率全面总结(详细说明js的执行过程)

编辑:rootadmin

Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题

Javascript自身执行效率Javascript中的作用域链、闭包、原型继承、eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下。

1、全局导入我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等),了解javascript作用域链的人都知道,在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域,而局部变量的访问效率则会更快更高,因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,例如:2、eval以及类eval问题我们都知道eval可以将一段字符串当做js代码来执行处理,据说使用eval执行的代码比不使用eval的代码慢倍以上(具体效率我没有测试,有兴趣同学可以测试一下)

JavaScript 代码在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。但是,如果你使用了“eval”,则“eval”中的代码(实际上为字符串)无法预先识别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低

其实现在大家一般都很少会用eval了,这里我想说的是两个类eval的场景(new Function{},setTimeout,setInterver)

setTimtout("alert(1)",);setInterver("alert(1)",);(new Function("alert(1)"))();

上述几种类型代码执行效率都会比较低,因此建议直接传入匿名方法、或者方法的引用给setTimeout方法

3、闭包结束后释放掉不再被引用的变量上述代码中变量f的返回值是由一个立即执行函数构成的闭包中返回的方法res,该变量保留了对于这个闭包中所有变量(a,b,c等)的引用,因此这两个变量会一直驻留在内存空间中,尤其是对于dom元素的引用对内存的消耗会很大,而我们在res中只使用到了a变量的值,因此,在闭包返回前我们可以将其它变量释放Js操作dom的效率在web开发过程中,前端执行效率的瓶颈往往都是在dom操作上面,dom操作是一件很耗性能的事情,如何才能在dom操作过程中尽量节约性能呢?

1、减少reflow什么是reflow?当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。

如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。

减少reflow的方法1.先将元素从document中删除,完成修改后再把元素放回原来的位置(当对某元素及其子元素进行大量reflow操作时,1,2两种方法效果才会比较明显)2.将元素的display设置为”none”,完成修改后再把display修改为原来的值3.修改多个样式属性时定义class类代替多次修改style属性(for certain同学推荐)4.大量添加元素到页面时使用documentFragment

例如上述代码会多次操作dom,效率比较低,可以改为下面的形式 创建documentFragment,将所有元素加入到docuemntFragment不会改变dom结构,最后将其添加到页面,只进行了一次reflow2、暂存dom状态信息当代码中需要多次访问元素的状态信息,在状态不变的情况下我们可以将其暂存到变量中,这样可以避免多次访问dom带来内存的开销,典型的例子就是:上述方式会在每一次循环都去访问dom元素,我们可以简单将代码优化如下3、缩小选择器的查找范围查找dom元素时尽量避免大面积遍历页面元素,尽量使用精准选择器,或者指定上下文以缩小查找范围,以jquery为例

&#;少用模糊匹配的选择器:例如$(“[name*='_fix']“),多用诸如id以及逐步缩小范围的复合选择器$(“li.active”)等

&#;指定上下文:例如$(“#parent .class”),$(“.class”,$el)等

4、使用事件委托使用场景:一个有大量记录的列表,每条记录都需要绑定点击事件,在鼠标点击后实现某些功能,我们通常的做法是给每条记录都绑定监听事件,这种做法会导致页面会有大量的事件监听器,效率比较低下。

基本原理:我们都知道dom规范中事件是会冒泡的,也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target(IE下是srcElement)指向事件源,因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素,这就是委托的基本原理。废话不多说,上示例上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件,这样页面上会有大量的事件监听器。

根据上面介绍的监听事件的原理我们来改写一下这样一来,我们就可以只添加一个事件监听器去捕获所有li上触发的事件,并做出相应的操作。

当然,我们不必每次都做事件源的判断工作,可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

语法是这样的$(selector).delegate(childSelector,event,data,function),例如:

$("div").delegate("button","click",function(){ $("p").slideToggle();}); 参数说明(引自w3school)参数描述childSelector必需。规定要附加事件处理程序的一个或多个子元素。event必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。data可选。规定传递到函数的额外数据。function必需。规定当事件发生时运行的函数。

Tips:事件委托还有一个好处就是,即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦,这样就不用在每次动态加入元素到页面后都为其绑定事件了。

推荐整理分享Javascript执行效率全面总结(详细说明js的执行过程),希望有所帮助,仅作参考,欢迎阅读内容。

Javascript执行效率全面总结(详细说明js的执行过程)

文章相关热门搜索词:javascript执行机制,javascript执行函数,javascript执行函数,js 执行命令,js的执行,详细说明js的执行过程,javascript执行效率,javascript执行函数,内容如对您有帮助,希望把文章链接给更多的朋友!

种不宜使用的Javascript语法整理 1.==Javascript有两组相等运算符,一组是==和!=,另一组是===和!==。前者只比较值的相等,后者除了值以外,还比较类型是否相同。请尽量不要使用前一组

js转义字符介绍 ""转义:""转义:

提取字符串中年月日的函数代码 varstr="sfsfsfdf年sfsdfsf月随碟附送lfs日";str.match(/d{4}年[]?d月[]?d日/g)[0];match方法得到的是一个数组

标签: 详细说明js的执行过程

本文链接地址:https://www.jiuchutong.com/biancheng/376085.html 转载请保留说明!

上一篇:文档对象模型DOM通俗讲解(文档对象模型DOM主要作用是)

下一篇:12种不宜使用的Javascript语法整理(不宜用于)

  • 免税肉类主要品种目录
  • 税控盘抄报逾期怎么办
  • 社保退回来的钱怎么做账
  • 资产负债表怎么填
  • 对方发票没交税怎么办
  • 成本结转的方法能用百分比法吗
  • 个人取得哪项收入需要缴纳个人所得税
  • 软件使用费的税率是多少啊
  • 利息股息红利所得个人所得税税率
  • 缴纳文化事业建设费的范围
  • 开专票都需要什么资料
  • 核定征收是每个月都要交税吗
  • 代扣代缴企业所得税申报期限
  • 股权转让个税是转让方交吗
  • 公司使用个人车辆费用是多少
  • 计提销项税的同类有哪些
  • 货物进出口代理公司
  • 农产品发票有抵税吗
  • 金融业营业税改增值税
  • 员工报销医药费计入什么费用
  • 以旧翻新视频
  • 奖金属于工资吗?要交税吗?
  • 只开发票没有合同需要缴纳印花税吗?
  • 电脑主板bios设置
  • 物业公司预收款增值税纳税义务发生时间
  • Laravel 5.5中为响应请求提供的可响应接口详解
  • 其它应收款的内容
  • 会计准则新规
  • 本期销售的单位成本怎么算
  • yolov5源码讲解
  • 前端项目和后端项目
  • pytorch新手入门
  • 未确认融资费用账务处理
  • 外贸企业出口退税申报流程
  • 跨年度的利息收入怎么做账
  • 公司租用员工的车辆交什么税
  • phpcms模板制作教程
  • 客户多付款不要了,多出这部分是哪种收入
  • 公司年度汇算
  • 汽车维修企业怎么认定小微企业
  • 水利基金可以不计提吗
  • 买手机手续费怎么算的
  • 2021年废铁回收
  • 银行开户费属于现金流量表的哪一类
  • 季度所得税申报表营业收入怎么填
  • 库存现金太多违反什么规定
  • 专利年费计入哪里
  • 员工多交个税企业就少交所得税吗?
  • 人力资源社保代缴
  • 递延收益按多少折算
  • 长期股权投资应计提减值准备的金额
  • 堤防维护费税率
  • 专项补助资金的账务处理
  • 购销合同交的印花税税率
  • 累计盈余下级科目
  • 销售如果对待不同客户
  • 营业收入净额怎么算出来
  • 凭证填制的标准要求
  • 个人独资企业交什么税
  • sql server修改数据表
  • window10怎么window7
  • 通过扣缴义务人申报和综合所得年度自行申报
  • windows8怎么用
  • 系统安装驱动卡住了
  • linux安装php7.3
  • win8 更改电脑设置
  • 深入理解rcu
  • 20150405农历
  • 获取本机ip地址命令
  • 欢迎使用来电提醒业务是什么意思
  • perl 排序
  • unity自动寻路
  • python如何搭建环境
  • js实现网页收藏的方法
  • jquery控制display属性
  • 印花税没有做税种认定
  • 生产变压器有什么危害
  • 于开年 山东省国家税务局
  • 上海市松江区房价?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设