【前端冷知识】冷门函数之Math.hypot

最近我在做数据可视化和图形图像渲染相关的技术研究，而图形图像涉及到许多几何图形的向量运算，我们求一个向量的模，需要计算每个坐标分量的平方和，然后开根号。

一般来说，我们使用类似如下的代码：

但是，在ES2015中，提供了Math.hypot方法，来计算参数的平方根。

目前除了IE外，其他的浏览器都支持这个方法。

?? 冷知识 —— Math.hypot的坑：你可能会认为Math.hypot是内置函数，它的性能应该要比用Math.sqrt好，但是实际上并不是这样。我们写一段测试脚本：

用jsperf进行测试，结果令人惊讶，在我的Chrome 75下，使用Math.hypot竟然比使用Math.sqrt慢40%左右。

也许是我使用的姿势不对？但是kangax大神早在14年的时候就写过更多case来测试：

结果。。。

所以一个ES2015开始支持的数学函数，又是很常用的运算，却没有多少人使用，也没有多少人介绍它，也是有理由的 —— 性能捉急。

不过hypot性能不如sqrt，也并不意味着它完全不可用。

在某些情况下，使用hypot能得到sqrt无法得到的结果。比如特别大的数或者特别小的数值下：

所以，如果我们要处理很大的数或很小的数时，可以使用Math.hypot，在一般情况下，还是使用Math.sqrt为好。例如：

关于Math.hypot还有什么问题，可以在issue中讨论。

【前端冷知识】冷门函数之Math.hypot相关推荐

这些鲜为人知的前端冷知识，你都GET了吗？
来源:猴哥说前端‍‍‍‍‍‍ 背景最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感 ...
前端里的button怎么去除点击自带边框_前端不为人知的一面--前端冷知识集锦
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
前端wxml取后台js变量值_这些鲜为人知的前端冷知识，你都GET了吗？
背景最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹! 前端可真是博大精深于是 ...
前端不为人知的一面--前端冷知识集锦
转自:http://www.cnblogs.com/Wayou/p/things_you_dont_know_about_frontend.html 前端已经被玩儿坏了!像console.log()可 ...
excel判断字符串包含另一个字符串_【前端冷知识】如何正确判断一个字符串是数值？...
在网页中,我们从用户输入的内容中获取的值通常是字符串,但是有时候我们希望用户输入的内容一定要能转成数值: <input id="userInput"> userInpu ...
canvas刷新_【前端冷知识】Canvas 滤镜的性能优化
最近几天没有及时更新,是因为这几天在忙一个项目mesh.js,这个项目是一个基于Canvas2D和WebGL的跨平台图形系统,提供底层的高性能API,同时也将是未来新版SpriteJS的底层渲染引擎. ...
一个对象的属性_【前端冷知识】如何判断一个对象的某个属性是可写的？
这是一个咋一听好像很简单,但是实际上却没那么简单,而且是很有趣的问题. 我们先来看一下什么情况下一个对象的属性是可写的. "属性可写"这个概念并没有严谨的定义,我们这里先来规定一下 ...
css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画
我们知道,CSS支持将元素的border属性设为虚线,例如: <h1>君喻学堂h1> h1 { border: dashed 1px; } 但是,CSS的虚线样式是固定的,如果我 ...
canvas需要gpu_【前端冷知识】你了解Canvas的渲染上下文吗？
做前端的同学应该都知道,Canvas是浏览器中很重要的一个绘图元素,使用它可以绘制2D图形或者3D图形,要绘制2D或3D图形时,需要获取不同的上下文,最常用的两个上下文是2d上下文和webgl上下文. ...
bootstrap 轮播控制时间_【前端冷知识】如何封装一个图片轮播组件
组件封装是一个前端工程师进阶的必经之路.组件封装是指Web页面上抽出来一个个包含模版(HTML).功能(Javascript)和样式(CSS)的单元.所以,今天的内容,我们将带你了解组件封装的开发思路 ...

【前端冷知识】冷门函数之Math.hypot

【前端冷知识】冷门函数之Math.hypot相关推荐

最新文章

热门文章