news 2026/8/8 6:46:39

2026年面试题（一）

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
2026年面试题（一）

一、前端都有哪些技术

1）基础三层

  • HTML：页面结构，标签搭建页面骨架
  • CSS：页面样式，布局、颜色、动画；衍生：CSS3、SCSS/Sass、Less、Tailwind CSS
  • JavaScript：页面交互逻辑；ES6 + 语法

2）框架类

  • Vue2 / Vue3、React、Angular；小程序 uni‑app、Taro

3）构建工具

Vite、Webpack、Rollup、esbuild

4）Node 周边

Node.js、npm/yarn/pnpm；Express、Koa

5）HTTP 与浏览器

AJAX、Fetch、Axios；跨域、浏览器缓存、本地存储

6）UI 组件库

Vue：Element‑Plus、Ant Design Vue；React：Ant Design

7）其他

TypeScript（JS 类型增强）、ECharts 图表、WebGL、工程化、性能优化

二、本地存储（localStorage /sessionStorage/cookie / IndexedDB）优劣势

存储大小生命周期是否随 http 请求发送特点
cookie4KB可设置过期时间✅每次请求自动带上兼容老浏览器，存储量很小
localStorage5MB永久，手动删除❌不参与 http 请求持久化本地存储
sessionStorage5MB页面会话关闭即销毁❌标签页隔离，关闭页面丢失
IndexedDB几十 MB 以上持久化❌浏览器数据库，存大量二进制 / 对象

localStorage

✅优点：容量大，简单 API，持久保存，不占请求头 ❌缺点：仅字符串，不能存对象；同源限制；同步 API，大数据会阻塞主线程；不能存敏感信息

sessionStorage

✅优点：隔离不同标签页；关闭页面自动清空，安全；简单 API ❌缺点：关闭标签数据丢失；只能存字符串；同源限制

Cookie

✅优点：服务端可以读写，自动带给后端，兼容 IE ❌缺点：容量极小 4KB；每次 http 请求携带，增加流量；容易 XSS 窃取

IndexedDB

✅优点：大容量，可以存对象、二进制；异步不阻塞页面 ❌缺点：API 复杂，上手繁琐

总结：简单少量数据用 localStorage；会话临时数据 sessionStorage；需要后端读取用 cookie；大量数据用 IndexedDB。

三、Node.js 的优势

  1. JS 全栈能力：一套 JavaScript，前端写页面，后端写接口，不用切换语言。
  2. 非阻塞 IO（事件循环）：处理大量网络请求性能好，适合 IO 密集型（文件读写、接口转发）。
  3. npm 生态：世界最大开源包管理器，海量第三方库。
  4. 前端工程化基础：Webpack/Vite、TS 编译、ESLint、打包构建全部依赖 Node。
  5. 轻量部署：写接口简单，不需要笨重容器；适合做中间层、代理、脚本。

⚠️缺点：不适合 CPU 密集型计算，单线程，大量计算会阻塞事件循环。

四、Vue 生命周期（Vue2 / Vue3）

生命周期：组件从创建 → 挂载 → 更新 → 销毁的各个钩子函数

Vue2

  • beforeCreate：实例刚创建，data/methods 还不能访问
  • created：实例创建完成，data、methods 可以访问，DOM 还未生成，不能操作 DOM；常用请求接口
  • beforeMount：挂载前，模板编译完成，虚拟 DOM 生成
  • mounted：组件挂载完成，真实 DOM 已经渲染；可以操作 DOM、获取 DOM 节点
  • beforeUpdate：数据更新，DOM 还没更新
  • updated：数据更新完成，DOM 已经更新完毕
  • beforeDestroy：组件销毁前，定时器、事件监听在这里清除
  • destroyed：组件销毁完成

Vue3 setup 语法糖

组合式 API：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted

高频考点：created拿不到 DOM；mounted才能拿到 DOM；销毁前清除定时器防止内存泄漏。

五、Vue 如何适配 IE

