JavaScript 基础 · 162/290
1. Ajax、Axios 和 Fetch 的区别 2. 数组 length 为 0 时访问元素 3. addEventListener 第三个参数 4. Array.prototype.slice.apply(arguments) 5. Animation、Transition、Transform 区别 6. 伪数组与真数组的转换 7. 类数组对象 8. 数组按属性值排序 9. 箭头函数与普通函数的区别 10. AST 抽象语法树 11. attribute 与 property 的区别 12. Babel 编译工具 13. async/await 原理解析 14. 异步编程实现方式 15. forEach 中使用 await 16. 异步任务批量执行结果获取 17. Base64 编码为何增大数据量 18. BigInt 数据类型 19. JavaScript 二分查找实现 20. JavaScript 实现二叉排序树 21. bind 连续调用的 this 绑定 22. 浏览器缓存机制 23. bind、call、apply 的区别与实现 24. 浏览器进程和线程 25. callee 与 caller 属性 26. 浏览器版本检测 27. Canvas 黑块计数 28. Canvas 跨域图片数据获取 29. Canvas 与 WebGL 区别 30. 浏览器从输入网址到页面显示的过程 31. 判断对象是否为空 32. 摄氏度转华氏度 33. JavaScript 变量与函数提升 34. 移动端点击穿透问题 35. JavaScript 变量提升与函数提升 36. setTimeout 在循环中的执行时机 37. 转盘组件设计与防刷方案 38. Promise.resolve 返回 Promise 的执行顺序 39. 静态资源 CDN 部署 40. typeof 运算符的执行顺序 41. typeof 和暂时性死区的执行分析 42. 箭头函数与普通函数的 this 和 new 行为 43. this 指向判断 44. Cookie 过期时间设置为 0 的行为 45. typeof 和暂时性死区的执行分析 46. 浏览器跨域限制的原因 47. Company Culture Fit 48. Cookie、LocalStorage 和 SessionStorage 的区别 49. 前端跨域请求解决方案 50. 统计 HTML 页面标签种类数 51. 浏览器标签页间通信 52. 什么是跨域 53. 前端跨页面通信方法 54. CSS 和 JS 文件是否阻塞页面渲染 55. CSR 与 SSR 渲染模式 56. CSS 动画与 JS 动画对比 57. JavaScript vs CSS 动画 58. 十进制转二进制 59. 判断 PC 端还是移动端 60. 深拷贝与浅拷贝 61. document.write 与 innerHTML 的区别 62. document.ready vs window.onload 63. JavaScript 实现拖拽功能 64. DOM 和 BOM 的区别 65. Element Dimension Properties 66. 空数组调用 reduce 67. enumerable 属性忽略规则 68. devDependencies 与 dependencies 的区别 69. 判断脚本运行环境(浏览器或 Node) 70. 判断空对象的方法 71. ES6 Decorator 装饰器 72. 面试必问问题 73. eval 函数的作用与弊端 74. 事件捕获与冒泡执行顺序 75. 事件代理 76. 解释 JavaScript 事件循环 77. 执行上下文与作用域链 78. React setState 批量更新机制 79. 事件冒泡和捕获机制 80. ES6+ 新特性概览 81. 函数是一等公民 82. 浮点数精度问题:0.1 + 0.2 83. 表达式 123['toString'].length + 123 的输出 84. flexible.js 移动端适配原理 85. forEach 循环中断 86. 前端路由的实现与应用 87. 前端动画实现方式 88. 前端面试流程 89. 前端性能优化指标与检测方法 90. 前端路由历史栈结构 91. JavaScript 函数声明方式及区别 92. 函数调用方式 93. 获取页面滚动距离 94. 函数原型链输出结果 95. 生成 1-10000 的数组 96. 函数式编程概念 97. 全局函数与全局变量 98. 堆与栈的区别 99. HTTP/2 多路复用原理 100. HTTPS 握手过程 101. 立即执行函数表达式(IIFE) 102. isNaN 与 Number.isNaN 的区别 103. 图片搜索系统设计 104. 面试关键点 105. 实现可迭代对象 106. JavaScript 内置对象 107. Iterator 迭代器与 Generator 生成器 108. JavaScript 的组成部分 109. JavaScript 内置对象 110. 闭包:概念、应用与内存管理 111. JavaScript 垃圾回收机制 112. JavaScript 错误类型 113. JavaScript 数据类型与检测方法 114. JavaScript 动态生成海报 115. JavaScript 对象定义方法 116. Promise 原理与用法 117. JavaScript 请求取消 118. JavaScript 单线程模型 119. JavaScript 继承方式对比 120. JavaScript 对象生命周期 121. this 的指向规则 122. jQuery.fn.init 返回的 this 123. jQuery 对象特点 124. Job Fit Assessment 125. JS 文件对 DOM 和 CSSOM 的阻塞 126. JSBridge 原理 127. JSON 基础 128. 0-1 背包问题 129. 大文件上传实现 130. Job Handover and Benefits 131. setTimeout 循环输出问题 132. 低代码平台技术实现 133. 宏任务与微任务的执行优先级 134. map(parseInt) 返回值问题 135. map(parseInt) 输出分析 136. 实现 LRU 缓存 137. map 与 filter 的区别 138. Map、Set、WeakMap、WeakSet 的区别 139. Math.ceil 和 Math.floor 的区别 140. 使用 Math 方法获取数组最值 141. Math.random() 在中奖概率计算中的安全问题 142. Math 取整方法的区别 143. 内存泄漏的场景与检测 144. 最大子序和 145. 合并连续数字 146. 什么是微前端 147. MessageChannel 的用法和应用场景 148. MessageChannel 的用途和场景 149. 微前端应用隔离 150. 实现 mergePromise 函数 151. 微前端解决的问题 152. 移动端样式适配 153. 模块化方案对比:CommonJS、AMD、ES Module 154. mouseEnter 和 mouseOver 的区别 155. 为按钮绑定多个 onclick 事件 156. 微前端技术方案 157. 移动端点击延迟问题 158. 多 tab 页通信方案 159. 实现 Promise.all 方法 160. 实现数组的 map 方法 161. 原生 JavaScript 知识体系 162. 计算机网络模型 163. new fn 与 new fn() 的区别 164. Node ES Module 为什么需要文件扩展名 165. new 操作符的执行过程 166. 不冒泡的事件类型 167. 非递归遍历二叉树 168. null 与 undefined 的区别 169. npm 包管理器 170. 空值合并运算符(??)使用场景 171. 数字转汉语输出函数 172. Object.create 与 new 的区别 173. 数字转中文 174. 数字分隔符的相等性判断 175. JavaScript 创建对象的方法 176. 对象解构赋值的实现方式 177. 面向对象编程 178. 让对象支持数组解构赋值 179. 面向对象编程思想 180. Object 与 Map 的区别 181. 面向对象与面向过程编程 182. OOP Three Principles 183. 前端页面截图实现 184. 页面生命周期事件 185. 轮询机制实现 186. 个人经历 187. Portal 子组件的事件冒泡 188. Personal Qualities 189. pnpm 包管理工具 190. 什么是 Polyfill 191. postMessage 跨域通信 192. 防止重复提交 193. 实现数组笛卡尔积 194. 前端面试中的问题分析方法 195. 防止按钮重复点击 196. 阻止事件冒泡和默认行为 197. 项目难点分析 198. 项目流程 199. 项目经验 200. Promise.all 异常处理 201. 中断 Promise 的方法 202. Promise 并发控制 203. Promise.then 的错误处理 204. Promise then 与 catch 的区别 205. Promise.all 和 Promise.allSettled 的区别 206. Promise 构造函数的执行时机 207. Promise 异步加载图片 208. 使用 Promise 实现定时输出 209. 用 Promise 实现红绿灯交替 210. Property Descriptors 211. 属性遍历方法 212. Proxy Basic Usage 213. Proxy 与 Object.defineProperty 214. 原型与原型链 215. PWA 渐进式网络应用 216. React Fiber 架构与 Vue 的差异 217. React 废弃三个生命周期钩子的原因 218. React 事件与原生事件执行顺序 219. 扫码登录实现方案 220. React Portals 的用途 221. React 与 React-DOM 的关系 222. reduce 方法用途 223. React render 方法原理与触发时机 224. ES6 Reflect 对象的用途 225. Reflect 对象的使用 226. React 为什么不直接使用 requestIdleCallback 227. 正则表达式常用方法 228. RESTful 接口规范 229. requestIdleCallback 与 requestAnimationFrame 230. 简历投递的最佳时间段 231. Script 标签位置的影响 232. 滚动公告组件的鼠标交互 233. 顺序执行异步任务 234. JavaScript 脚本延迟加载方式 235. 浏览器同源策略 236. Script 标签中的 export 报错 237. Service Worker 是什么 238. 用 setTimeout 实现 setInterval 239. setTimeout 零延迟的应用场景 240. setTimeout 运行机制 241. 实现 sleep 函数 242. 单线程与异步的关系 243. SPA 首屏加载优化 244. 严格模式的限制 245. 字符串压缩 246. 字符串长度计算(支持表情符号) 247. 实现字符串 repeat 方法 248. 字符串 toString() 方法调用 249. 同步与异步的区别 250. 尾调用优化与尾递归 251. toPrecision、toFixed 和 Math.round 的区别 252. target 与 currentTarget 的区别 253. JavaScript 倒计时偏差纠正 254. TCP 三次握手和四次挥手 255. 实现二叉树所有路径 256. try...catch 捕获异步错误 257. Tree Shaking 原理 258. typeof NaN 的结果 259. JavaScript 类型转换机制 260. TypeScript 访问修饰符 261. TypeScript 泛型的使用 262. TypeScript:Interface 与 Type 的区别 263. TypeScript 方法重载 264. TypeScript 中的 is 关键字 265. TypeScript 变量声明方式 266. TypeScript 命名空间与模块 267. undefined 与 ReferenceError 的区别 268. 获取 URL 资源文件后缀 269. TypeScript 与 JavaScript 的区别 270. URL 参数编码的必要性 271. JavaScript 版本号排序实现 272. var、let、const 的区别 273. JavaScript 变量提升机制 274. 虚拟 DOM 渲染处理 275. 虚拟列表实现 276. Vue created 与 mounted 的时间差 277. Vue 生命周期中发起请求的最佳位置 278. Vite 工作原理 279. Vue 页面渲染流程 280. Vue2 数组变化检测问题 281. Webpack 5 模块联邦 282. Web Worker 基础 283. WebSocket 心跳机制 284. WebSocket 协议 285. Vue 3 响应式原理 286. WebSocket 低版本浏览器兼容方案 287. Webpack 5 升级要点 288. WebSocket 与 HTTP 的区别 289. 页面白屏原因与优化 290. XML 与 JSON 的区别

