当前位置: 首页 > article >正文

前端笔试常见的选择题目整理(HTML/CSS、JavaScript、框架、性能优化)

以下是前端笔试常见的100道选择题目整理,结合最新行业趋势和面经整理,涵盖HTML/CSS、JavaScript、框架、性能优化等核心领域,并标注来源:


一、HTML/CSS基础(20题)

  1. HTML5为什么只需要写<!DOCTYPE html>
  2. 行内元素有哪些?块级元素有哪些?空元素有哪些?
  3. link@import引入CSS的区别?
  4. 响应式设计中viewport的作用是什么?
  5. 如何实现移动端适配?
  6. data-*属性的作用是什么?
  7. 什么是BFC(块级格式化上下文)?
  8. CSS3的transform属性如何实现3D旋转?
  9. position: sticky的触发条件是什么?
  10. 如何实现图片懒加载?
  11. flex-direction: column时,主轴和交叉轴方向如何?
  12. z-index在什么情况下无效?
  13. 如何实现页面加载进度条?
  14. :nth-child():nth-of-type()的区别?
  15. cursor: pointer在什么元素上无效?
  16. 如何禁止用户选择文本?
  17. vertical-align属性对行内元素的作用?
  18. box-sizing: border-box的原理是什么?
  19. 如何实现文字超出隐藏并显示省略号?
  20. clip-path的常见应用场景?

二、JavaScript核心(30题)

  1. JavaScript的typeof null返回什么?
  2. 如何实现函数防抖和节流?
  3. 闭包的典型应用场景有哪些?
  4. Promisethen方法返回什么?
  5. async/awaitPromise的关系?
  6. this在事件处理函数中的指向?
  7. Object.assign()的浅拷贝特性?
  8. 如何判断DOM元素是否在可视区域?
  9. Array.from()的作用?
  10. MapObject的区别?
  11. JSON.stringify()处理循环引用的结果?
  12. setTimeoutsetInterval的区别?
  13. Function.prototype.bind()的用途?
  14. try...catch无法捕获的错误类型?
  15. 事件委托的原理是什么?
  16. 深拷贝的实现方法?
  17. 原型链继承的缺点?
  18. ES6模块化如何实现?
  19. for...offor...in的区别?
  20. NaN的类型是什么?

三、框架与库(20题)

  1. React中key的作用?
  2. Vue中v-ifv-for为何不建议同用?
  3. React组件生命周期中render的作用?
  4. Vuex的state如何实现响应式?
  5. Angular的依赖注入机制?
  6. React Router的<Switch>组件作用?
  7. Vue的computedmethods区别?
  8. React的PureComponent原理?
  9. Angular的@Component装饰器包含哪些属性?
  10. Vue的keep-alive缓存策略?
  11. React的context API适用场景?
  12. 如何实现React高阶组件(HOC)?
  13. Vue的nextTick用途?
  14. Angular的*ngIf[hidden]的区别?
  15. React的useMemouseCallback用途?
  16. Vue的watchEffect作用?
  17. React的Suspense如何实现懒加载?
  18. Angular的HttpClient拦截器?
  19. React的ErrorBoundary如何捕获错误?
  20. Vue的provide/inject模式?

四、性能优化(15题)

  1. 前端性能优化的反向思考方向?
  2. 如何减少首屏加载时间?
  3. 浏览器渲染页面的流程?
  4. webpackTree Shaking原理?
  5. 如何实现大文件上传?
  6. HTTP/2相比HTTP/1.1的优势?
  7. 前端缓存策略(Cache-Control)?
  8. 如何避免内存泄漏?
  9. Web Worker的应用场景?
  10. Service Worker的离线缓存?
  11. 如何统计全站请求耗时?
  12. CSSJS的异步加载?
  13. React.memo的用途?
  14. Vue的异步组件?
  15. CDN加速的原理?
  16. 如何压缩图片资源?
  17. HTTP缓存头ETag的作用?
  18. WebAssembly的应用场景?
  19. CSS Containment优化渲染?
  20. requestIdleCallback的用途?

五、网络与安全(10题)

  1. DNS查询过程?
  2. TCP三次握手和四次挥手?
  3. CORSAccess-Control-Allow-Origin如何配置?
  4. XSS攻击的防范方法?
  5. CSRF攻击的防范措施?
  6. HTTPS如何保证数据安全?
  7. WebSocketSocket.io的区别?
  8. HTTP状态码500502的区别?
  9. API网关的作用?
  10. 跨域请求的JSONP原理?

六、工程化与工具(5题)

  1. webpacksideEffects属性作用?
  2. npm脚本的&&||用法?
  3. Gitrebasemerge区别?
  4. ESLintno-unused-vars规则?
  5. TypeScript的类型推断机制?

七、算法与数据结构(5题)

  1. 快速排序的时间复杂度?
  2. 二叉树的层序遍历?
  3. 最长公共子序列问题?
  4. 哈希表冲突解决方法?
  5. 贪心算法的应用场景?

