前言

浏览器相关：包括DOM、BOM、浏览器渲染原理、开发者工具等

目录

• BOM 篇
• DOM 篇
• 浏览器渲染原理篇
• 开发者工具
  • CSS
  • HTML
  • JavaScript

BOM 篇

• 1. 哪些事件不会冒泡的事件，以及为什么不支持冒泡？
• 2. 使用 requestAnimationFrame 批量处理操作的原理
• 3. MessageChannel
• 4. 如何检测页面是否在前台运行
• 5. 为什么要用 setTimeout 模拟 setInterval ？
• 6. 浏览器本地如何读取并处理本地大文件
• 7. WebAssembly (Wasm)
• 11. requestIdleCallback

DOM 篇

浏览器渲染原理篇

• 8. 浏览器的渲染原理
• 10. 现代 Chrome 浏览器架构设计

开发者工具

整理所有关于开发这工具的一切！

CSS

• 计算样式：在“元素”面板中，查看元素的计算样式，了解最终应用的样式值。
• 盒模型：查看元素的盒模型，了解元素的尺寸、边距、边框和内边距。
• CSS 断点：在“源代码”面板中，设置样式表断点，当样式表被修改时，代码会暂停执行，帮助定位问题。
• 元素检查：右键点击页面元素，选择“检查”或按 F12 打开开发者工具，查看和修改元素的 CSS 样式。
• 实时编辑：在“元素”面板中，直接编辑 CSS 规则，实时查看效果。
• 样式层叠：查看元素的所有样式，包括用户代理样式、外部样式表、内联样式等，理解样式的层叠和优先级。

HTML

JavaScript

• 9. 浏览器中如何查找内存泄漏
• 实时修改代码 ：Shift+Enter 你可以尝试搭配使用 Shift+Enter 按键去输入多行代码