计算机网络模型

理解 OSI 七层模型、TCP/IP 四层模型和五层网络模型的结构与协议

问题

如何理解计算机网络模型的分层结构?

解答

网络模型分类

计算机网络的各层及其协议的集合被称为网络的体系结构,主要分为三种模型:

七层网络模型(OSI)

开放式系统互联模型(OSI)是国际标准化组织提出的概念模型,包含应用层、表示层、会话层、传输层、网络层、数据链路层、物理层。

四层网络模型(TCP/IP)

TCP/IP 协议族包含应用层、传输层、网际层、网络接口层,是事实上的国际标准。

五层网络模型

五层模型是学习和开发中最常用的模型,将 TCP/IP 的网络接口层细化为数据链路层和物理层:

  1. 应用层:直接为应用进程提供服务,如 HTTP、FTP、SMTP、DNS 等协议
  2. 传输层:为两台主机中的进程提供通信服务,主要协议为 TCP 和 UDP
  3. 网络层:为两台主机提供通信服务,通过路由选择将数据传递到目标主机
  4. 数据链路层:将 IP 数据报封装成帧,在相邻节点间传送
  5. 物理层:确保数据在各种物理媒介上传输

物理层

物理层定义了与传输媒介相关的接口特性,包括机械特性、电气特性、功能特性和规程特性。

