【原创】前端面试知识体系（一）

function debounce(fn, delay = 200) {
 let timer = 0
 
 return function () {
  if (timer) clearTimeout(timer);
  
  timer = setTimeout(() => {
   fn.apply(this, arguments); // 透传 this 和参数
   timer = 0
  }, delay)
 }
}

const input = document.getElementById('input')
input.addEventListener('keyup', debounce(() => {
 console.log('发起搜索', input.value)
}), 300)

<style>
 #container {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ccc;
 }
 #box {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  background-color: blue;
 }
</style>
<div id="container">
 <div id="box"></div>
</div>

<div style="font-size: 20px;">
 <p style="text-indent: 2em; font-size: 40px;">首行缩进</p> // font-size: 40px; text-indent: 80px;
 <p style="text-indent: 2em;">哪吒, 算法猫叔</p> // font-size: 20px; text-indent: 40px;
</div>

<style>
 @media only screen and (max-width: 374px) {
  // iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size
  html {
   font-size: 86px;
  }
 }
 @media only screen and (min-width: 375px) and (max-width: 413px) {
  // iphone6/7/8 和 iphone x
  html {
   font-size: 100px;
  }
 }
 @media only screen and (min-width: 414px) {
  // iphone6p 或者更大的尺寸，以 iphone6p 的宽度(414px)比例设置 font-size
  html {
   font-size: 110px;
  }
 }
 p {
  font-size: .16rem;
 }
</style>

<div id="div1"> div1 </div>
<div id="div2"> div2 </div>
<div id="div3"> div3 </div>
<style>
 div {
  border: 1px solid #ccc;
  margin-top: 20px;
 }
 #div1 {
  width: 10vw;
  height: 10vh;
 }
 #div2 {
  width: 10vmax;
  height: 10vmax;
 }
 #div3 {
  width: 10vmin;
  height: 10vmin;
 }
</style>

const obj = {
 name: '哪吒，B站，算法猫叔',
 getName: () => {
  return this.name
 }
}
console.log(obj.getName())

const obj = {
 name: '哪吒，B站，算法猫叔'
}
obj.__proto__.getName = () => {
 return this.name
}
console.log( obj.getName() )

const Foo = (name, age) => {
 this.name = name
 this.age = age
}
const f = new Foo('张三', 20)
// 报错 Foo is not a constructor

const btn1 = document.getElementById('btn1')
btn1.addEventListener('click', () => {
 // console.log(this === window)
 this.innerHTMl = 'clicked'
})

{
 data() { return { name:  '哪吒，B站：算法猫叔' } },
 methods: {
  getName: () => {
   // 报错 Cannot read properties of undefined (reading 'name')
  return this.name
  },
  // getName() {
  //  return this.name // 正常
  // }
 },
 mounted: () => {
  // 报错
 },
 // mounted() {
 //  正常
 // }
}

const arr = [10, 20, 30]
for (let val of arr) {
 console.log(val); // 值
}

const str = 'abc'
for (let c of str) {
 console.log(c);
}

function fn() {
 for (let arg of arguments) {
  console.log(arg)
 }
}
fn(100, 200, 'aaa')

const pList  = document.getElementsByTagName('p')
// querySelectorAll('p')
for (let p of pList) {
 console.log(p)
}

对象，数组，字符串可枚举的，就可以使用for ... in 循环
const obj1 = { x: 100 }
Object.getOwnPropertyDescriptors(obj1)
x:
configurable: true
enumerable: true
value: 100
writeable: true

function createPromise(val) {
 return new Promise((resolve) => {
  setTimeout(() => {
   resolve(val)
  }, 1000)
 })
}

(async function () {
 const p1 = createPromise(100)
 const p2 = createPromise(200)
 const p3 = createPromise(300)
 // const res1 = await p1
 // console.log(res1)
 // const res2 = await p2
 // console.log(res2)
 // const res3 = await p3
 // console.log(res3)
 const list = [p1, p2, p3]
 // Promise.all(list).then(res => console.log(res))

 for await (let res of list) {
  console.log(res)
 }
})()

const p1 = document.getElementById('p1')
class Node {}

