javascript性能优化四 之堆栈中js执行过程等

最新推荐文章于 2024-04-16 21:26:12 发布
最新推荐文章于 2024-04-16 21:26:12 发布
阅读量285 收藏 3
点赞数 3
分类专栏： 笔记 文章标签： 面试 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinshengnan520/article/details/109080142
版权

JSBench的使用
jsperf已经停止维护了，介绍一个新的www.jsbench.me性能测试网站
在这里插入图片描述
堆栈中的JS执行过程
在这里插入图片描述
通过画图的方式走一遍上面代码块的流程
当浏览器真正要执行代码的时候肯定有一个执行上下文的环境的ECStack,用于存放执行上下文。
在这里插入图片描述
Js代码在开始执行之后首先会在堆内存里创建一个执行环境栈，然后用他来存放着不同的执行上下文，代码从上往下执行最先创建的是应该是EC(G全局执行上下文)，在下面把代码都执行了申明和存放，基本数据类型是存放在栈内存里的，而对于引用类型来说是存放在堆区里面的。一般是GC来回收处理的，而栈内存里的出栈是主线程管理的。每当遇到函数声明的时候会重新生成一个执行上下文进栈，代码执行完成后由是否产生了闭包来决定当前引用的堆是否要被释放掉
减少判断层级
在这里插入图片描述
判断逻辑简化，把无效的条件提前return掉，这样的话就不会有这么多的嵌套
在这里插入图片描述
在jsbench里测试一下两个执行的速度
在这里插入图片描述
ops值越大速度越快

减少作用域链查找层级
在这里插入图片描述
优化只需要在name前加上var,变成局部的，让作用域查找的时候，减少向上查找的操作
在这里插入图片描述
在这里插入图片描述
这么小的改动对性能的变化还是挺大的
这是建 立在关注速度的情况下来说，下面的写法快一点，但是对内存来说第一种写法是好一点的。第二种会重新开辟一个空间来存放name的。如果name非常大的话，会发现第一种写法更节省空间一些，如果没有闭包的引用，GC也会回收，这个空间的占用也是暂时的。所以得看情况用哪一种

减少数据读取次数
在js中我们经常用到的数据表现形式主要 分为字面量，局部的变量以及数组元素和对象属性这四种。
访问字面量和局部的变量速度是最快的，因为是直接存放在栈区中的，而访问数组元素和对象成员稍慢一些，这是因为要按照引用的关系先要找到在堆内存的位置，例如对象属性的访问在操作的时候还要考虑到原型链上的查找。
在这里插入图片描述
改造后
在这里插入图片描述
在这里插入图片描述
差异还是比较明显的，所以把频繁使用的值进行一次缓存

字面量与构造式
不同的数据声明方式和性能的关系，因为在很多时候让编码的时候采用数据量的方式代替构造的方式去声明，对这两种进行个测试
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
用来构造函数类型的比字面量要慢一点，再来对比一下字符串
在这里插入图片描述
在这里插入图片描述
这差异也太大了，上一个是引用类型的时候差距还没这么大，针对这种基本数据类型的值千万不要用构造式去定义

减少循环体中活动
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
再来和while对比 呢
在这里插入图片描述
在这里插入图片描述
While的速度更快，for从前向后找，while是从后向前找的，当小于0的时候结束，从后向前可以少做很多判断

减少声明及语句数
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在代码执行之前肯定要有个编译的过程，虽然js是一门解释型的语言，但真正运行之前肯定还会有一个编译的过程的，向上面代码量多一些，而且在做词法分析的时候遇到这些关键字的时候会根据一些规则进行拆分，要拆出w,空格，=号之类的都要拎出来变成词法单元，还要做语法分析，最终变成语法树，有了抽象的语法树之后转成代码，然后再执行。所以这个过程的时间消耗浪费在这里了。而下面的方法只要对ele做个词法分析就ok了
个人觉得不大量使用的时候，要减少声明。。。。

惰性函数与性能
在这里插入图片描述
改造后
在这里插入图片描述
在这里插入图片描述
第一种反而快一点，而且快好多，。第二次我们采用了惰性函数，认为是一种比较高级的语法对代码进行了优化，优化的是对判断次数的减少，下一次进来就不需要再对addEvent进行赋值了，结果反而是没做优化的快一些
在这里插入图片描述
所以得看优化做的啥，如果多调用几次，应该就能看出来优化的效果
在这里插入图片描述
尴尬了还是很慢，速度慢但是也不是否认惰性函数的思想不好，只是说基于这个场景不适用

采用事件绑定
在这里插入图片描述
改造后
在这里插入图片描述

