Javascript性能优化【内联缓存】 V8引擎特性

javascript 是单线程、动态类型语言,那么我们在编码时候如何编写性能最优代码呢?下面将讲解V8引擎的内联优化。利用内联缓存这个特性我们可以编写更加优秀的代码。

什么是内联缓存

引用官方的描述:内联缓存(Inline caching)是部分编程语言的运行时系统采用的优化技术,最早为Smalltalk开发。内联缓存的目标是通过记住以前直接在调用点上方法查询的结果来加快运行时方法绑定的速度。内联缓存对动态类型语言尤为有用,其中大多数(如非全部)方法绑定发生在运行时,因此虚方法表通常无法使用。

  • 我们可以理解为javascript每一次的栈执行遇到调用外部函数、对象时候都产生地址缓存记录,下回执行到这个位置时候直接从缓存中取出对应记录,省去重新查找这一过程从加快程序执行速度。

转换成代码

模拟计算逻辑(伪代码)

为了更好提现出现内联缓存的优化,我们把对象所有方法逻辑为一致。

        let value = 0const Calculator = {add1(val) {value += val},add2(val) {value += val},add3(val) {value += val},add4(val) {value += val},add5(val) {value += val},add6(val) {value += val},add7(val) {value += val},add8(val) {value += val},add9(val) {value += val},add10(val) {value += val}}

