前端笔试常见的选择题目整理（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的
contextAPI适用场景？ - 如何实现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²)（可通过随机化优化）。 -
二叉树的层序遍历？
◦ 使用队列逐层访问节点，实现广度优先搜索。
注：以上答案综合自最新面经和网页，部分题目需结合具体场景作答。建议结合代码实践和项目经验准备，可参考网页中的场景题和网页的答题技巧。