位置: 编程技术 - 正文

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语法整理(不宜用于)

  • 企业所得税汇算清缴退税怎么做账
  • 会计二级科目是哪个
  • 固定资产加速折旧的方法有哪些
  • 固定资产账面金额什么意思
  • 期末库存农产品进项转出如何算
  • 销售煤炭增值税怎么算
  • 应交增值税转入其他流动资产
  • 超过五千
  • 解聘职工赔偿工资包括哪些
  • 税控盘减免在哪里填报
  • 同一个单位,应收应付都有,怎么调账
  • 资产负债表应收账款是负数怎么回事
  • 工程哪些材料可以做
  • 直接计入费用的税
  • 坏账准备转回影响应交所得税吗
  • 给对方发短信显示imessage
  • windows10如何开热点
  • 内部控制的类型有哪些
  • 如何申请税务发票
  • json去除某个字段
  • explorer.exe是啥意思
  • win11发布时间正式确定
  • 应交税费进项税额在借方说明什么
  • 外销收入申报表怎么填
  • 土地使用税滞纳金不得超过
  • 材料成本差异如何做账
  • 从事广告代理业工作
  • 实收资本大于注册资本是什么意思
  • 担保公司代偿账户是什么
  • php处理xml
  • 会计政策变更对财务分析的影响
  • conda配置虚拟环境
  • php单例模式什么时候用
  • 大数据投资发展有限公司
  • php目录结构
  • vscode yaml插件
  • 帝国cms如何使用
  • python knn算法和结果
  • sqlserver2019查看表
  • 刻章费用如何做账务处理
  • 工资发放凭证原件指什么意思
  • 民办非企业收到政府拨款分录
  • ERROR CODE: 1175 YOU ARE USING SAFE UPDATE MODE AN
  • 工资与社保缴纳不一致
  • 外购产品对外捐赠的会计处理方法
  • 折旧费用分摊科目是什么
  • 应收账款多记账怎么做调整分录
  • 商品损耗率一般是多少
  • 其他非流动资产减少的原因
  • 营业外收入的账户核算有哪些
  • 新成立的公司怎样建账
  • 融资租赁与经营租赁的区别主要是
  • 业务招待费税务扣除标准
  • 一般纳税人劳务税率是多少?
  • 临时工工资怎么入账合法吗
  • mysql的ip怎么看
  • ubuntu16.04安装拼音输入法
  • 系统之家一键重装系统教程
  • bios识别不了硬盘怎么回事
  • 电脑怎样进入安全模式
  • utilman.exe - utilman是什么进程
  • ubuntu15.04安装教程
  • cpqinet.exe是什么进程 安全吗 cpqinet进程安全性评估
  • centos7.0安装网卡驱动
  • 如何彻底删除超级QQ秀
  • cocos studio
  • js动态表格可修改表格数据
  • jquery实现表单验证
  • 音频焦点图广告
  • MATLAB图像处理实例详解
  • 基于网络创新形成的大数据的最突出特征是什么?( )
  • node.js web开发
  • Unity NGUI Tween的用法
  • jquery图片放大效果
  • jquery中有几种方法可以来设置和获取样式
  • 陕西电子税务局新版
  • 国税补录信息怎么查询
  • 纳税服务的背景是什么
  • 棚户区改造的房子和商品房有什么区别
  • 13%增值税发票怎么抵扣
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设