:以上题目综合自等最新面经和网页,部分题目需结合具体场景作答。建议结合代码实践和项目经验准备,可参考网页中的场景题和网页的答题技巧。


一、HTML/CSS基础(20题)

  1. HTML5为什么只需要写<!DOCTYPE html>
    • 声明位于文档最前端,触发浏览器标准模式解析,避免混杂模式下的兼容问题。

  2. 行内元素有哪些?块级元素有哪些?空元素有哪些?
    • 行内元素:span, a, img等;块级元素:div, p, ul等;空元素:br, hr, img等。

  3. link@import引入CSS的区别?
    link是XHTML标签,加载时并行且无兼容问题;@import是CSS语法,需页面加载完成后执行,存在兼容性限制。

  4. 响应式设计中viewport的作用是什么?
    • 控制页面缩放比例,适配移动端屏幕,避免布局错乱。

  5. 如何实现移动端适配?
    • 使用rem/vw单位、媒体查询、Flexbox布局,或第三方框架如Bootstrap。


二、JavaScript核心(30题)

  1. JavaScript的typeof null返回什么?
    "object",历史遗留的类型判断问题。

  2. 如何实现函数防抖和节流?
    防抖:通过定时器延迟执行,适用于高频触发场景(如搜索框输入)。
    节流:固定时间间隔执行,适用于滚动加载等场景。

  3. 闭包的典型应用场景有哪些?
    • 数据封装、私有变量、函数柯里化、事件监听器等。

  4. Promisethen方法返回什么?
    • 新的Promise对象,支持链式调用。

  5. async/awaitPromise的关系?
    async/awaitPromise的语法糖,使异步代码更易读。


三、框架与库(20题)

  1. React中key的作用?
    ◦ 唯一标识列表项,优化DOM更新性能,避免渲染错误。

  2. Vue中v-ifv-for为何不建议同用?
    ◦ 优先级冲突可能导致渲染逻辑混乱,建议用计算属性或v-for包裹v-if

  3. React组件生命周期中render的作用?
    ◦ 返回虚拟DOM,触发重新渲染,不可直接操作DOM。

  4. Vuex的state如何实现响应式?
    ◦ 通过Object.defineProperty或Proxy劫持数据访问,触发视图更新。


四、性能优化(15题)

  1. 前端性能优化的反向思考方向?
    ◦ 从用户感知出发,优先优化首屏加载、交互响应、资源压缩等。

  2. 如何减少首屏加载时间?
    ◦ 代码分割(Webpack)、懒加载(React.lazy)、CDN加速、压缩资源。

  3. 浏览器渲染页面的流程?
    ◦ 解析HTML构建DOM树 → CSSOM树 → 合并为渲染树 → 布局(Layout)→ 绘制(Paint)→ 合成(Composite)。


五、网络与安全(10题)

  1. CORS的Access-Control-Allow-Origin如何配置?
    ◦ 设置允许访问的源(如*或具体域名),控制跨域请求权限。

  2. XSS攻击的防范方法?
    ◦ 输入过滤、输出转义、使用CSP(内容安全策略)。

  3. HTTPS如何保证数据安全?
    ◦ 通过SSL/TLS协议加密传输数据,验证服务器身份。


六、工程化与工具(5题)

  1. webpack的sideEffects属性作用?
    ◦ 告知打包工具哪些文件有副作用,优化Tree Shaking。

  2. Git的rebasemerge区别?
    rebase线性化提交历史,merge保留分支合并记录。


七、算法与数据结构(5题)

  1. 快速排序的时间复杂度?
    ◦ 平均O(n log n),最坏O(n²)(可通过随机化优化)。

  2. 二叉树的层序遍历?
    ◦ 使用队列逐层访问节点,实现广度优先搜索。


:以上答案综合自最新面经和网页,部分题目需结合具体场景作答。建议结合代码实践和项目经验准备,可参考网页中的场景题和网页的答题技巧。


http://www.kler.cn/a/585389.html

相关文章:

  • VIC模型率定验证
  • 从零基础到能独立设计单片机产品,一般需要经历哪些学习阶段?
  • 鸿蒙初级考试备忘
  • SmartFormat:轻量级文本模板库,轻松替代 string.Format
  • 如何上传文件到github
  • NAT 和 IP 直接通信的区别
  • 汽车无钥匙启动系统不使用传统机械钥匙启动汽车
  • 记.net core 8 集成 grpc
  • BGP路由聚合
  • WebSocket 使用教程:从原理到实践
  • 搜广推校招面经四十九
  • 探索Trae:Cursor的完美替代,Claude-3.5-Sonnet与GPT-4o免费体验
  • VUE的脚手架搭建引入类库
  • 课上测试:MIRACL共享库使用测试
  • Matlab 灰度质心+抛物线拟合提取条纹中心
  • 黑马JUC学习笔记-上
  • 优化Go错误码管理:构建清晰、优雅的HTTP和gRPC错误码规范
  • Java通过Apache POI操作Excel
  • 正则表达式入门及常用的正则表达式
  • 封装WPF中转换器常用用法封装