前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >2025最新出炉--前端面试题六

2025最新出炉--前端面试题六

作者头像
全栈若城
发布于 2025-02-12 01:51:49
发布于 2025-02-12 01:51:49
33900
代码可运行
举报
文章被收录于专栏:若城技术专栏若城技术专栏
运行总次数:0
代码可运行
1. 我看你项目里有提到 nuxt 做 seo 优化

回答: 是的,Nuxt.js 通过服务端渲染(SSR)生成静态 HTML 页面,提升搜索引擎爬虫的抓取效果,具体优化点包括:

  • 预渲染页面:服务端直接返回完整的 HTML 结构,避免客户端渲染的空白页面问题。
  • 动态路由静态化:结合 generate 配置,将动态路由预生成静态文件(如商品详情页)。
  • Meta 标签管理:通过 head() 方法动态设置页面标题、关键词等 SEO 关键信息。

2. nuxt 通常会被称为同构应用, 你能解释一下他的同构过程吗

回答: 同构(Isomorphic)指代码在服务端和客户端均可运行,Nuxt 的同构过程如下:

  1. 服务端渲染
    • 首次访问时,服务端执行 Vue 组件逻辑,生成 HTML 并返回给浏览器。
    • 数据通过 asyncDatafetch 在服务端预取。
  2. 客户端激活
    • 浏览器下载客户端 JS 后,Vue 执行“注水”(Hydration),将静态 HTML 转换为可交互的 SPA。
  3. 路由切换
    • 后续页面跳转由客户端处理,仅请求数据并局部更新。

3. 除了 nuxt 这种, 你还有其他对原项目改动较小的, seo 优化方案吗

回答: 是的,其他 SEO 优化方案:

  • 预渲染(Prerendering):使用 prerender-spa-plugin 对指定路由生成静态 HTML。
  • 动态渲染(Dynamic Rendering):根据 User-Agent 返回不同内容(对爬虫返回预渲染 HTML)。
  • 使用无头浏览器:如 Puppeteer 在构建时生成静态页面。

4. 像是后台项目, 都会有一些复杂的表单联动, 你能描述一下吗

回答: 复杂表单联动常见场景:

  • 条件显示字段:如选择“企业用户”后显示“公司名称”字段。
  • 级联选择:如选择省份后动态加载城市列表。
  • 动态校验规则:根据字段值调整校验逻辑(如邮箱或手机号二选一)。

实现方案

  • Vue:使用 v-ifwatch 监听字段变化,结合 async-validator 动态校验。
  • React:通过 useState 管理状态,利用 useEffect 处理依赖关系。

5. react 使用过吗, vue3 了解吗

回答: 是的,React 和 Vue3 均有实际使用经验:

  • React:熟悉 Hooks(useState、useEffect)、Context API、性能优化(memo、useCallback)。
  • Vue3:掌握 Composition API、<script setup> 语法、Teleport、响应式原理(Proxy)。

6. vue3 有哪些升级点能说一下吗

回答: Vue3 主要升级点:

  1. Composition API:逻辑复用更灵活,替代 Options API。
  2. 性能优化
    • Proxy 替代 Object.defineProperty,支持深层对象监听。
    • 编译时优化(静态节点提升、补丁标记)。
  3. Tree-shaking:按需引入 API,减小打包体积。
  4. 新组件:Fragment(多根节点)、Teleport(传送门)、Suspense(异步组件)。

7. Promise 新增的 allSettled 和 all 之间有什么区别

回答:

  • Promise.all: 所有 Promise 成功时返回结果数组;任一失败立即 reject。
  • Promise.allSettled: 等待所有 Promise 完成(无论成功或失败),返回结果数组,包含每个 Promise 的状态和值。

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// allSettled 结果格式:
[{ status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'Error' }]

8. 在 es5 里面怎么实现继承呢

回答: ES5 实现继承的常见方式:

  1. 原型链继承
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   function Parent() {}
   function Child() {}
   Child.prototype = new Parent(); // 问题:父类属性被所有实例共享
  1. 构造函数继承
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   function Child() { Parent.call(this); } // 问题:无法继承父类原型方法
  1. 组合继承
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   function Child() { Parent.call(this); }
   Child.prototype = new Parent();
   Child.prototype.constructor = Child; // 解决上述两种问题

9. 能说一下跨域吗

回答: 跨域是浏览器同源策略(协议、域名、端口一致)的限制,解决方式:

  1. CORS:服务端设置响应头(如 Access-Control-Allow-Origin: *)。
  2. JSONP:利用 <script> 标签跨域请求(仅支持 GET)。
  3. 代理服务器:前端开发服务器代理请求(如 Webpack devServer)。

10. 浏览器为什么会有跨域的限制, 浏览器如果不限制跨域会怎样

回答:

  • 原因:防止恶意网站通过脚本窃取用户数据(如 Cookie)。
  • 不限制的后果

  • CSRF 攻击更易发生,用户敏感信息可能被非法获取。
  • 任意网站可随意读取其他域下的资源(如银行页面内容)。

11. 你能详细说一下 cors 跨域的具体过程吗

回答: CORS 跨域流程:

  1. 简单请求(GET/POST/HEAD,且 Content-Type 为 text/plainapplication/x-www-form-urlencodedmultipart/form-data):
    • 浏览器直接发送请求,检查响应头 Access-Control-Allow-Origin 是否匹配当前域。
  2. 预检请求(复杂请求如 PUT、DELETE 或自定义头部):
    • 浏览器先发送 OPTIONS 请求,检查服务端是否允许实际请求的 Method 和 Headers。
    • 服务端响应 Access-Control-Allow-MethodsAccess-Control-Allow-Headers
    • 预检通过后,发送实际请求。

