摘要:大话先给大家意淫一下前端的目前的应该是工业革命时代了。即在每个变量名前加上一个或多个字符表示相应的类型。这对于大型查找是非常有好处的。当然,一般的技术人员也不会手贱写这么麻烦的。由于是弱类型的,所以可以直接使用或者进行连续赋值。
大话js
先给大家意淫一下前端的futrue.
目前的JS应该是工业革命时代了。以前js就只是作为什么移动一下图片,更换一下背景颜色等, 比较废的活. 但是现在h5,nodeJS,ECMA-6,gulp,grunt,webpack,react...等等各种框架,工具的出现,基本上颠覆了js的角色。以前js就是作为一个配角,html+CSS才是主要的,现在,你说你写网页的不会用js,呵呵,U ~= 渣渣. 而且庸俗一点来说,现在前端的薪资range应该是其他技术类职业变化最大的,年薪2w+ 到 200w+ 的都有。所以js对于前端来说莫过于一块金子招牌,如果你js真的吃透了,相信你的路真的是太宽了~
意淫完毕,该谈正事了,JS最佳实践应该是很多地方都会提到的。我这里引用的是高级程序设计里面的内容,如有出错的地方,欢迎纠正.
由于js是一门弱类型的语言,所以往往造成了类型的不清楚,有可能胡乱使用不同类型上的方法,导致出错。
所以,一般给js的变量加上一些类型注释是很有好处的。 通常我们会缺少加注释的动力,这样想吧,如果未来的某一天,你需要接手别人的项目的时候,而别人的项目里面一条注释也没有,你的想不想死。。。所以, 有因才有果,一个良好的注释真的很有用.
var found = "s"; //"string" var abc = true; //boolean
这应该算是一种简单的吧
还有一种是匈牙利标记法。即在每个变量名前加上一个或多个字符表示相应的类型。
通常,"o"为对象,"s"为string,"b"为Boolean,"i"表示整数,"a"表示数组等
var sName ="string";
但是由于看起来很丑,推荐只在函数参数里面使用就足够了。
算法的复杂度这也是面试时候会常常问到的。
flag | name | description |
---|---|---|
O(1) | 常数 | 表示不管有多少值,执行的时间都是很定的。表示简单值和存储在变量中的值 |
O(log n) | 对数 | 总的执行时间和值的数量相关,但完成算法不一定获取每一个值,比如二分查找 |
O(n) | 线性 | 执行时间和值的数量直接相关.ex: 遍历数组 |
O(n^2) | 平方 | 总执行时间和数量有关,每个值要获取n次。ex: 插入排序 |
一个一个解释:
O(1)表示你无论有多少值,获取常量值的时间都一样。
var value = 5; var num = value + 4; console.log(num);
上面的复杂度整体为1,因为这只是简单的变量查找。 O(1)的操作还有,数组的读取
var value = [1,2,3,4,5]; console.log(value[1]); //2
同样也是1,不管你是多少次查找都一样。
所以说算法复杂度为O(1)的情况:只有在获取变量以及数组的时候
最常用的是在你进行属性查找的时候。因为查找属性的时候,会遍历所有的对象上的属性,然后才返回。所以他的复杂度为O(n).
var obj = { name:"jimmy", age:19 }; console.log(obj.name);
上面访问obj.name的属性的复杂度为O(n).还有一个例子:
var name = window.location.href.substring(window.location.href.indexOf("."));
可以数一下,上面算法的复杂度为6个O(n)因为存在了6个"."进行属性访问。这种情况下,可以优化一下,使用变量进行保存,要知道变量始终是O(1)的
var href = window.location.href; var name = href.substring(href.indexOf("."));
上面就缩减到了4次".",节约了33%的查询成本。 这对于大型查找是非常有好处的。但是如果你只是一次两次的查找,则使用变量和未使用变量是没有差别的。
另外对于变量的复杂度和属性的复杂度,一般来说,如果可以使用arr[xxx]形式的遍历的话,最好使用。
//jquery对象---$val for(var i = 0;i<$val.length;i++){ $val.eq(i).html(); //输出innerHTML } //优化过后 for(var i in $val){ $val[i].innerHTML; //输出的innerHTML }
-----------分割线----------
这里感谢@Dreamacro 童鞋的提醒。这里特此说明一下,在V8里面引擎对于对象属性的查找其实是O(1)的操作。
(Ps:我操,你到底再说什么鬼)
其实在V8里面对于对象属性的存储同样是散列hash,但是V8就是快,为了实现向java一样的遍历速度,于是做了一点改动。在你每次新建属性的时候,V8会使用hidden class,新建一份原来对象的Copy并且添加上新属性。于是在你下次查找属性的时候他都会直接从这个新建的Class info寻找。 如果你一不小心手贱使用了delete的话,你查找的复杂度便会退化为O(n).
参考: hidden Class, V8引擎对象优化
关于O(log n)和 O(n^2),由于目前对算法不精通,还是别误导人了。
循环优化一个常见的循环
for(var i= 0 ;i这个循环可以,但是不是很高效,因为每一次循环你都会去调用一次nodelist.length这个值,造成了 nodelist.length * O(n)这样一个复杂度. 优化的办法就是将length提出去
for(var i= 0,len = nodelist.length;i上面的循环的复杂度就变为1O(1) + 1O(n); 当然上面那种简单而且更高效.
但是试想一下,如果你在循环体还需要使用nodelist[i]for(var i= 0,len = nodelist.length;i想一想,nodelist[i]乍看起来并不是循环体内所需要的。那我们应该怎么做呢?
很简单,利用null为false的条件自动转换for(var i = 0,node; node = nodelist[i++];){ node... } //当然你也可以直接使用 for(var node of nodelit){ //这种方式更加方便简洁,但是是es6的一个新特性 node ... }另外循坏可以通过以下几个点来进行优化
1.减值迭代
2.简化终止条件 3.简化循环体 4.使用后测试循环--for和while都是前测试循环, do-while是后测试循环减值迭代
: 从最大值开始减值,而不是从最小值减值迭代。简化终止条件
: 即就是想上面例子一样,对终止条件寄存在变量当中.简化循环体
: 这应该是一个复杂的活,简单的就是把不需要参与循环的语句提出来使用后测试
: 这其实就是防止对空值进行循环var len = nodelist.length, i = 0; if(len>0){ do{ ... }while(++i===len); }这一部分可以参考一下Naraku_的读书笔记。
还有一个例子,是我在腾讯面试的时候遇到的。从一篇全英文的文章中找到频率次数最高的单词
这里是我写的一部分代码,可以看一看
Duff优化
筛选单词每次看的时候,都会被他的精髓刺瞎了我24K金钛合金*眼.
将循环次数展开书写
这是Andrew B.King 写出的一个比较著名的Duff装置.将do-while分成两个多带带的循环。简单易懂。var iter = Math.floor(values.length/8); var leftover = values.length%8; var i = 0; if(leftover>0){ do{ process(values[i++]); }while(--leftover>0); } do { process(values[i++]); //8次处理 process(values[i++]); process(values[i++]); process(values[i++]); process(values[i++]); process(values[i++]); process(values[i++]); process(values[i++]); }while(--iter>0);感觉比一般的for循环更加复杂,没错。Duff一般是用来处理比较多的循环次数的时候才会真正显示他的效率。如果你使用的循环次数就50+。那使用for效率会更高一点. 通常我们前端也用不到,因为TM这是给后端用的。
避免双重解释这种情况一般只会发生在3种情况下, 即使用eval,Function,setTimeout里面.
eval("alert("hehe")"); var sayHi = new Function("alert("hehe")"); setTimeout("alert("hehe")",500);以上3中会发生双重解释,原因是,原本的js解析器不能直接解析上面的string字符串,需要额外新开一个解析器来进行解释,导致的结果就是速度被拖屎了。 当然,一般的技术人员也不会手贱写这么麻烦的。
修改alert("hehe"); var sayHi = function(){alert("hehe")} setTimeout(function(){alert("hehe")},500);这样写就没什么问题了。
最小化语句即就是整合语句了。由于js是弱类型的,所以可以直接使用var或者let进行连续赋值。而且这也是JIT编译器帮你干的事.(JIT是一种能让你代码越运行越快的编译器)
//用了5条语句声明5个变量 var count = 5; var color = "red"; var values = [1,2,3]; var now = new Date(); //用了1条语句声明5个变量,注意每个变量用逗号隔开 var count = 5, color = "red", values = [1,2,3], now = new Date();还有就是使用数组和对象字面量
: 因为语句量减少,解析器的压力也减小了// 创建两个对象 ----不好的方式 //one 四条语句 var values = new Array(); values[0] = 123; values[1] = 456; values[2] = 789; //two 四条语句 var person = new Object(); person.name = "jozo"; person.age = 21; person.sayName = function(){ alert(this.name); }; // 创建两个对象 ----推荐的方式 //one 1条语句 var values = [123,456,789] //two 1条语句 var person = { name : "jozo", age : 21, sayName : function(){ alert(this.name); };总的来说, js优化之路漫漫,没有年年月月的积累,是不可能达到什么特别高的level的。所以说,活到老学到老,这是永恒的真理~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/78421.html
摘要:我的是忙碌的一年,从年初备战实习春招,年三十都在死磕源码,三月份经历了阿里五次面试,四月顺利收到实习。因为我心理很清楚,我的目标是阿里。所以在收到阿里之后的那晚,我重新规划了接下来的学习计划,将我的短期目标更新成拿下阿里转正。 我的2017是忙碌的一年,从年初备战实习春招,年三十都在死磕JDK源码,三月份经历了阿里五次面试,四月顺利收到实习offer。然后五月怀着忐忑的心情开始了蚂蚁金...
摘要:前言在编程艺术中初步实现的图片库的总结一中,有很多不足之处比如事件处理嵌套在中,显得如此笨重和屌丝没有对函数进行相应的安全检查等,本篇文章对上述问题做了全面的升级。 前言:在《DOM编程艺术》中初步实现的图片库的总结(一)中,有很多不足之处:比如事件处理嵌套在HTML中,显得如此笨重和屌丝;没有对showPic函数进行相应的安全检查等,本篇文章对上述问题做了全面的升级。--------...
摘要:项目中文字由进行渲染。待触发时,取消中文输入标记,将文字渲染到上。而其中一些有趣的细节实现如文本渲染,对中文笔画分割实现有趣的动画等并没有描写。 导言 目前富文本编辑器的实现主要有两种技术方案:一个是利用contenteditable属性直接对html元素进行编辑,如draft.js;另一种是代理textarea + 自定义div + 模拟光标实现。对于类似word的经典富文本编辑器,...
摘要:在之前的文章中学习了关键字,可以保证变量在线程间的可见性,但他不能真正的保证线程安全。线程执行到指令时,将会尝试获取对象所对应的的所有权,即尝试获得对象的锁。从可见性上来说,线程通过持有锁的方式获取变量的最新值。 在之前的文章中学习了volatile关键字,volatile可以保证变量在线程间的可见性,但他不能真正的保证线程安全。 /** * @author cenkailun *...
摘要:开放封闭原则应该算是这几个原则里面最容易理解的一个。另外,语句就是开放封闭原则的死敌这个是状态模式中的一个例子。处理开放封闭模式的特例我们都是人,不可能一开始都写出完美的代码。 开放-封闭原则应该算是这几个原则里面最容易理解的一个。它的宗旨就是:如果你想扩展或者改变一个程序的功能,可以增加代码,但是不能改变程序的源码。如果,是对于那些码农来说,最快捷的办法就是改变源码,但是我们面向的是...
阅读 2505·2023-04-26 03:00
阅读 1348·2021-10-12 10:12
阅读 4132·2021-09-22 15:33
阅读 2874·2021-09-22 15:06
阅读 1480·2019-08-30 15:44
阅读 2079·2019-08-30 13:59
阅读 504·2019-08-30 11:24
阅读 2349·2019-08-29 17:07