記事の説明:この記事は、レガオのフロントエンドトレーニングキャンプのメモと経験です。何か問題がある場合は、指摘して教えていただければ幸いです。ありがとうございます。
1つはJSBenchの使用
JSperfと比較して、JSBench(https://jsbench.me/)はより強力な包括的なパフォーマンスを備えています。
分解:最後の仕上げを行います。たとえば、データベースに接続した後、データの操作が終了したら、接続を解放する必要があります。通常、jsコードが実行された後、呼び出す関数操作は同じであり、ユースケースでそれらを記述する必要がないため、それらを抽出してTeardownに配置するだけで十分です。
テストするときは、タブを1つだけ開くようにしてください。
次に、スタック内のJS実行プロセス
let a = 10;
function foo(b){
let a = 2
function baz(c){
console.log(a+b+c)
}
return baz
}
let fn = foo(2)
fn(3)
jsコードの実行が開始されると、最初にヒープメモリに実行環境スタックが作成され、次にそれを使用してさまざまな実行コンテキストが格納されます。コードは上から下に実行されます。最初に作成するのは、グローバルコンテキストであるECGです。ここでは、グローバルスコープでいくつかのコードを宣言して格納し、次に、直接である基本的なデータ型の値があります。スタックに格納されます。メモリ内および参照型の場合、それらはヒープ領域に格納されます。これは通常、GCによってリサイクルされ、スタック領域内のものは現在のjsマスターによってスタックからプルされる必要があります。関数の実行が発生すると、実行コンテキストが再生成され、スタックにプッシュされます。コードが実行された後、クロージャを生成するかどうかによって、現在のコンテキストで参照されているヒープを解放する必要があるかどうかが決まります。
第三に、判断のレベルを下げる
function doSomething(part,chapter){
const parts = ['ES2016','工程化','Vue','React','Node']
if(part){
if(parts.includes(part)){
console.log('属于当前课程')
if(chapter >5){
console.log('您需要提供 VIP 身份')
}
}
} else {
console.log('请确认模块信息')
}
}
// doSomething('ES2016',6)
function doSomething(part,chapter){
const parts = ['ES2016','工程化','Vue','React','Node']
if(!part){
console.log('请确认模块信息')
return
}
if (!parts.includes(part)) return
if(chapter > 5){
console.log('您需要提供 VIP 身份')
}
}
doSomething('ES2016',6)
第四に、スコープチェーンのルックアップレベルを下げる
// var name = 'zce'
// function foo(){
// name = 'zce666' //这里的Name是属于全局的
// function baz(){
// var age = 38
// console.log(age)
// console.log(name)
// }
// baz()
// }
// foo()
var name = 'zce'
function foo(){
var name = 'zce666' //这里的Name是属于全局的,当前面加var时,此时的name就不用了再往外查找了
function baz(){
var age = 38
console.log(age)
console.log(name)
}
baz()
}
foo()
5、データ読み取りの数を減らします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
<title>减少数据读取次数</title>
</head>
<body>
<div id="skip" class="skip"></div>
<script type="text/javascript">
var oBox = document.getElementById('skip')
// function hasEle(ele,cls){
/*若是按照ele.className这样写的话,相当于每次使用数据的时候都要去查询一下,如果这个查询的属性在我们当前对象里面又进行了嵌套,
层级非常的深,这时候所消耗的时间就非常的多,所以考虑把ele.className缓存起来*/
// return ele.className === cls
// }
function hasEle(ele,cls){
var clsname = ele.className//只需读取一次缓存起来
return clsname === cls
}
console.log(hasEle(oBox,'skip'))
</script>
</body>
</html>
この種の速度は、依然としてスペース消費の前提に基づいており、参照タイプの場合、比較的大きなスペースです。複数回読み取る必要がある場合は、可能な限りキャッシュしてください
6、文字通りの量と建設的な式
let test = () =>{// 把创建对象步骤放到函数里面,用new关键字构造函数的方式来创建obj
let obj = new Object()
obj.name = 'zce'
obj.age = 38
obj.slogan = '我爱你'
return obj
}//做这个操作的时候好比调用一个函数,涉及到了函数的调用,所以它事情就做的更多一些,时间就消耗的多一些,扩容的时候这种方法更好一些
let test = () =>{
let obj = {
name:'zce',
age:38,
slogan:'我为前端而活'
}
return obj
}//而这个就相当于开辟一个空间往里面存东西就行了
console.log(test())
//==============================================================================================================
var str1 = 'zce说我为前端而活'
var str2 = new String('zce说我为前端而活')/*这是一个对象,它的好处是可以直接沿着原型链调用方法,但是上面的那个不能够调用,对于我们还是少占用空间,
这样子创建的话肯定要有多余的空间来存放obj上的属性或者方法*/
str1.slice //这样操作时会默认先把str1转成str2这种对象,然后再调用方法,即使不转也是属于我们当前对象下的一个实例,按照原型链也能找到
console.log(str1)
console.log(str2)
セブン、循環器系の活動を減らします
// var test = () =>{
// var i
// var arr = ['zce',38,'我为前端而活']
// for(i = 0;i<arr.length;i++){
// console.log(arr[i])
// }
// }
// var test = () =>{
// var i
// var arr = ['zce',38,'我为前端而活']
// var len = arr.length
// for(i = 0;i<len;i++){//尽可能的减少循环体里面的操作
// console.log(arr[i])
// }
// }
var test = () =>{
var arr = ['zce',38,'我为前端而活']
var len = arr.length
while(len --){//从后往前找,当小于0时就不成立了
console.log(arr[len])
}
}
test()
8.ステートメントとステートメントの数を減らします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
<title>减少声明及语句数</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;"></div>
<script type="text/javascript">
// var oBox = document.getElementById('box')
// var test = (ele) => {
// let w = ele.offsetWidth
// let h = ele.offsetHeight
// return w * h
// }
// var test = (ele) => {
// return ele.offsetWidth * ele.offsetHeight
// }
// console.log(text(oBox))
var test = () => {// 更倾向于这样写,代码结构清晰一些,有利于维护
var name = 'zce'
var age = 38
var slogan = '我为前端而活'
return name + age + slogan
}
var test = () => {
var name = 'zce',
age = 38,
slogan = '我为前端而活'
return name + age + slogan
}
console.log(test())
</script>
</body>
</html>
9つの怠惰な機能とパフォーマンス
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
<title>惰性函数与性能</title>
</head>
<body>
<button id="btn">
点击
</button>
<script type="text/javascript">
var oBtn = document.getElementById('btn')
function foo(){
console.log(this)
}
// function addEvent(obj,type,fn){
// if(obj.addEventListener){
// obj.addEventListener(type,fn,false)
// }else if(obj.attachEvent) {
// obj.attachEvent('on' + type,fn)
// } else {
// obj['on' + type] = fn
// }
// }
function addEvent(obj,type,fn){
if(obj.addEventListener){
addEvent = obj.addEventListener(type,fn,false)
}else if(obj.attachEvent) {
addEvent = obj.attachEvent('on' + type,fn)
} else {
addEvent = obj['on' + type] = fn
}
return addEvent
}
addEvent(oBtn,'click',foo)
</script>
</body>
</html>
現在のシナリオに基づくと、実際、次の書き込み方法の実行速度は遅くなっています。このアプローチは、実際にはaddEventの値に再割り当て操作を行うことです。条件が満たされた場合、2回目に入るときを判断する必要はありませんが、最後に成功した値で呼び出すことができます。具体的には、どのように選択するかは、上記の明確で直感的なタイプのコードが必要か、次のコードが必要かによって異なります。
10.イベントの委任を採用する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
<title>采用事件委托</title>
</head>
<body>
<ul id="ul">
<li>zce</li>
<li>28</li>
<li>我为前端而活</li>
</ul>
<script type="text/javascript">
var list = document.querySelectorAll('li')
// function showTxt(ev){
// console.log(ev.target.innerHTML)
// }
// for(let item of list){
// item.onclick = showTxt
// }
var oUl = document.getElementById('ul')
oUl.addEventListener('click',showTxt,true)
function showTxt(ev){
var obj = ev.target
if(obj.nodeName.toLowerCae() === 'li'){
console.log(obj.innerHTML)
}
}
</script>
</body>
</html>