12. 能说一下你对 js 闭包的理解吗

回答: 闭包(Closure)是函数与其词法环境的组合,特性:

  • 定义:内部函数可以访问外部函数的作用域,即使外部函数已执行完毕。
  • 作用
    • 封装私有变量(如计数器实现)。
    • 延长变量生命周期(如事件回调中保留状态)。 示例
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function createCounter() {
  let count = 0;
  return () => count++; // 返回的函数闭包引用了 count
}

13. 在 js 里面有哪些会造成内存泄漏

回答: 常见内存泄漏场景:

  1. 未清理的定时器或事件监听
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  const timer = setInterval(() => {}, 1000);
  // 忘记 clearInterval(timer)
  1. 闭包滥用:意外保留对大对象的引用。
  2. 全局变量:未使用 var/let/const 声明变量,导致变量挂载到 window
  3. DOM 引用未释放
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  const element = document.getElementById('id');
  // 即使删除 DOM,element 仍保留引用

14. webpack 你平时会有一些配置吗

回答: 常用 Webpack 配置:

  • 入口/出口entryoutput
  • Loader:处理 CSSstyle-loadercss-loader)、图片(file-loader)。
  • 插件HtmlWebpackPlugin 生成 HTML,CleanWebpackPlugin 清理构建目录。
  • 优化:代码分割、压缩(TerserPlugin)、缓存(contenthash)。

15. 你能说一下 loader 和 plugin 之间有什么区别吗

回答:

  1. Loader
  • 用于处理模块源码(如转换 ES6、加载 CSS)。
  • module.rules 中配置,链式调用(从右到左)。
  1. Plugin
  • 扩展 Webpack 功能(如生成 HTML、压缩代码)。
  • plugins 数组中配置,通过钩子介入构建生命周期。

16. webpack 里面的 chunkhash 和 contenthash 有什么区别

回答:

  • chunkhash:基于 chunk 内容生成,同一 chunk 内所有文件共享相同 hash(如 JS 和 CSS 属于同一 chunk)。
  • contenthash:基于文件内容生成,文件内容不变则 hash 不变(适用于独立缓存 CSS 文件)。

17. webpack5 你有了解过吗

回答: 是的,Webpack5 主要改进:

  1. 持久化缓存:通过 cache: { type: 'filesystem' } 显著提升构建速度。
  2. 模块联邦(Module Federation):实现微前端架构,跨应用共享模块。
  3. 资源处理优化:内置 Asset Modules(替代 file-loader)。
  4. Tree Shaking 增强:支持嵌套模块的未使用代码消除。

18. es6 里面的模板字符串有什么特殊功能吗

回答: 模板字符串(Template Literals)特性:

  1. 多行字符串:无需 \n 或拼接符号。
  2. 嵌入表达式:通过 ${} 插入变量或表达式。
  3. 标签模板:自定义函数处理字符串和变量。 示例
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const name = 'Alice';
console.log(`Hello, ${name}!`); // Hello, Alice!

19. grid 布局有了解吗

回答: Grid 布局是二维布局系统,核心概念:

  1. 容器属性
  • display: gridgrid-template-columns 定义列宽。
  • gap 设置行列间距。
  1. 项目属性
  • grid-columngrid-row 控制项目位置。
  • grid-area 定义项目在网格中的区域。 优势:相比 Flexbox 更适合复杂布局(如棋盘、仪表盘)。

20. 响应式布局都有哪些方案

回答: 常见响应式方案:

  1. 媒体查询(Media Queries):根据屏幕尺寸应用不同样式。
  2. Flexbox:弹性布局,适合一维排列。
  3. Grid 布局:二维布局,支持复杂响应式结构。
  4. REM/VW 单位:基于视口宽度动态调整元素尺寸。
  5. 框架方案:Bootstrap 栅格系统、Tailwind CSS 断点工具。

21. 平时都使用过哪些 css 预处理器

回答: 常用 CSS 预处理器:

  • Sass/SCSS:支持变量、嵌套、Mixin、模块化。
  • Less:语法类似 Sass,配置更简单。
  • Stylus:灵活性高,可省略括号和分号。

22. async/await 在 v8 引擎里是怎么实现的

回答: async/await 底层基于 Generator 和 Promise 实现:

  • 转换过程async 函数被转换为 Generator 函数,通过 yield 暂停执行。 V8 使用 Promise 自动处理异步操作,通过 next() 恢复执行。
  • 执行流程

  • 遇到 await 时,暂停并等待 Promise 完成。
  • Promise 解决后,继续执行后续代码。

23. 那你能说一下 generator 吗

回答: Generator 是 ES6 的异步编程解决方案,特性:

  • 定义:通过 function* 声明,内部使用 yield 暂停执行。
  • 执行:调用 next() 恢复执行,返回 { value, done }示例
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function* gen() {
  yield 1;
  yield 2;
}
const g = gen();
g.next(); // { value: 1, done: false }

24. 你觉得 generator 可以用来解决什么问题

回答:

Generator 适用场景:

  1. 异步流程控制:结合 yield 和 Promise 实现类似 async/await 的效果。
  2. 惰性求值:按需生成数据(如大数据分页遍历)。
  3. 状态机:管理复杂的状态流转(如游戏角色行为)。
25. http1.1 和 http2 之间有什么区别

回答: HTTP/2 核心改进:

  1. 二进制分帧:数据以二进制帧传输,替代 HTTP/1.1 的文本格式。
  2. 多路复用:一个连接并行处理多个请求,解决队头阻塞问题。
  3. 头部压缩:HPACK 算法减少头部大小。
  4. 服务器推送:服务端主动推送资源(如 CSS、JS)。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验