小濠子
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jsperf-tutorial:bookmarklet 在 jsPerf.com 上运行教程
06-03
使用在主页上运行教程的书签。 如果您不知道，jsPerf 是一个 croud-sourced JavaScript 速度测试站点。 如果您想将一个函数与另一个函数进行基准测试或寻找新的、更快的方法，这会很有帮助。 免责声明：本项目未连接到 jsPerf 或维护者。 用法 在 Windows Firefox、Chrome、IE10 上测试。 图形说明 将书签添加到您的书签工具栏（IE 中的“收藏夹”）： [removed](function(){var e=document.createElement("SCRIPT");e.type="text/javascript";e.src="//tombyrer.github.io/jsperf-tutorial/jsperf-tutorial.js";document.getElementsByTagName("body")[0].a
JavaScript性能优化5——JSBench工具的使用
JIZQAQ学习&踩坑笔记本
06-06 983
一、JSBench是什么 根据官方的 Jsbench.me 是 JavaScript 的性能基准测试平台，深受 jsperf.com 和 jsfiddle.net 的启发和影响。 它使用 Benchmarkjs.com 来执行测试套件。 执行并比较不同 JavaScript 代码片段的执行速度。 通过简单而简短的 URL 与他人在线共享和协作。 ...
2024年前端开发者需要知道的34种JS优化技巧，2024年最新2024Web前端开发现状分析
最新发布
m0_63174811的博客
04-16 923
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。
代码优化介绍
weixin_56848461的博客
06-28 220
代码优化介绍
JavaScript 性能优化2
weixin_45345105的博客
11-23 187
JSBench 使用 https://jsbench.me/ 堆栈中的 JS 执行过程 普通值存放栈内存，引用类型堆内存GC负责回收 减少判断层级 在我们编写的过程中，有可能会出现判断条件嵌套的场景，而往往这种场景都可以提前 return 掉那些无效的条件来达到嵌套层级的优化效果。 // 嵌套 IF function doSomething(part, chapter) { const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']
JavaScript性能优化【下】--性能优化的具体方式
zimeng303的博客
11-13 230
代码优化 如何精准测试 JavaScript 性能 本质上就是采集大量的执行样本进行数学统计和分析。 使用基于 Benchmark.js 的 jsben.ch、jsbench.me、measurethat.net、jsperf.com（四者选其一即可）完成。 代码优化的方式 慎用全局变量 为什么慎用全局变量 1）全局变量定义在全局执行上下文，是所有作用域链的顶端； 2）全局执行上下文一直存在于上下文执行栈，直到程序退出； 3）如果某个局部作用域出现了同名变量则会遮蔽或污染全局。 下面，我们使用 js
【JavaScript源代码】详解JavaScript中的执行上下文及调用堆栈.docx
12-29
理解执行上下文和调用堆栈对于调试、性能优化和编写高效JavaScript代码至关重要。它们帮助开发者追踪代码的执行路径，尤其是在处理异步操作、闭包和作用域时。通过深入学习这些概念，开发者可以更好地控制代码的执行...
JS性能优化笔记搜索整理
10-26
JavaScript性能优化是提升网页或应用运行效率的关键技术。以下是对标题和描述中提及的几点优化策略的详细说明： 1. **简洁的代码**：优化代码结构，如将`x = x + 1`简化为`x++`，减少不必要的运算。 2. **简洁的...
isomorphic-js:探索如何使用 Mustache 创建同构 javascript 堆栈的示例
06-17
2. **首屏性能**：用户在页面加载时就能看到完整渲染的HTML，无需等待JavaScript执行。 3. **更好的用户体验**：对于没有JavaScript或者JavaScript禁用的用户，同构应用依然可以提供基本的功能。 4. **代码复用**：...
javaScript优化策略
09-14
JavaScript优化策略是提高网页和应用程序性能的关键，尤其是在JavaScript执行效率方面。以下是一些关键的优化策略...同时，理解并应用编译器的优化技术，如尾调用优化、树摇优化等，也是提升JavaScript性能的重要手段。
Angular.JS_practice:在我寻求成为平均堆栈开发人员的过程中
06-04
在实践AngularJS时，你可能遇到的挑战包括性能优化（如使用`$digest`循环的最小化）、单元测试、以及与后端API的集成等。要成为一名全栈开发者，你也需要掌握Node.js、Express.js、MongoDB等后端技术，以及相关的...
jsbench-me:jsbench.me-JavaScript性能基准测试游乐场
05-26
随着用户数量的增加，托管成本也在增加。 请考虑支持该项目，以避免广告或付费功能。 Patreon链接在右侧。 谢谢你！ jsbench.me-JavaScript性能基准测试游乐场 这是项目的公共和。 Jsbench.me是JavaScript的性能基准测试场，受到jsperf.com和jsfiddle.net的极大启发和影响。 它使用Benchmarkjs.com执行测试套件。 现在，您可以执行和比较不同JavaScript代码段的执行速度，还可以通过简单和简短的URL共享它并与其他人在线协作。 特征： 免费使用 在Suitecase中创建多个测试。 排序和调整大小测试 运行个别测试 “ Setup JavaScript”和“ teardown JavaScript”将在每次测试运行之前和之后执行。 “设置HTML”以测试DOM操作。 通过“设置HTML”中的简单<SCRI
jsbenchit:一个使用基准来存储基准JavaScript基准静态页面网站
05-07
JSBenchIt 参见 基于Github GistsJavaScript性能测试器。 这是您的数据！ :smiling_face_with_heart-eyes: 文件 为什么？ JSPerf消失了，很难读懂JSBench.me。 JSBen.ch有问题，不能保存多于少量的文本。 在我看来，这可能并不难（著名的遗言 :grinning_face_with_sweat: ）。 无论如何，这都是开源的，因此欢迎您提供帮助。 去做 支持异步测试吗？ 最简单的方法是，如果要返回承诺的代码是异步的。 不过，异步测试的一个好例子是什么？ 也许测试将数据传递给工作人员并返回？ 支持github登录而不是使用个人访问令牌？ 我最初没有这样做是因为在中间没有服务器的情况下无法使用github登录。 如果服务器唯一要做的就是执行oauth重定向，则添加服务器可能很简单。 我只是担心维护和成本。 移动格式 除了检查它似乎可以运行并且不会太混乱之外，我并没有真正为移动格式化而烦恼。 让您删除要点吗？
jsPerf初探
01-05 616
在前端开发中，解决一个问题常常有多钟方案可以实施。然而那种方案是最佳的。这就是为什么使用jsPerf的原因了。 jsPerf是一个解决方案对比，性能比较的平台。其官网的地址为：http://jsperf.com/，下面将介绍如何用jsperf进行代码测试。 进入官网后，出现是一个表单，每个表单的作用如下： Your details (optional)：（用户信息） Test cas
JavaScript 性能优化
qq_45487080的博客
07-21 289
代码优化 如何精准得测试js性能 采集大量得执行样本进行数学统计和分析 1. Benchmark npm i benchmark 越大性能越好（Ops/sec） const Benchmark = require('benchmark'); const suite = new Benchmark.Suite; suite .add('RegExp#test', function () { // 这里放入对比代码 }) .add('String#indexOf', fun
JavaScript性能优化怎么实现？12种优化方式你知道嘛
肥晨开发的学习之路
06-27 1527
在处理一些高频触发的事件（如resize、scroll）时，使用节流（throttling）和防抖（debouncing）可以限制事件处理函数的执行频率，提高性能。对于涉及大量计算或耗时操作的任务，可以将其放入Web Worker中，在后台线程中运行，避免阻塞主线程，提高页面响应性能。将事件监听器绑定到父元素，利用事件冒泡机制来处理子元素的事件，可以减少事件处理函数的数量，提高性能。延迟加载非关键的资源（如图片、脚本等），在用户需要时再进行加载，减少页面初始加载时间，提高用户体验。
js垃圾回收（引用计数算法、标记清除算法、v8垃圾回收机制、浏览器性能监控、任务管理器、内存分析、JSBench）
AIWWY的博客
01-13 640
js垃圾回收（引用计数算法、标记清除算法、v8垃圾回收机制、浏览器性能监控、任务管理器、内存分析、JSBench）
18 个JS优化技巧，可以解决 90% 的屎山代码！！！
轻风细雨_林木木
08-03 510
/ 传统对象创建 const person = {// 对象字面量简化 const firstName = 'John';
JavaScript性能优化(内存管理中的代码优化)
weixin_41962912的博客
11-27 312
文章说明：本文章为拉钩大前端训练营所做笔记和心得，若有不当之处，还望各位指出与教导，谢谢 ! 一、避开闭包陷阱 闭包特点 外部具有指向内部的引用 在‘‘外’’部作用域访问“内部”作用域的数据 function foo(){ var name = 'lg' function fn(){ console.log(name) } return fn } var a = foo() a() 闭包是一种强大的语法 闭包使用不当很容易出现内存泄漏，...
V8中HelloWorld的执行过程-part41
08-04
Prologue是执行过程的起点，主要负责设置执行上下文，包括堆栈帧的初始化、保存必要的状态信息以及为即将执行的函数做好准备。例如，它会分配空间来存储局部变量，并确保正确地跟踪作用域链。对于`HelloWorld!`这样...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值