作者：EthicalAds译者：前端小智来源：sendilkumarn点赞再看，微信搜索【大千世界】，B站关注【前端小智】这个没有后台大厂，但有上升趋势积极向上的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...作为开发者，我们一直在寻找让我们的代码更快更好的方法。但在此之前，编写高性能代码需要三件事：了解语言及其工作原理基于用例的设计调试！使固定！重复记住这一点任何傻瓜都可以编写计算机可以理解的代码，好的程序员可以编写人类可以理解的代码。-DingFowler让我们来看看如何让JavaScript代码运行得更快。延迟延迟算法将计算推迟到需要时才产生结果。constsomeFn=()=>{doSomeOperation()return()=>{doExpensiveOperation()}}constt=someArray.过滤器（（x）=>checkSomeCondition（x））。map((x)=>someFn(x))//现在如果有需要执行t.map((x)=>t())，最快的代码是未执行的代码，所以尽量延迟执行.JavaScript使用原型继承，JS中的所有对象都是Object的实例。MDN说：当试图访问一个对象的属性时，不仅在对象上搜索该属性，还会在对象的原型、原型的原型等上搜索，直到找到匹配的属性名或原型链的末尾.对于每个属性，JavaScript引擎必须遍历整个对象链，直到找到匹配项。如果使用不当，这可能会占用大量资源并影响应用程序的性能。所以不要这样做：constname=userResponse.data.user.firstname+userResponse.data.user.lastname而是这样做：constuser=userResponse.data.userconstname=user.firstname+user.lastname使用临时变量保存链接属性，而不是遍历访问整个链。使用转译器前请三思在上面的例子中，userResponse可能不是一个对象，如果是一个对象，它的属性user也可能不是一个对象。因此，在获取值时进行检查：.firstname}if(user.lastname){name+=user.firstname}}}这太冗长了。代码越多，bug就越明显。我们可以缩小它吗？当然可以在JS中使用optionalchaining、destructuringassignment来优化。constuser=userResponse?.data?.userconst{firstname='',lastname=''}=userconstname=firstname+lastname是不是很灵活和简短？不要使用这个请注意Babel会像这样进行转换：'usestrict'var_userResponse,_userResponse$datavaruser=(_userResponse=userResponse)===null||_userResponse===void0?void0:(_userResponse$data=_userResponse.data)===null||_userResponse$data===void0?void0:_userResponse$data.uservar_user$firstname=user.firstname,firstname=_user$firstname===void0?'':_user$firstname,_user$lastname=user.lastname,lastname=_user$lastname===void0?'':_user$lastnamevarname=firstname+lastname使用转译时，请确保选择更适合您的用例的转译。奇怪的是了解SMI和堆数字，ECMAScript将数字规范化为64位浮点值，也称为双精度浮点或Float64表示。如果JS引擎以Float64表示存储数字，将导致巨大的性能下降。JS引擎对数字进行抽象，使其行为与Float64完全匹配。JS引擎执行整数运算比float64运算快得多。有时候，为了可读性，我们认为这样写更好：constmaxWidth='1000'constminWidth='100'constmargin='10'getWidth=()=>({maxWidth:maxWidth-margin*2,minWidth:minWidth-margin*2,})计算局部变量如果多次调用getWidth函数，每次调用都会计算它的值。上面的计算没什么大不了的，所以我们不会注意到任何性能影响。但一般来说，运行时的评估次数越少，性能越好。//maxWidth-(margin*2)constmaxWidth='980'//minWidth-(margin*2)constminWidth='80'constmargin='10'getWidth=()=>({maxWidth,minWidth,})使用Map代替switch/if-else条件如果要检查多个条件，可以使用Map代替switch/if-else条件。在Map中查找元素的性能比switch和if-else条件快得多。开关（天）{case'monday':return'workday'case'tuesday':return'workday'case'wednesday':return'workday'case'thursday':return'workday'case'friday':return'workday'case'saturday':return'funday'case'sunday':return'funday'}//或者thisif(day==='monday'||day==='tuesday'||day==='wednesday'||day==='thursday'||day==='friday')return'workday'elsereturn'funday'可以用Map代替constm=newMap([['monday','workday'],['星期二','工作日'],['星期三','工作日'],['星期四','工作日'],['星期五','工作日'],['星期六','基金日'],['sunday','funday']];returnm.get(day);if-else排序在React组件中仍然很常见exportdefaultfunctionUserList(props){const{users}=propsif(users.length){return
