記事の説明：この記事は、レガオのフロントエンドトレーニングキャンプのメモと経験です。何か問題がある場合は、指摘して教えていただければ幸いです。ありがとうございます。
1.クロージャートラップを避けます
閉鎖特性
- 外側には内側への参照があります
- 「外部」スコープの「内部」スコープのデータにアクセスする
function foo(){
var name = 'lg'
function fn(){
console.log(name)
}
return fn
}
var a = foo()
a()- クロージャは強力な構文です
- クロージャを不適切に使用すると、メモリリークが発生しやすくなります。メモリリークが発生したら、気にしない場合は、継続的にリークするのを待ちます。これは、プログラム全体のパフォーマンスに影響します。
- 閉鎖のために閉鎖しないでください
<!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">
Add
</button>
<script type="text/javascript">
// function foo(){ //由于闭包语法的存在，里面有些变量是无法回收的，在这种情况下，这种操作很多的时候，内存会越来越多
// var el = document.getElementById('Btn')
// el.onclick = function(){
// console.log(el.id)
// }
// }
// foo()
function foo(){
var el = document.getElementById('Btn')
el.onclick = function(){
console.log(el.id)
}
el = null//若是将DOM中button的节点删除之后，DOM中对document的引用消失了，把el置空之后，该函数对document的引用也消失了，这样的空间就会得以释放
}
foo()
</script>
</body>
</html>次に、属性アクセス方法の使用を避けます
JavaScriptでのオブジェクト指向
- JSは属性アクセスメソッドを必要とせず、すべての属性は外部から表示されます
- 属性アクセス方法を使用すると、アクセス制御なしで再定義のレイヤーが追加されるだけです
function Person(){
this.name = 'icoder'
this.age = 18
this.getAge = function(){
return this.age
}
}
const p1 = new Person()
const a = p1.getAge()//定义了一个成员属性的访问函数，直接调用函数访问
function Person(){
this.name = 'icoder'
this.age = 18
}
const p2 = new Person()
const b = p2.age//直接对属性名称进行访问
3、Forループ最適化
<!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>For循环优化</title>
</head>
<body>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<p class="btn">add</p>
<script type="text/javascript">
var aBtns = document.getElementsByClassName('btn')
for(var i = 0;i < aBtns.length;i++){
console.log(i);
}
for(var i = 0,len = aBtns.length;i < aBtns.length;i++){//不需要像上面代码一样，每次都需要重新获取长度
console.log(i)
}
</script>
</body>
</html>
第四に、最良のサイクル方法を選択します
配列をトラバースする場合、forEachのパフォーマンスが最も高く、次にfor、最後にfor in
var arrList = new Array(1,2,3,4,5)
//三种不同的方式对同一数组进行遍历
arrList.forEach(function(item){
console.log(item)
})
for(var i = arrList.length;i;i--){
console.log(arrList[i])
}
for(var i in arrList){
console.log(arrList[i])
}
//对数组进行遍历时，性能最好的forEach，其次是for，最后是for in
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>
<button id="btn">
Add
</button>
<script type="text/javascript">
for(var i = 0;i < 10;i++){
var oP = document.createElement('p')
oP.innerHTML = i
document.body.appendChild(oP)
}
//第二种优化的方式创建节点
const fragEle = document.createDocumentFragment()//定义一个文档碎片的容器
for(var i = 0;i < 10;i++){
var oP = document.createElement('p')
oP.innerHTML = i
fragEle.body.appendChild(oP)
}
document.body.appendChild(fragEle)
</script>
</body>
</html>
ドキュメントフラグメントを使用してノードを作成します。これはより効率的です
6、クローン最適化ノード操作
コードデモ：
<!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>
<p id="box1">old</p>
<script type="text/javascript">
for(var i =0;i <3;i++){
var oP = document.createElement('p')
op.innerHTML = i
document.body.appendChild(oP)
}
//克隆节点
var oldP = document.getElementById('box1')
for(var i =0; i < 3;i++){
var newP = oldP.cloneNode(false)// 通过节点克隆的方法
newP.innderHTML = i;
document.body.appendChild(newP)
}
</script>
</body>
</html>
7、オブジェクト操作を直接置き換える
オブジェクトまたは配列を定義するとき、newを使用して対応するデータを取得できますが、リテラルを直接使用することもできます。
var a = [1,2,3]
var a1 = new Array(3)
a1[0] = 1
a1[1] = 2
a1[2] = 3