Javascript 프런트엔드 최적화 코드

if 판단의 최적화

1. 가장 간단한 방법:if판단

let commodity = {
  phone: ' ',
  computer: ' ',
  television: ' ',
  gameBoy: ' ',
}

function price(name) {
  if (name === commodity.phone) {
    console.log(1999)
  } else if (name === commodity.computer) {
    console.log(9999)
  } else if (name === commodity.television) {
    console.log(2999)
  } else if (name === commodity.gameBoy) {
    console.log(3999)
  }
}
price(' ') // 9999

2, 좋은 방법: Switch

let commodity = {
  phone: ' ',
  computer: ' ',
  television: ' ',
  gameBoy: ' ',
}
const price = (name) => {
  switch (name) {
    case commodity.phone:
      console.log(1999)
      break
    case commodity.computer:
      console.log(9999)
      break
    case commodity.television:
      console.log(2999)
      break
    case commodity.gameBoy:
      console.log(3999)
      break
  }
}
price(' ') // 9999

3. 더 나은 방법: 전략 모델

const commodity = new Map([
  ['phone', 1999],
  ['computer', 9999],
  ['television', 2999],
  ['gameBoy', 3999],
])

const price = (name) => {
  return commodity.get(name)
}
price('phone') // 1999

includes의 최적화

function verifyIdentity(identityId) {
  if (identityId == 1 || identityId == 2 || identityId == 3 || identityId == 4) {
    return ' ， ！'
  } else {
    return ' '
  }
}

function verifyIdentity(identityId) {
  if ([1, 2, 3, 4].includes(identityId)) {
    return ' ， ！'
  } else {
    return ' '
  }
}

for 순환

var arr = ['a', 'b', 'c']
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]) // a,b,c
}

var arr = ['a', 'b', 'c']
for (var i = 0, length = arr.length; i < length; i++) {
  console.log(arr[i]) // a,b,c
}

var obj = { 0: 'a', 1: 'b', 2: 'c' }
for (var key in obj) {
  console.log(key) // 0，1，2
}

var arr = ['a', 'b', 'c']
for (var key in a) {
  console.log(key) // 0，1，2
}

var arr = ['a', 'b', 'c']
for (var value of arr) {
  console.log(value) //  a,b,c
}

헤아리다

1. 가장 전통적인 방법: 수조의 indexOf 아래 표시된 속성을 이용하여 조회한다.

function unique4(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

2, 최적화: ES6의 Set 방법을 사용합니다.

function unique4(arr) {
  return Array.from(new Set(arr)) //  Array.from Set 
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

화살표 함수

//  functions
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map(function (x) {
  return x * x
})
console.log(arrFunc)

//  
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map((x) => x * x)

//   arguments
let fun1 = (b) => {
  console.log(arguments)
}
fun1(2, 92, 32, 32) // Uncaught ReferenceError: arguments is not defined

//  rest  
let fun2 = (...c) => {
  console.log(c)
}
fun2(3, 82, 32, 11323) // [3, 82, 32, 11323]

Dom 생성

for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerhtml = i
  document.body.appendChild(el)
}

var frag = document.createDocumentFragment()
for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerhtml = i
  frag.appendChild(el)
}
document.body.appendChild(frag)

var html = []
for (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>')
}
document.body.innerHTML = html.join('')

메모리 유출

1. 설명되지 않은 변수나this로 만든 변수 (this의 지향은 윈도우) 는 메모리 유출을 일으킬 수 있습니다

function fn() {
  a = "Actually, I'm a global variable"
}
fn()

function fn() {
  this.a = "Actually, I'm a global variable"
}
fn()

2. vue 단일 페이지에서 적용하면 전역 변수가 페이지를 전환할 때 비우지 않습니다

<template>
  <div id="home">
     
  </div>
</template>

<script>
  export default {
    mounted() {
      window.test = {
        //  window dom 
        name: 'home',
        node: document.getElementById('home')
      }
    }
  }
</script>

destroyed () {
  window.test = null //  
}

function fn() {
  var a = "I'm a"
  return function () {
    console.log(a)
  }
}

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {// 
		clearInterval(this.timer)
    this.timer = null
	}
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

떨림 방지와 절류

<Select :remote-method="remoteMethod">
    <Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select>

<script>
function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}

export default {
  methods：{
    remoteMethod：debounce(function (query) {
        // to do ...
    }, 200),
  }
}
<script>

function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}
function handle() {
  console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

비동기적으로 js 로드

<script src="path/to/home.js" defer></script>
<script src="path/to/home.js" async></script>