内存管理介绍
JavaScript的垃圾
JavaScript 中的可达对象
GC 定义与作用
GC 里的垃圾是什么
GC算法是什么
常见GC算法
引用计数算法
引用计数算法优点
引用计数算法缺点
标记清除算法
标记清除算法优点
标记清除算法缺点
标记整理算法原理
标记整理算法优点
标记整理算法缺点
认识V8
V8 垃圾回收策略
V8 中常用的 GC 算法
V8 内存分配
新生代对象回收实现
回收细节说明
老生代对象说明
老生代对象回收实现
细节对比
为什么使用 Performance
Performance 使用步骤
内存问题的外在表现
界定内存问题的标准
监控内存的几种方式
为什么确定频繁垃圾回收
确定频繁的垃圾回收
如何精准测试 JavaScript 性能
Jsperf 使用流程
慎用全局变量
为什么要慎用
缓存全局变量
通过原型新增方法
避开闭包陷阱
闭包特点
关于闭包
避免属性访问方法使用
JavaScript 中的面向对象
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
For 循环优化
var btns = document.getElementByClassName('btn')
for(var i = 0; i
采用最优循环方式
var arr = [1,2,34,30,6]
arr.forEach(function(item){
console.log(item)
})
for(var i = arr.length; i; i--){
console.log(arr[i])
}
for(var i in arr){
console.log(arr[i])
}
节点添加优化
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.appendChild(op)
}
document.body.appendChild(fragEle)
克隆优化节点操作
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.innerHTML = i
document.body.appendChild(newP)
}
直接量替换 Object 操作
var a = [1, 2, 3]
var a1 = new Array(3)
a1[0] = 1
a1[1] = 2
a1[2] = 3
JSBench 使用
堆栈中代码执行流程
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
console.log('属于当前课程')
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'
function baz(){
var age = 38
console.log(age)
console.log(name)
}
baz()
}
foo()
减少数据读取次数
var oBox = document.getElementById('skip')
// function hasEle(ele, cls){
// return ele.className == cls
// }
function hasEle(ele, cls){
var clsname = ele.className
return clsname == cls
}
hasEle(oBox, 'skip')
字面量与构造式
let test = () => {
let obj = new Object()
obj.name = 'zce'
obj.age = 18
obj.slogan = '我为前端而活'
return obj
}
let test = () => {
let obj = {
name: 'zce',
age: 18,
slogan: '我为前端而活'
}
return obj
}
test()
var str1 = 'zrc我为前端而活'
var str2 = new String('zrc我为前端而活')
减少循环体活动
var test = () => {
var i
var arr = ['zce', 38, '我为前端而活']
for(i = 0; i {
var i
var arr = ['zce', 38, '我为前端而活']
var len = arr.length
for(i = 0; i {
var arr = ['zce', 38, '我为前端而活']
var len = arr.length
while(len--){
console.log(arr[len])
}
}
test()
减少声明及语句数
//减少声明
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(test(oBox))
//减少语句数
var test = () => {
var name = 'zce'
var age = 18
var slogan = '我为前端而活'
return name + age + slogan
}
var test = () => {
var name = 'zce',
age = 18,
slogan = '我为前端而活'
return name + age + slogan
}
console.log(test())
惰性函数与性能
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)
采用事件委托
var list = document.querySelector('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.toLowerCase() === 'li'){
console.log(obj.innerHTML)
}
}