【KO】前端面试题四
以下是剩余题目的详细解答，结合前端知识体系和实际应用场景展开：
91. JS 放在 head 里和放在 body 里有什么区别？
| 对比维度 | 放在 <head> | 放在 <body> |
|---|---|---|
| 加载阻塞性 | 会阻塞页面渲染，需等待 JS 下载/执行完成后，才继续渲染页面 | 一般放在 </body> 前，页面渲染完成后再执行 JS，不阻塞渲染 |
| DOM 可访问性 | 执行时可能 DOM 未加载（如操作 document.getElementById 会返回 null ） | DOM 已渲染完成，可直接访问/操作元素 |
| 应用场景 | 需优先执行的代码（如关键依赖、统计脚本），但需配合 defer/async 避免阻塞 | 常规业务逻辑（如事件绑定、交互逻辑），保证 DOM 可用 |
| 示例 | <head><script src="app.js"></script></head>（需额外处理阻塞问题） | <body>...<script src="app.js"></script></body>（推荐写法） |
92. Eslint 代码检查的过程是啥？【必会】
Eslint 代码检查流程分 静态分析 和 规则校验 两大阶段，核心步骤：
- 解析代码：
- 将 JS 代码通过 Espree（Eslint 内置解析器 ）转换为抽象语法树（AST ），识别代码结构（如变量声明、函数调用 ）。
- 遍历 AST：
- Eslint 遍历 AST 节点，触发 规则监听函数（如检测
console.log的规则会监听MemberExpression节点 ）。
- Eslint 遍历 AST 节点，触发 规则监听函数（如检测
- 应用规则：
- 对每个节点，根据配置的规则（如
no-console禁止console）判断是否违规，违规则标记错误。
- 对每个节点，根据配置的规则（如
- 输出结果：
- 将违规信息格式化输出（命令行、编辑器提示 ），支持自动修复（
--fix）时修改代码 AST 并生成修复后的代码。
- 将违规信息格式化输出（命令行、编辑器提示 ），支持自动修复（
93. 虚拟滚动加载原理是什么，用代码简单实现一个虚拟滚动加载
原理：
虚拟滚动通过 只渲染可视区域内的 DOM ，而非全部列表，降低渲染压力。核心逻辑：
- 计算列表总高度并占位（用容器
padding模拟 ）。 - 监听滚动事件，动态计算 可视区域应渲染的起始/结束索引。
- 仅渲染可视区域的列表项，配合数据缓存实现滚动加载。
简易实现（Vue 示例，React/原生同理 ）：
<div class="virtual - list" @scroll="handleScroll"><!-- 占位容器，模拟总高度 --><div class="placeholder" :style="{ height: totalHeight + 'px' }"></div><!-- 实际渲染的列表 --><div class="visible - list"</