技术面
面试技巧
- 知识面要广
- 理解要深刻
- 内心要诚实
- 态度要谦虚
- 回答要灵活
- 要学会赞美
本篇重点内容：
- 渲染机制
- JS运行机制
- 页面性能
- 错误监控
渲染机制
- 什么是DOCTYPE及作用
DTD(document type definition,文档类型定义)是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。HTML5 <!DOCTYPE html> HTML 4.01 Strict # 该DTD包含所有HTML元素和属性，但不包括展示性和弃用的元素(比如font) <!DOCTYPE HTML PUBLIC "-//W3C//DTC HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional # 该DTD包含所有HTML元素和属性，但包括展示性和弃用的元素(比如font) <!DOCTYPE HTML PUBLIC "-//W3C//DTC HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">html - 浏览器渲染过程
DOM tree：
CSS tree:
Render tree:
Layout:
现代渲染热点（2024）
- 并发渲染：React 18 的Concurrent Rendering和Transition API能平衡交互与刷新，面试常问
startTransition适用场景以及如何避免意外的竞态。1 - 流式SSR：Next.js 14、Nuxt 3与SvelteKit都强调Streaming/Edge Rendering，要了解
ReadableStream、suspense和渐进水合（Partial Hydration）的实现原理。2 - RSC与服务器组件：如何把数据请求下沉到Server Components、避免客户端重复fetch是近年热门问题，可结合实际项目说明。3
- Web Workers & OffscreenCanvas：把DOM操作、AI推理或重计算迁移到Worker线程，配合
postMessage和Atomics优化长任务，是移动端性能加分项。 - 重排Reflow
- 定义：DOM结构中的各个元素都有自己的盒子(模型)，这些都需要浏览吕根据各种样式来计算并根据计算结果将元素放到它该出现的问题，这个过程称之为reflow。
- 触发Reflow：
- 当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
- 当你移动DOM的位置，或是搞个动画的时候
- 当你修改CSS样式的时候
- 当你Resize窗口的时候(移动端没有这个问题)，或者是滚动的时候
- 当你修改网页的
最常问：如何减少Reflow?或者避免Reflow？
- 重绘Repaint
- 定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。
页面要呈现的内容，通通都绘制到页面上。
- 触发Repaint
- DOM改动
- CSS改动
最常问：如何避免最小程序的Repaint？
- 布局Layout
JS运行机制
- 如何理解JS的单线程？
- 什么是任务队列(分同步任务，异步任务)
- 什么是Event Loop
案例来说明：
console.log(1)
setTimeout(function(){
console.log(3)
},0)
console.log(2)
输出：
123
javascript
js是单线程，那么异步在js中是如何实现的呢？其实，就是任务队列。
setTimeout是一个异步任务，异步任务要挂起。
console.log('A')
while(true){
}
console.log('B')
输出：
A # 页面会卡死
javascript
如果是下面：
console.log('A')
setTimeout(function(){
console.log('B')
},0)
while(1){
}
输出：
A # 页面会卡死
javascript
另外再来看看下面的题目：
for(var i=0; i < 4; i++) {
setTimeout(function(){
console.log(i)
},1000)
}
输出：
4
4
4
4
# 总运行时间1s
javascript
有哪些异步任务？
- 宏任务：
setTimeout、setInterval、setImmediate（Node）、MessageChannel、requestAnimationFrame等。 - 微任务：
Promise.then/catch/finally、queueMicrotask、MutationObserver、process.nextTick（Node）。 - 浏览器新增：
requestIdleCallback、IntersectionObserver、ReadableStream的队列回调都可能出现在追问里。 - 长任务拆分：掌握
navigator.scheduling.isInputPending()与postTask（Chromium 浏览器的实验特性），展示你对响应式编排的关注。4
页面性能
题目：提升页面性能的方法有哪些？
- 资源压缩合并，减少HTTP请求(开启gzip)
- 非核心代码异步加载—>异步加载方式—>异步加载的区别
- 利用浏览器缓存—>缓存的分类—>缓存的原理
- 使用CDN
- 预解析DNS
<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//host_name_to_prefetch.com">html
关于异步加载：
- 异步加载的方式
- 动态脚本加载
- defer
- async
- 异步加载的区别
- defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
- async是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关
示例代码：
Index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Defer</title>
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
</head>
<body>
<div>
test
</div>
<script type="text/javascript">
document.write('<span>write</span>')
</script>
<script>
for(var i=0; i < 200000; i++) {
if (i % 20000 === 0) {
console.log(i)
}
}
</script>
</body>
</html>
html
两个Deferjs中只有一句console.log('defer')
同理，可以尝试一下async属性
关于缓存的分类
- 强缓存
HTTP 头：Expires Expires: Thu, 21 Jan 2017 23:39:02 GMT Cache-Control Cache-Control:max-age=3600html - 协商缓存
Last-Modified If-Modified-Since Last-Modified: Web, 26 Jan 2017 00:35:11 GMT Etag If-None-Matchhtml
错误监控
- 前端错误的分类
- 即时运行错误：代码错误
- 资源加载错误
- 错误的捕获方式
- 即时运行错误的捕获方式
(1) try….catch
(2) window.onerrorwindow.onerror只能捕获及时运行错误，不能捕获资源加载错误
- 资源加载错误的捕获方式
(1) boject.onerror
(2) performance.getEntries()# console窗口中执行 performance.getEntries().foreach((item)=>{ console.log(item) }) #即可以打印网页上加载的资源javascript
(3) Error事件捕获
示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Error</title> <script> window.addEventListener('error', function (e) { console.log('捕获', e) }, true) </script> </head> <body> <script src="//baidu.com/fdsfdsfds.js" charset="utf-8"></script> </body> </html>html延伸：跨域的js运行错误可以捕获吗？错误提示什么，应用怎么处理？
解析：跨域的js运行错误也是可以捕获的
- 在script标签增加crossorigin属性
- 设置资源响应头Access-Control-Allow-Origin:*
- 即时运行错误的捕获方式
- 上报错误的基本原理
- 采用Ajax通信的方式上报
- 利用Image对象上报
// 只需要一行代码就可以实现 (new Image().src='http://baidu.com/test?r=data')javascript
前端AI/模型相关考点
- 流式响应：掌握使用
fetch+ReadableStream+TextDecoder渲染SSE/Chunked响应，同时处理取消、错误和节流。可参考OpenAI、Anthropic流式Completion示例。5 - 本地推理：Chrome 121+实验通道的
navigator.ml、WebGPU API与TensorFlow.js、ONNX Runtime Web组合常用于端侧分类/摘要，可准备模型体积管理与Fallback逻辑。6 - RAG前端链路：面试官会问如何把Embedding缓存到IndexedDB、如何在前端合并多路检索结果并提示引用来源。
- 模型可观测性：Sentry、Langfuse或Vercel Observability for AI可追踪提示词、延迟、Token消耗，准备好如何在前端上报Trace ID并与后端串联。7
- 安全防护：Prompt注入、越权调用、敏感信息外泄都是高频延伸题，可结合企业的安全策略（限流、审计、脱敏）说明你的实践。
Footnotes
- React. Introducing React 18, 2022. https://react.dev/blog/2022/03/29/react-v18 ↩
- Vercel. Streaming Server Rendering in Next.js 13+, 2023. https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming ↩
- React. Server Components Architecture, 2023. https://react.dev/reference/react/use-server ↩
- Chrome for Developers. scheduler.postTask(), 2023. https://developer.chrome.com/docs/web-platform/scheduler-post-task ↩
- OpenAI. Text Generation API Reference - Streaming, 2024. https://platform.openai.com/docs/guides/text-generation?lang=javascript#streaming ↩
- Chrome for Developers. Web AI &
navigator.ml, 2024. https://developer.chrome.com/docs/web-platform/web-ai ↩ - Vercel. Observability for AI Applications, 2024. https://vercel.com/blog/vercel-observability-for-ai ↩