// document
class Document extends Node {}
class DocumentFragment extends Node {}

// 文本和注释
class CharacterData extends Node {}
class Comment extends CharacterData {}
class Text extends CharacterData {}

// elem
class Element extends Node {}
class HTMLElement extends Element {}
class HTMLDivElement extends HTMLElement {}
class HTMLInputElement extends HTMLElement {}

<p id="p1">
 <b>node</b> vs <em>element</em>
</p>

<script>
 const p1 = document.getElementById('p1')
 console.log(p1.children)
 
 console.log(p1.childNodes)
 // [b,text,em,comment]
</script>

const arr1 = Array.from(list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]

watch: {
 name(newValue, oldValue) {
  console.log('watch name', newValue, oldValue)
 }
},
computed: {
 userInfo() {
  return this.name + this.city
 }
}

props和$emit

$parent

自定义事件

$refs

$attr

provide/inject

vuex

---

$attrs $listeners

vue3 移除 $listeners

上一级没有接收到的

props: ['x'], // $attrs

emits: ['getX'], // $listeners

Object.keys(this.$attrs)

<l3 v-bind="$attrs"></l3>

dom结点: inheritAttrs: false

---

this.$parent
this.$refs

provide: {
 info: 'aaa'
}

provide() {
 return {
  info: computed(() => this.name)
 }
}

---

父子组件

上下级组件（跨多级）通讯

全局组件

'use strict' // 全局开启

function fn() {
 'use strict' // 某个函数开启
}

什么是垃圾回收？

function fn1() {
 const a = 'aa'
 console.log(a)
 
 const obj = { x: 100 }
 console.log(obj)
}
fn1()

function fn2() {
 const obj = { x: 100 }
 window.obj = obj
}
fn2()


function getDataFns() {
 const data = {} // 闭包
 return {
  get(key) {
   return data[key]
  },
  set(key, value) {
   data[key] = value
  }
 }
}
const { get, set } = getDataFns()
set('x', 100)
get('x')