Vue3不再支持 IE，Vue2 最高支持 IE11

  1. 使用Vue2，不要 Vue3
  2. 安装依赖：babel‑polyfill或者core‑js，转译 ES6 + 语法给 IE 识别
  3. webpack 配置，把node_modules里面部分包加入 babel 转译
  4. 避免使用 ES6+API，Promise、Array.includesIE 不支持，需要垫片 polyfill
  5. UI 库：Element‑UI 支持 IE11；Element‑Plus 不支持 IE
  6. 部分浏览器 API 兼容，例如fetch替换为 axios；不使用可选链?.
  7. index.html 加入 IE 兼容 meta 标签
<meta http‑equiv="X‑UA‑Compatible" content="IE=edge">

现实业务：现在大多放弃 IE；如果必须兼容只能选 Vue2。

六、同时支持微信 H5、PC 端、移动端方案

方案 1：响应式布局（一套代码多端）

  1. CSS 媒体查询@media；使用 rem/vw/vh 相对单位
  2. UI 库：Element‑Plus（PC）+ Vant（移动端）；或者使用Naive‑ui、Uni‑app
  3. 判断 UA，区分环境，做条件渲染：
// 判断是否微信环境 const isWechat = /MicroMessenger/i.test(navigator.userAgent) // 判断移动端 const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent)
  1. 微信 JS‑SDK：微信环境单独配置签名，调用微信能力（分享、拍照）

方案 2：两套页面（PC 一套，移动端一套）

  • 路由区分/pc、/h5，根据设备 UA 自动跳转。

关键点

  1. 微信 H5 独有逻辑：微信登录、微信分享，只在微信浏览器执行；PC 端屏蔽。
  2. 样式：PC 使用 px；移动端使用 vw/rem；禁止固定 px 硬写死。
  3. 点击事件：移动端 300ms 延迟，加 meta：
<meta name="viewport" content="width=device‑width, initial‑scale=1.0">

七、Vue 加载速度优化

📦打包构建优化

  1. 路由懒加载：组件动态导入，只加载当前页面组件
const Home = () => import('./views/Home.vue')
  1. 第三方库按需引入，不要全量导入 UI 库
  2. 大库做 CDN 外部引入，webpack 排除externals，不打包进 bundle
  3. 开启 vite/webpack 生产压缩；关闭 source‑map

🖼️资源优化

  1. 图片压缩；使用 webp 格式；图片懒加载；小图转 base64
  2. 字体文件压缩

🚀运行时优化

  1. v‑if 和 v‑show 合理选择；避免不必要组件渲染
  2. 列表渲染加key；大数据列表使用虚拟滚动
  3. 本地缓存接口数据，减少重复请求
  4. 开启浏览器缓存；使用 http 缓存策略

首屏体验

  • 首页骨架屏；loading 加载提示；SSR/SSG（Vue SSR / Nuxt）

八、Vue 常见指令

指令作用
v‑text设置元素文本内容
v‑html渲染 html 字符串（注意 XSS 风险）
v‑if条件渲染，销毁 / 重建 DOM
v‑show显示隐藏，css display 控制，DOM 还在
v‑for循环渲染列表，必须绑定 key
v‑bind/:绑定属性:class:src
v‑on/@绑定事件@click
v‑model表单双向绑定
v‑once只渲染一次，后续不再更新

重点区分：v‑if销毁 DOM；v‑show只是隐藏 DOM。高频考点。

九、如何循环读取 JSON

1. JSON 字符串先转 JS 对象

const jsonStr = '{"a":1,"b":2}' const obj = JSON.parse(jsonStr) // json字符串 → js对象

2. 对象循环

// 方式1 for in for(let key in obj){ console.log(key, obj[key]) } // 方式2 Object.keys Object.keys(obj).forEach(key=>{ console.log(key, obj[key]) }) // Object.values 获取值数组 Object.values(obj).forEach(val=>{})

3. JSON 数组循环