传输媒介分为导引型(双绞线、同轴电缆、光缆)和非导引型(短波、微波)。

信道分类

  • 单工信道:只能单向通信
  • 半双工信道:双向通信但不能同时进行
  • 全双工信道:可同时双向通信

信道复用技术

  • 频分复用(FDM):将总带宽划分为多个子频带
  • 时分复用(TDM):不同时段传输不同信号
  • 统计时分复用(STDM):动态分配时隙,提高利用率
  • 波分复用(WDM):不同波长的光载波在同一光纤中传输
  • 码分复用(CDM):通过不同编码区分各路信号

数据链路层

基本功能

  1. 封装成帧:在数据前后添加首部(SOH)和尾部(EOT),构成完整的帧
  2. 透明传输:使用转义字符 ESC 处理数据中的控制字符
  3. 差错检测:使用循环冗余校验(CRC)生成校验码

PPP 协议

点到点协议是最广泛使用的数据链路层协议,包含 IP 数据报封装方法、链路控制协议(LCP)和网络控制协议(NCP)。

MAC 地址

MAC 地址是 48 位的物理地址,用于在网络中唯一标识网卡。格式为 6 个字节,如 08:00:20:0A:8C:6D,前 3 字节为厂商标识,后 3 字节由厂商分配。

以太网

以太网是使用最广泛的局域网,帧格式包含目的 MAC 地址、源 MAC 地址、类型、数据和校验和。

网络层

IP 协议

IP 数据报格式包含版本、首部长度、总长度、标识、标志、片偏移、生存时间(TTL)、协议、首部校验和、源地址和目的地址等字段。

ARP 协议

地址解析协议用于根据 IP 地址获取 MAC 地址。主机维护 ARP 缓存表,存储 IP 地址与 MAC 地址的映射关系。查询过程:

  1. 查看本地 ARP 表,如有则直接使用
  2. 如无则广播 ARP 请求
  3. 目标主机单播回复 MAC 地址

IP 地址分类

传统 IP 地址分为 A、B、C、D、E 五类:

  • A 类:网络号 1-126,每个网络最多 16777215 台主机
  • B 类:网络号 128.1-191.255,每个网络最多 65534 台主机
  • C 类:网络号 192.0.1-223.255.255,每个网络最多 254 台主机

