2025-04-14

js基础

# 1. 基础

在线简历 (opens new window)

https://juejin.cn/post/7004638318843412493?utm_source=gold_browser_extension#heading-35
https://juejin.cn/post/7061588533214969892#heading-53

# 2. 宏任务和微任务

https://mp.weixin.qq.com/s/wpmiDpyIxrzvZPLsBa8Rnw
https://juejin.cn/post/7103679289245040653

# 3. url 输入到返回请求的过程

https://mp.weixin.qq.com/s/Vjky5tWsSfwvirwvpgKy0w

URL 解析
DNS 解析：缓存判断 + 查询 IP 地址
TCP 连接：TCP 三次握手，四次挥手 3.1 TCP 的三次握手是为了建立可靠的连接，确保通信双方都能够正常发送和接收数据。 3.2 TCP 的四次挥手是为了结束已建立的连接，确保双方都能正确地关闭连接并释放资源。
SSL/TLS 四次握手（只有 https 才有这一步）
浏览器发送请求
服务器响应请求并返回数据

# 4. 说说什么是原型链

原型是函数特有的属性，称为：prototype。prototype 属性是一个对象，这个对象的作用是：存储需要共享的属性和方法，以便在自己作为构造函数时传给函数实例。prototype 对象中有一个自带属性 constructor,它是一个函数指针，指向的是实例对象的构造函数。函数还有一个属性：constructor,它是一个指针，指向的是函数构造函数。函数实例依然可以作为构造函数，生成新的函数实例，构造函数与函数实例之间原型形成的关系，称为原型链。原型链的作用是实现方法和属性复用，减少重复代码，节省存储空间，也就是所说的实现继承。原型继承的缺点是，如果共享的属性是引用类型，则会造成所有实例均可更改构造函数属性，另一个弊端是，在生成函数实例时，没办法向构造函数传递参数，做不到自定义属性值。因此，鉴于这两个缺点，常常原型和构造函数一起使用，形成组合继承，组合继承也是 JS 中继承最常用的模式。 https://www.zhihu.com/question/313743456

# 5. 闭包

可以从内部函数访问外部函数的作用域

# 5.1. 闭包的作用有：

避免变量污染全局；
模拟块级作用域，封装私有方法，暴露公共方法属性；
模拟缓存，局部存储数据；

# 5.2. 闭包危害：主要是垃圾回收问题和内存泄漏问题。

闭包函数在执行后无法被销毁，始终存在环境中；
闭包中的变量无法被垃圾回收识别，造成内存泄漏。什么是内存泄漏？你知道哪些？

# 5.3. 内存泄漏指的是：因缺陷或错误造成的不再被使用的内存无法被回收，从而造成内存浪费的情况。

常见的有：

意外的全局变量；
console.*打印方法；
闭包；
DOM/BOM 对象泄漏；
未清理的定时器；
事件监听未及时清理
Vue 中频繁显示隐藏的尽量不要用 v-if；因为 dom 结构被清理，组件在内存占用未被释放
限制微任务数量：避免在循环中创建大量微任务
注意闭包引用：及时释放不再需要的大对象
优先使用 async/await：而非直接操作微任务队列
监控任务时长：使用 Performance API 检测微任务执行时间

提示：BOM 即浏览器对象模型。由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window；

var testObject = {}
document.getElementById('idname').property = testObject //如果DOM不被消除，则testObject会一直存在，造成内存泄漏

//解决方法：
window.onunload = function () {
  document.getElementById('idname').property = null //释放内存
}

# 5.4. 微任务中意外保留大对象

function processData() {
  const largeData = getLargeData() // 大对象

  Promise.resolve().then(() => {
    // 使用largeData
    console.log(largeData.length)

    // 问题：largeData在微任务完成前不会被释放
  })
}