前端笔试常见的选择题目整理(HTML/CSS、JavaScript、框架、性能优化)
以下是前端笔试常见的100道选择题目整理,结合最新行业趋势和面经整理,涵盖HTML/CSS、JavaScript、框架、性能优化等核心领域,并标注来源:
一、HTML/CSS基础(20题)
- HTML5为什么只需要写
<!DOCTYPE html>
? - 行内元素有哪些?块级元素有哪些?空元素有哪些?
link
和@import
引入CSS的区别?- 响应式设计中
viewport
的作用是什么? - 如何实现移动端适配?
data-*
属性的作用是什么?- 什么是BFC(块级格式化上下文)?
- CSS3的
transform
属性如何实现3D旋转? position: sticky
的触发条件是什么?- 如何实现图片懒加载?
flex-direction: column
时,主轴和交叉轴方向如何?z-index
在什么情况下无效?- 如何实现页面加载进度条?
:nth-child()
和:nth-of-type()
的区别?cursor: pointer
在什么元素上无效?- 如何禁止用户选择文本?
vertical-align
属性对行内元素的作用?box-sizing: border-box
的原理是什么?- 如何实现文字超出隐藏并显示省略号?
clip-path
的常见应用场景?
二、JavaScript核心(30题)
- JavaScript的
typeof null
返回什么? - 如何实现函数防抖和节流?
闭包
的典型应用场景有哪些?Promise
的then
方法返回什么?async/await
与Promise
的关系?this
在事件处理函数中的指向?Object.assign()
的浅拷贝特性?- 如何判断DOM元素是否在可视区域?
Array.from()
的作用?Map
和Object
的区别?JSON.stringify()
处理循环引用的结果?setTimeout
和setInterval
的区别?Function.prototype.bind()
的用途?try...catch
无法捕获的错误类型?事件委托
的原理是什么?深拷贝
的实现方法?原型链
继承的缺点?ES6
模块化如何实现?for...of
和for...in
的区别?NaN
的类型是什么?
三、框架与库(20题)
- React中
key
的作用? - Vue中
v-if
和v-for
为何不建议同用? - React组件生命周期中
render
的作用? - Vuex的
state
如何实现响应式? - Angular的依赖注入机制?
- React Router的
<Switch>
组件作用? - Vue的
computed
和methods
区别? - React的
PureComponent
原理? - Angular的
@Component
装饰器包含哪些属性? - Vue的
keep-alive
缓存策略? - React的
context
API适用场景? - 如何实现React高阶组件(HOC)?
- Vue的
nextTick
用途? - Angular的
*ngIf
和[hidden]
的区别? - React的
useMemo
和useCallback
用途? - Vue的
watchEffect
作用? - React的
Suspense
如何实现懒加载? - Angular的
HttpClient
拦截器? - React的
ErrorBoundary
如何捕获错误? - Vue的
provide/inject
模式?
四、性能优化(15题)
- 前端性能优化的反向思考方向?
- 如何减少首屏加载时间?
- 浏览器渲染页面的流程?
webpack
的Tree Shaking
原理?- 如何实现大文件上传?
HTTP/2
相比HTTP/1.1
的优势?- 前端缓存策略(Cache-Control)?
- 如何避免内存泄漏?
Web Worker
的应用场景?Service Worker
的离线缓存?- 如何统计全站请求耗时?
CSS
和JS
的异步加载?React.memo
的用途?Vue
的异步组件?CDN
加速的原理?- 如何压缩图片资源?
HTTP
缓存头ETag
的作用?WebAssembly
的应用场景?CSS Containment
优化渲染?requestIdleCallback
的用途?
五、网络与安全(10题)
- DNS查询过程?
- TCP三次握手和四次挥手?
CORS
的Access-Control-Allow-Origin
如何配置?XSS
攻击的防范方法?CSRF
攻击的防范措施?HTTPS
如何保证数据安全?WebSocket
与Socket.io
的区别?HTTP
状态码500
和502
的区别?API
网关的作用?- 跨域请求的
JSONP
原理?
六、工程化与工具(5题)
webpack
的sideEffects
属性作用?npm
脚本的&&
和||
用法?Git
的rebase
和merge
区别?ESLint
的no-unused-vars
规则?TypeScript
的类型推断机制?
七、算法与数据结构(5题)
- 快速排序的时间复杂度?
- 二叉树的层序遍历?
- 最长公共子序列问题?
- 哈希表冲突解决方法?
- 贪心算法的应用场景?
注:以上题目综合自等最新面经和网页,部分题目需结合具体场景作答。建议结合代码实践和项目经验准备,可参考网页中的场景题和网页的答题技巧。
一、HTML/CSS基础(20题)
-
HTML5为什么只需要写
<!DOCTYPE html>
?
• 声明位于文档最前端,触发浏览器标准模式解析,避免混杂模式下的兼容问题。 -
行内元素有哪些?块级元素有哪些?空元素有哪些?
• 行内元素:span
,a
,img
等;块级元素:div
,p
,ul
等;空元素:br
,hr
,img
等。 -
link
和@import
引入CSS的区别?
•link
是XHTML标签,加载时并行且无兼容问题;@import
是CSS语法,需页面加载完成后执行,存在兼容性限制。 -
响应式设计中
viewport
的作用是什么?
• 控制页面缩放比例,适配移动端屏幕,避免布局错乱。 -
如何实现移动端适配?
• 使用rem
/vw
单位、媒体查询、Flexbox布局,或第三方框架如Bootstrap。
二、JavaScript核心(30题)
-
JavaScript的
typeof null
返回什么?
•"object"
,历史遗留的类型判断问题。 -
如何实现函数防抖和节流?
• 防抖:通过定时器延迟执行,适用于高频触发场景(如搜索框输入)。
• 节流:固定时间间隔执行,适用于滚动加载等场景。 -
闭包的典型应用场景有哪些?
• 数据封装、私有变量、函数柯里化、事件监听器等。 -
Promise
的then
方法返回什么?
• 新的Promise对象,支持链式调用。 -
async/await
与Promise
的关系?
◦async/await
是Promise
的语法糖,使异步代码更易读。
三、框架与库(20题)
-
React中
key
的作用?
◦ 唯一标识列表项,优化DOM更新性能,避免渲染错误。 -
Vue中
v-if
和v-for
为何不建议同用?
◦ 优先级冲突可能导致渲染逻辑混乱,建议用计算属性或v-for
包裹v-if
。 -
React组件生命周期中
render
的作用?
◦ 返回虚拟DOM,触发重新渲染,不可直接操作DOM。 -
Vuex的
state
如何实现响应式?
◦ 通过Object.defineProperty
或Proxy劫持数据访问,触发视图更新。
四、性能优化(15题)
-
前端性能优化的反向思考方向?
◦ 从用户感知出发,优先优化首屏加载、交互响应、资源压缩等。 -
如何减少首屏加载时间?
◦ 代码分割(Webpack)、懒加载(React.lazy
)、CDN加速、压缩资源。 -
浏览器渲染页面的流程?
◦ 解析HTML构建DOM树 → CSSOM树 → 合并为渲染树 → 布局(Layout)→ 绘制(Paint)→ 合成(Composite)。
五、网络与安全(10题)
-
CORS的
Access-Control-Allow-Origin
如何配置?
◦ 设置允许访问的源(如*
或具体域名),控制跨域请求权限。 -
XSS攻击的防范方法?
◦ 输入过滤、输出转义、使用CSP(内容安全策略)。 -
HTTPS如何保证数据安全?
◦ 通过SSL/TLS协议加密传输数据,验证服务器身份。
六、工程化与工具(5题)
-
webpack的
sideEffects
属性作用?
◦ 告知打包工具哪些文件有副作用,优化Tree Shaking。 -
Git的
rebase
和merge
区别?
◦rebase
线性化提交历史,merge
保留分支合并记录。
七、算法与数据结构(5题)
-
快速排序的时间复杂度?
◦ 平均O(n log n),最坏O(n²)(可通过随机化优化)。 -
二叉树的层序遍历?
◦ 使用队列逐层访问节点,实现广度优先搜索。
注:以上答案综合自最新面经和网页,部分题目需结合具体场景作答。建议结合代码实践和项目经验准备,可参考网页中的场景题和网页的答题技巧。