####### 不实用内联优化策略的代码

		function notOptimization(val, type) {Calculator[type](val) // 动态执行函数,当前调点无法确定地址}const CalculatorKey = Object.keys(Calculator)console.time('notOptimization')for(let i = 0; i < 1000000; i ++) {const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]notOptimization(1, key)}console.timeEnd('notOptimization')

上面这段代码使用哈希快速查找对应函数,但是放弃内联缓存策略。代码5次执行结果,平均为80ms左右
在这里插入图片描述
####### 使用内联缓存策略代码

        function optimization(val, type) {if (type === 'add1')Calculator.add1(val)else if (type === 'add2')Calculator.add2(val)else if (type === 'add3')Calculator.add3(val)else if (type === 'add4')Calculator.add4(val)else if (type === 'add5')Calculator.add5(val)else if (type === 'add6')Calculator.add6(val)else if (type === 'add7')Calculator.add7(val)else if (type === 'add8')Calculator.add8(val)else if (type === 'add9')Calculator.add9(val)elseCalculator.add10(val)}const CalculatorKey = Object.keys(Calculator)console.time('optimization')for(let i = 0; i < 1000000; i ++) {const key = CalculatorKey[Math.floor(Math.random() * CalculatorKey.length)]optimization(1, key)}console.timeEnd('optimization')

这段代码用了多层if else 进行函数调用(为了提现内联缓存策略的优化,正确应该用switch或数组查找),我们看看执行5次结果,速度为55~50ms
在这里插入图片描述

总结,所以在编码过程我们尽量少使用动态调用运算,但是相对对象属性值获取哈希、数组的方式是远远快于if、switch的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/563843.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bootstrap 垂直居中 布局_CSS3 flex 布局必须要掌握的知识点

flex 布局已经流行好久了&#xff0c;从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;)&#xff0c;到后来的各种兼容写法&#xff0c;再到后来基本上就是只用 flex 了。毕竟标准就是标准&#xff0c;虽然有时候会迟到&#xff0c;但是最终肯定还…

关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查

前言 最近使用React开发微信H5搜索框自动聚焦功能&#xff0c;发现路由跳转页面后无法自动聚焦。尝试了各种方法均不生效…后来发型是异步加载组件问题&#xff0c;个人估计是微信浏览器在异步组件加载完成后导致节点失焦。 尝试过的解决方法 input 属性 autofocus —— 不生…

如何在代码中让按钮高亮_各种博客的代码高亮是如何实现的

本文来自 「Vue虚拟实验」的小伙伴 余xiaoy&#xff0c;在做 Lovue 项目的时候&#xff0c;他负责了代码高亮显示功能&#xff0c;目前实现了代码高亮、主题切换、某行代码特殊显示、显示行号等功能&#xff0c;效果如下。下面介绍如何通过 Vue 来完成这个功能&#xff1a;Vue…

解析 react、vue等路由参数的库 path-to-regexp

React-router的路由系统内部中使用的是 path-to-regexp 解析匹配路由参数。具体用法如下 const { pathToRegexp } require("path-to-regexp")const regexp pathToRegexp("/:foo/:bar"); // keys [{ name: foo, prefix: /, ... }, { name: bar, prefix:…

如何把表格做成源代码_他来了,他来了,文字、表格、公式图片识别神器V0.1测试版...

他来了&#xff0c;他来了&#xff0c;Mathpix拜拜了~~~文字、表格、公式图片识别神器V0.1测试版俺不是标题党&#xff01;&#xff01;&#xff01;开发背景日常工作中经常遇到大量的图片版文本、表格、公式需要编辑&#xff1b;用手敲&#xff1f;也太OUT了吧&#xff0c;好歹…

交叉渡线道岔规格_交叉渡线道岔选择基本原则

交叉渡线道岔简介道岔是由一条线路分支进入或超越另一条线路的连接及交叉设备分支。道岔是铁路轨道结构中必不可少的一个重要组成部分。各国铁路道岔与线路的比例&#xff0c;随铁路运量、密度的不同而有很大差异。我国是铁路运量、密度较大的国家之一&#xff0c;因此我国铁路…

Jest 只MOCK模块中的某个功能实现

单元测试某些场景下只想模拟模块中的某个功能&#xff0c;并且保留模块原有的功能。这时候我可以用 jest.requireActual 配合 jest.mock 进行实现。 jest.requireActual 该API返回实际模块而不是模拟模块&#xff0c;绕过所有有关该模块是否应接收模拟实施的检查。为什么用 je…

离线登陆_iphone手机,苹果手机如何登陆网易163邮箱

在使用iPhone系统邮箱的时候&#xff0c;我们在配置的时候可能会遇到各种各样的问题&#xff0c;导致无法在系统邮件里面使用163邮箱。主要是手机客户端的密码和网页登陆的密码是不一样的。常见问题下面就是有人在使用的时候遇到的问题&#xff1a;登陆密码错误有人知道怎么在i…

jest 单元测试模拟模块设置动态值

在单元测试中需要对组件进行动态、极端、正常状态测试&#xff0c;如果组件里使用了api那么我们想对组件进行接口多种不同响应进行测试时候就需要对模块进行动态值设置。 mockFun.mockImplementation 接受应作为模拟的实现使用的函数。模拟本身仍然会记录所有进入的调用以及来…

Vue 封装echarts饼状图(Pie)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 效果显示&#xff1a; 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title"><div>{{ title }}</div>…

积分上下限无穷_数学分析|第九章 定积分利用等价无穷小量和定积分定义解决数列极限问题总结...

当公式或文字展示不完全时&#xff0c;记得向左←滑动哦&#xff01;摘要&#xff1a; 当我们利用等价无穷小量时&#xff0c;不仅仅可以利用等价替换&#xff0c;有的时候我们需要利用极限的定义语言来解决问题&#xff0c;当等价无穷小量和连加数列结合在一起时&#xff0c;虽…

React 性能优化之批量处理 unstable_batchedUpdates

手动批量处理 unstable_batchedUpdates 可用于手动批量更新state&#xff0c;可以指定多个setState合并为一个更新请求。 import { useState, useLayoutEffect } from "react"; import { unstable_batchedUpdates } from "react-dom";function App() {con…

关于配置Webapck的 exclude 不过滤 node_modules Babel却没有处理转换node_modules的源码

最近对公司的项目引入了 nanoid 替换 uuid 的使用。但是在sentry日志中发现Unexpected token >的错误。立马查看编译后bunld发现 nanoid 箭头函数没有被转换。所以对此记录一下原因和解决办法。 报错的原因 1.nanoid 源码是没有经过babel转换的。 查看nanoid的源码&#x…

python语言中的注释符_各种语言中的注释符总结

各种语言中的注释符c语言/* 注释内容*/// 注释内容Pascal&#xff1a;{ 注释内容}Vb&#xff1a;Rem 注释内容‘注释内容Vbscript&#xff1a;‘注释内容rem 注释内容Javascript&#xff1a;// 注释内容/* 注释内容*/Java&#xff1a;// 注释内容/* 注释内容*/Delphi&#xff1…

关于 Taro 的 ScrollView 在Dom结构发生变化会自动回滚到顶部解决方案和原因

使用Taro开发小程序时候发现 ScrollView 会在同级节点发生增删情况下会自动会滚ScrollView到顶部&#xff0c;经过多次验证和查阅Taro原理发现这是Taro自身bug 出现回滚顶部bug的演示代码 下面有一个列表和按钮&#xff0c;点击按钮会出现加载更多的字样。但是当我们点击按钮时…

android 贝塞尔曲线_OpenGL 实践之贝塞尔曲线绘制

说到贝塞尔曲线&#xff0c;大家肯定都不陌生&#xff0c;网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图。以下两个是比较经典的动图了。二阶贝塞尔曲线&#xff1a;三阶贝塞尔曲线&#xff1a;由于在工作中经常要和贝塞尔曲线打交道&#xff0c;所以简单说一下自己的…

Node.js Event loop 图解

直接上自己制作的流程图

支持串行隔离级别_从0到1理解数据库事务(上):并发问题与隔离级别

最近准备写一篇关于Spanner事务的分享&#xff0c;所以先分享一些基础知识&#xff0c;涉及ACID、隔离级别、MVCC、锁&#xff0c;由于太长&#xff0c;只好拆分成上下两篇&#xff1a;上&#xff1a;并发问题与隔离级别主要讲事务所要解决的问题、思路&#xff0c;先理解为什么…

mysql_unbuffered_query的_用mysql_unbuffered_query函数取大数据

昨天在做项目的时候&#xff0c;因为涉及到数据表结构的改动&#xff0c;需要进行大量数据的导入&#xff0c;那么如何高效的进行是我比较关注的。本文暂且从使用PHP脚本层面上来说&#xff0c;因为使用其他语言或其他方式也可以进行数据的重导。 在讨论这个问题的时候&#xf…

如何发布接口_Devops下的接口全生命周期管理与测试

什么是devops&#xff1f;随着时间的推移&#xff0c;devops的定义也在不断的演进。对于其定义可能出现千人千面&#xff0c;但从核心观点&#xff0c;整体业界还是保持着一致的认识。DevOps不是单一的技术或者工具&#xff0c;甚至不只是一个流程&#xff0c;而是包含应用设计…