const jsonArr = '[{"name":"张三"},{"name":"李四"}]' const arr = JSON.parse(jsonArr) arr.forEach(item=>{ console.log(item.name) })

Vue 模板中循环 json 对象

<div v‑for="(value, key) in myObj" :key="key"> {{key}} : {{value}} </div>

十、JSON 定义字符串、对象

JSON 是字符串格式，不是 JS 对象。

  1. JSON：只能用双引号，不能写注释，key 必须双引号；不支持函数、undefined。

✅ JSON 对象字符串

{ "username":"张三", "age":18 }

js 代码写法：

// json字符串 const jsonObjStr = '{"username":"张三","age":18}' // JS普通对象（不是JSON！） const jsObj = { username:"张三", age:18 }

✅ JSON 数组字符串

const jsonArrStr = '[{"id":1},{"id":2}]'

转换 API

JSON.parse(jsonStr) // JSON字符串 → JS对象 JSON.stringify(jsObj) // JS对象 → JSON字符串

易错点：localStorage 只能存字符串，存对象必须JSON.stringify；读取JSON.parse还原。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/8/8 6:46:23

揭秘无锡网站建设365caiyi背后的技术逻辑与企业数字化生存之道

在这个信息爆炸、流量为王的时代，很多人对“做网站”这件事存在着极大的误解。他们常常以为，花钱买一个模板，或者随便找个外包公司出个页面，这就叫网站做好了。如果你也这么想，那可能正在一步步走向企业数字化的死胡同。今天，我想掏心窝子和大家聊聊，在无锡这片经济热土…

作者头像 李华
网站建设 2026/8/8 6:45:09

STM32 BootLoader实战：从内存规划到空中升级的完整实现

1. 项目概述&#xff1a;为什么我们需要一个BootLoader&#xff1f;如果你玩过STM32&#xff0c;肯定遇到过这样的场景&#xff1a;产品已经焊在板子上、装在壳子里了&#xff0c;突然发现程序有个bug需要修复&#xff0c;或者要增加一个新功能。这时候难道要把产品拆开&#x…

作者头像 李华
网站建设 2026/8/8 6:45:02

Kubernetes集群预检：从基础到智能化的实践指南

1. Kubernetes集群预检&#xff1a;为什么它比故障修复更重要刚接触Kubernetes时&#xff0c;我和大多数运维人员一样&#xff0c;总把精力放在故障排查上。直到有次线上事故让我付出了整整36小时不眠不休的代价&#xff0c;才真正明白&#xff1a;集群预检不是可选项&#xff…

作者头像 李华
网站建设 2026/8/8 6:42:02

自适应视觉证据调度：让AI学会高效观看长视频

在实际视频理解任务中&#xff0c;处理长视频一直是一个巨大的挑战。传统的视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;通常需要对视频的每一帧或密集采样的帧进行编码&#xff0c;这在面对数分钟甚至数小时的视频时&#xff0c;会带来难以承受的计算开…

作者头像 李华
网站建设 2026/8/8 6:41:10

基于WeChatBot API的Python SDK封装：简化微信机器人集成与开发

1. 项目概述与核心价值最近在做一个需要集成微信消息收发能力的自动化项目&#xff0c;第一反应就是去找有没有现成的轮子。市面上基于微信协议的机器人框架不少&#xff0c;但要么是封装得过于底层&#xff0c;需要处理一大堆网络协议和反爬逻辑&#xff0c;要么就是接口设计得…

作者头像 李华
网站建设 2026/8/8 6:38:18

用VS2015建设微网站：资深开发者的实战心得与避坑指南

在这个移动互联网几乎取代桌面互联网成为流量主战场的时代，很多老板和项目经理都会问我同一个问题：“我想做一个微信上的小程序或者H5页面，到底该怎么开始？用不用买什么昂贵的服务器？用不用懂很难的代码？”每次听到这种问题，我总会先笑一笑，因为我知道，他们其实是在问…

作者头像 李华