子网划分

从主机号借用若干位作为子网号,将 IP 地址划分为:网络号 + 子网号 + 主机号。通过子网掩码进行路由选择,例如:

IP 地址:192.168.10.198        11000000.10101000.00001010.11000110
子网掩码:255.255.255.224      11111111.11111111.11111111.11100000
网络地址:192.168.10.192       11000000.10101000.00001010.11000000

CIDR 无类别域间路由

采用无分类的两级编址:网络前缀 + 主机号,使用斜线记法表示,如 128.14.35.7/20。支持路由聚合,减少路由表项目。

专用地址

三个专用地址块只能用于内部通信:

  • 10.0.0.0/8
  • 172.16.0.0/12
  • 192.168.0.0/16

NAT 和 VPN

NAT(网络地址转换)允许专用地址主机通过路由器的全球 IP 地址访问互联网。VPN(虚拟专用网)利用公共互联网连接远程专用网,使用 IPSec 加密保证安全。

IPv6

IPv6 地址长度为 128 位,解决 IPv4 地址耗尽问题。

传输层

UDP 协议

用户数据报协议特点:

  • 无连接,不保证可靠交付
  • 面向报文
  • 无拥塞控制
  • 支持一对一、一对多、多对一、多对多通信
  • 首部开销小,仅 8 字节

首部包含源端口号、目的端口号、长度和校验和。

TCP 协议

传输控制协议特点:

  • 面向连接
  • 提供可靠交付
  • 全双工通信
  • 面向字节流

TCP 报文段首部包含源端口、目的端口、序号、确认号、数据偏移、控制位(URG、ACK、PSH、RST、SYN、FIN)、窗口、校验和、紧急指针等字段。

三次握手

建立连接过程:

  1. 客户端发送 SYN=1,seq=x,进入 SYN-SENT 状态
  2. 服务器回复 SYN=1,ACK=1,ack=x+1,seq=y,进入 SYN-RCVD 状态
  3. 客户端发送 ACK=1,ack=y+1,seq=x+1,进入 ESTABLISHED 状态
  4. 服务器收到确认后进入 ESTABLISHED 状态

四次挥手

释放连接过程:

  1. 客户端发送 FIN=1,seq=u,进入 FIN-WAIT-1 状态
  2. 服务器回复 ACK=1,ack=u+1,seq=v,进入 CLOSE-WAIT 状态
  3. 服务器发送 FIN=1,seq=w,ack=u+1,进入 LAST-ACK 状态
  4. 客户端回复 ACK=1,ack=w+1,seq=u+1,进入 TIME-WAIT 状态
  5. 客户端等待 2MSL 后进入 CLOSED 状态

可靠传输

采用停止等待协议、连续 ARQ 协议和滑动窗口协议。超时重传时间计算:

RTO = RTT_S + 4 × RTT_D
新的 RTT_S = (1-α) × 旧的 RTT_S + α × 新的 RTT 值
新的 RTT_D = (1-β) × 旧的 RTT_D + β × |RTT_S - 新的 RTT 值|

拥塞控制

采用四种算法:

  1. 慢启动:拥塞窗口成倍增长
  2. 拥塞避免:达到阈值后线性增长
  3. 快重传:收到 3 个重复确认立即重传
  4. 快恢复:调整阈值和窗口大小

应用层

DNS 域名系统

将域名转换为 IP 地址。域名分为根域名、顶级域名(国家顶级域名、通用顶级域名、基础结构域名、新顶级域名)和子域名。

FTP 文件传输协议

用于网络文件传输,服务器包含一个主进程和多个从属进程,可同时为多个客户端提供服务。

HTTP 超文本传输协议

定义浏览器如何请求文档以及服务器如何传送文档。配合 URL(统一资源定位符)和 HTML(超文本标记语言)构成万维网基础。

DHCP 动态主机配置协议

提供即插即用联网机制,自动配置 IP 地址、子网掩码、默认路由器和域名服务器等信息。工作流程:

  1. 主机广播发现报文(DHCP DISCOVER)
  2. DHCP 服务器回复提供报文(DHCP OFFER)
  3. 分配临时 IP 地址,设置租用期

关键点

  • 五层网络模型是学习的基础,从下到上依次为物理层、数据链路层、网络层、传输层、应用层
  • 数据链路层使用 MAC 地址标识设备,网络层使用 IP 地址标识主机,传输层使用端口号标识进程
  • TCP 通过三次握手建立连接,四次挥手释放连接,提供可靠的字节流传输服务
  • UDP 无连接、不可靠但开销小,适用于实时性要求高的场景
  • IP 地址分类、子网划分和 CIDR 是网络层地址管理的核心技术