引用计数(之前）

// 对象被 a 引用
let a = { x: 100 }
let a1 = a
a = 10
a1 = null

// 循环引用
function fn3() {
 const obj1 = {}
 const obj2 = {}
 obj1.a = obj2
 obj2.a = obj1
}
fn3()

// ie6-7 内存泄漏的 bug
var div1 = document.getElementById('div1')
div1.a = div1
div1.someBigData = {}

标记清除（现代）
// JS 根 window

const arr = []
for (let i = 0; i < 10 * 10000; i++) {
 arr.push(i)
}

function bind() {
 // 模拟一个比较大的数据
 const obj = {
  str: JSON.stringify(arr) // 简单的拷贝
 }
 window.addEventListener('resize', () => {
  console.log(obj)
 })
}

let n = 0
function start() {
 setTimeout(() => {
  bind()
  n++
  
  // 执行 50 次
  if (n < 50) {
   start()
  } else {
   alert('done')
  }
 }, 200)
}

document.getElementById('btn1').addEventListener('click', () => {
 start()
})

// 标记清除算法
const data = {}
function fn1() {
 const obj = { x: 100 }
 data.obj = obj
}
fn1()

const map = new Map()
function fn1() {
 const obj = { x: 100 }
 map.set('a', obj)
}
fn1()

// WeakMap WeakSet 弱引用
<script>
 const wMap = new WeakMap(); // 弱引用
 function fn1() {
  const obj = { x: 100 }
  wMap.set(obj, 100) // WeakMap的key，只能是引用类型
 }
 fn1()
 // WeakSet
</script>

function ajax1(url, sucessFn) {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", url, false);
 xhr.onreadystatechange = function () {
  // 这里的函数异步执行
  if (xhr.readyState == 4) {
   if (xhr.status == 200) {
    successFn(xhr.responseText);
   }
  }
 }
 xhr.send(null);
}

function ajax2(url) {
 return fetch(url).then(res => res.json());
}

1. FIN ->
2. ACK <-
3. FIN <-
4. ACK ->

// www.aaa.com网页
<script>
 window.onSuccess = function(data) {
  console.log(data)
 }
</script>
<script src="https://www.bbb.com/api/getData"></script>

// https://www.bbb.com... 返回了一段字符串
'onSuccess({ errno: 0, data: {} })'

// CORS 配置允许跨域（服务端）
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8011") // 或者"*"
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With")
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
response.setHeader("Access-Control-Allow-Credentials", "true") // 允许跨域接收 cookie

const p = document.createElement('p')
p.innerHTML = 'new paragraph'
document.body.appendChild(p)

const list = document.getElementsByTagName('p')
console.log('length---', listh.length)

console.log('start')
// 渲染之后
setTimeout(() => {
 const list = document.getElementsByTagName('p')
 console.log('length on timeout---', list.length) // 2
 alert('阻塞 timeout')
})
// 渲染之前
Promise.resolve().then(() => {
 const list = document.getElementsByTagName('p')
 console.log('length on promise.then---', list.length) // 2
 alert('阻塞 promise')
})
console.log('end')

// 同步任务 -> 异步任务 -> 宏任务
// 微任务要比宏任务要快
// Event Loop

<script>
 console.log('start')
 setTimeout(() => {
  console.log('timeout')
 })
 Promise.resolve().then(() => {
  console.log('promise then')
 ))
 console.log('end')

 // ajax(url, fn) // 300ms
 
 // Event Loop 继续监听
 // 宏任务 MarcoTask Queue
 // () => {
 //   console.log('timeout')
 // }
 // fn
 
 // DOM 渲染
 // 微任务 MicroTask Queue
 // () => {
 //   console.log('promise then')
 // }
</script>

nodejs如何开启多进程

// console.info(process.pid)
const http = require('http')

const server = http.createServer()
server.listen(3000, () => {
 console.log('localhost: 3000')
})

console.info(process.pid)

// WebWorker 进程
// fork
const http = require('http')
const server = http.createServer((req, res) => {
 if (req.url === '/get-sum') {
   console.info('主进程 id', process.id)
   
   res.end('hello')
 }
})
server.listen(3000, () => {
 console.info('localhost: 3000')
})

// cluster 进程

// 子进程，计算
function getSum() {
 let sum = 0
 for (let i = 0; i < 10000; i++) {
  sum += i
 }
 return sum
}

process.on('message', data => {
 console.log('子进程 id', process.pid)
 console.log(‘子进程接受到的信息：', data)

 const sum = getSum()
 // 发送消息给主进程
 process.send(sum)
})

const http = require('http')
const fork = require('child_process').fork

const server = http.createServer((req, res) => {
 if (req.url === '/get-sum') {
  console.info('主进程 id', process.pid)

   // 开启子进程
  const  computeProcess = fork('./compute.js')
  computeProcess.send('开始计算')

  computeProcess.on('message', data => {
    console.info('主进程接受到的信息：', data)
    res.end('sum is' + data)
  })

  computeProcess.on('close', () => {
    console.info('子进程因报错而退出')
    computeProcess.kill()
    res.end('error')
  })
 }
})

server.listen(3000, () => {
 console.info('localhost: 3000')
})

const http = require('http')
const cpuCoreLength = require('os').cpus().length
const cluster = require('cluster')

if (cluster.isMaster) {
 for (let i = 0; i < cpuCoreLength; i++) {
  cluster.fork() // 开启子进程
 }
 cluster.on('exit', worker => {
  console.log('子进程退出')
  cluster.fork() // 进程守护
 })
} else {
 // 多个子进程会共享一个 TCP 连接，提供一份网络服务
  const server = http.createServer((req, res) => {
  res.writeHead(200)
  res.end('done')
 })
 server.listen(3000)
}

// 封装 JS-bridge
const sdk = {
 invoke(url, data = {}, onSuccess, onError) {
   const iframe = document.createElement('iframe')
   iframe.style.visibility = 'hidden'
   document.body.appendChild(iframe)
   
   iframe.onload = () => {
    const content = iframe1.contentWindow.document.body.innerHTML
   }
 }
}

<p>requestAnimationFrame</p>
<button id="btn1">change</button>
<div id="box"></div>

<script>
const box = document.getElementById('box')
document.getElementById('btn1').addEventListener('click', () => {
 let curWidth = 100
 const maxWidth = 400
 function addWidth() {
  curWidth = curWidth + 3
  box.style.width = `${curWidth}px`
  if (curWidth < maxWidth) {
   window.requestIdleCallback(addWidth) // 时间不用自己控制
  }
 }
})
</script>

start
end
timeout
requestAnimationFrame
requestIdleCallback

window.onload = () => {

 console.info('start')
 setTimeout(() => {
  console.info('timeout')
 })
 // 宏任务，顺序交换也一样
 // 高优
 window.requestAnimationFrame(() => {
  console.info('requestAnimationFrame')
 })
 // 低优
 window.requestIdleCallback(() => {
  console.info('requestIdleCallback')
 })

 console.info('end')
}

<keep-alive>
 <Child1 v-if="num === 1"></Child1>
 <Child2 v-else></Child2>
</keep-alive>

// Child1 2
created() {
 console.log() // keep-alive 中只创建
}
activated() {}
deactivated() {}

// 创建一次被缓存

child1 created
child1 activated
child2 created
child1 deactivated
child2 activated
child2 deactivated
child1 activated

$nextTick
mounted() {
 this.$nextTick(function () {
  // 仅在整个视图都被渲染之后才会运行的代码
 })
}

import { onUpdated, onMounted } from 'vue'
export default {
 setup() {
  onMounted(() => {
 
  })
  onUpdated(() => {
  
  })
 }
}

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

7. 应用层
6. 表示层
5. 会话层
4. 运输层
3. 网络层
2. 数据链路层
1. 物理层

1. 应用层（各种应用层协议，如DNS，HTTP，SMTP等）
2. 运输层（TCP或UDP）
3. 网际层（IP）
4. 网络接口层

<head>

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

<link rel="prefetch" href="other.js" as="script">

<link rel="stylesheet" href="style.css">

</head>
<body>
<script src="main.js" defer></script>
</body>

<link rel="dns-prefetch" href="域名">
<link rel="dns-preconnect" href="" crossorigin></link>

if (top.location.hostname !== self.location.hostname) {
 alert("您正在访问不安全的页面，即将跳转到安全页面！“)
 top.location.href = self.location.href
}

hearders

X-Frame-Options: sameorigin

npm init -y
npm install ws --save
npm install nodemon --save-dev

const { WebSocketServer } = require('ws')

const wsServer = new WebSocketServer({ port: 3000 })

wsServer.on('connection', ws => {
 console.info('connected')
 
 ws.on('message', msg => {
  console.info('收到了信息', msg.toString)
  
  // 服务端向客户端发送信息
  setTimeout(() => {
   ws.send('服务端已经收到了信息：' + msg.toString())
  }, 2000)
 })
})



<button id="btn-send">发送消息</button>

const ws = new WebSocket('ws://127..0.0.1:3000')
ws.onopen = () => {
 console.info('opened')
 ws.send('client opened')
}
ws.onmessage = event = {
 console.info('收到了信息', event.data)
}

const btnSend = document.getElementById('btn-send')
btnSend.addEventListener('click', () => {
 console.info('clicked')
 ws.send('当前时间' + Date.now())
})

ws可升级为 wss （像https）
import { createServer } from 'https'
import { readFileSync } from 'fs'
import { WebSocketServer } from 'ws'

const server = createServer ({
 cert: readFileSync('/path/to/cert.pem'),
 key: readFileSync('/path/to/key.pem')
})

const wss = new WebSocketServer({ server })

扩展：实际项目推荐socket.io, api更简洁
io.on('connection', socket => {
 socket.emit('request', /*...*/)
 io.emit('broadcast', ...)
 socket.on('reply', () => {})
})

const { WebSocketServer } = require('ws')

const wsServer = new WebSocketServer({ port: 3000 })

const list = new Set()

wsServer.on('connection', curWs => {
 console.info('connected')

 list.add(curWs)

 curWs.on('message', msg => {
  console.info('received message', msg.toString())
  
  // 传递给其他客户端
  list.forEach(ws => {
   if (ws === curWs) return
   ws.send(msg.toString())
  })
 })
})