前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • 基础进阶

    • 基础篇
    • 进阶篇
      • 一、JS基础
        • 1 类型及检测方式
        • 2 This
        • 3 apply/call/bind 原理
        • 4 变量提升
        • 5 执行上下文
        • 6 作用域
        • 7 闭包
        • 8 New的原理
        • 9 原型/原型链
        • 10 继承
        • 11 面向对象
        • 12 事件机制
        • 13 模块化
        • 14 Iterator迭代器
        • 15 Promise
        • 16 Generator
        • 17 async/await
        • 18 事件循环
        • 19 垃圾回收
        • 20 内存泄露
        • 21 深浅拷贝
        • 22 节流与防抖
        • 23 Proxy代理
        • 24 Ajax
        • 25 深入数组
      • 二、HTML
        • 1 meta 标签:自动刷新/跳转
        • 2 viewport
        • 3 性能优化
        • 4 如何高效操作DOM
      • 三、CSS基础
        • 1 盒模型
        • 2 BFC
        • 3 层叠上下文
        • 4 左右居中方案
        • 5 上下垂直居中方案
        • 6 选择器权重计算方式
        • 7 清除浮动
        • 8 左边定宽,右边自适应方案
        • 9 左右两边定宽,中间自适应
        • 10 CSS动画和过渡
        • 11 CSS3的新特性
        • 12 列举几个css中可继承和不可继承的元素
      • 四、浏览器
        • 1 浏览器架构
        • 2 JavaScript单线程模型
        • 3 Chrome 打开一个页面需要启动多少进程?分别有哪些进程?
        • 4 渲染机制
        • 5 缓存机制
        • 6 浏览器存储
        • 7 跨域方案
        • 8 XSS 和 CSRF
        • 9 Service Worker
        • 10 DOM 节点操作
        • 11 掌握页面的加载过程
        • 12 从输入URL到页面展示过程
        • 13 渲染引擎什么情况下才会为特定的节点创建新的图层
        • 14 定时器与requestAnimationFrame、requestIdleCallback
      • 五、框架通识
      • 六、Vue
        • 1 Vue 响应式原理
        • 2 发布订阅模式和观察者模式
        • 3 为什么使用 Virtual DOM
        • 4 VDOM:三个 part
        • 5 vue 和 react技术选型
        • 6 nextTick
        • 7 生命周期
        • 8 vue-router
        • 9 vuex
        • 10 vue3带来的新特性/亮点
        • 11 Compositon api
        • 12 computed 的实现原理
        • 13 watch 的理解
        • 14 vue 渲染过程
        • 15 说一说keep-alive实现原理
        • 16 为什么访问data属性不需要带data
        • 17 template预编译是什么
        • 18 介绍一下Vue中的Diff算法
        • 19 说说Vue2.0和Vue3.0有什么区别
      • 七、React
        • 0 对虚拟DOM的理解
        • 1 谈谈你对React的理解
        • 2 如何避免React生命周期中的坑
        • 3 React Fiber架构
        • 4 createElement过程
        • 5 调和阶段 setState内部干了什么
        • 6 setState
        • 7 setState原理分析
        • 8 React事务机制
        • 9 React组件和渲染更新过程
        • 10 如何解释 React 的渲染流程
        • 11 diff算法是怎么运作
        • 12 合成事件原理
        • 13 JSX语法糖本质
        • 14 为什么 React 元素有一个 $$typeof 属性
        • 15 Virtual DOM 的工作原理是什么
        • 16 React有哪些优化性能的手段
        • 17 Redux实现原理解析
        • 18 谈谈你对状态管理的理解
        • 19 connect组件原理分析
        • 20 React Hooks
        • 21 受控组件和非受控组件
        • 22 如何避免ajax数据请求重新获取
        • 23 组件之间通信
        • 24 类组件与函数组件有什么区别呢?
        • 25 如何设计React组件
        • 26 组件的协同及(不)可控组件
        • 27 React-Router 的实现原理及工作方式分别是什么
        • 28 React 17 带来了哪些改变
      • 八、性能
        • 1 DNS 预解析
        • 2 缓存
        • 3 使用 HTTP / 2.0
        • 4 预加载
        • 5 预渲染
        • 6 懒执行与懒加载
        • 7 文件优化
        • 8 其他
        • 9 如何根据chrome的timing优化
        • 10 移动端优化
      • 九、工程化
        • 1 介绍一下 webpack 的构建流程
        • 2 介绍 Loader
        • 3 介绍 plugin
        • 4 webpack 热更新实现原理
        • 5 webpack 层面如何做性能优化
        • 6 介绍一下 Tree Shaking
        • 7 介绍一下 webpack scope hosting
        • 8 Webpack Proxy工作原理?为什么能解决跨域
        • 9 介绍一下 babel原理
        • 10 介绍一下Rollup
      • 十、HTTP
        • HTTP状态码
        • 1 HTTP前生今世
        • 2 HTTP世界全览
        • 3 HTTP分层
        • 4 HTTP报文是什么样子的
        • 5 HTTP之URL
        • 6 HTTP实体数据
        • 7 谈一谈HTTP协议优缺点
        • 8 说一说HTTP 的请求方法
        • 9 谈一谈GET 和 POST 的区别
        • 10 谈一谈队头阻塞问题
        • 11 谈一谈HTTP数据传输
        • 12 cookie 和 session
        • 13 介绍一下HTTPS和HTTP区别
        • 14 HTTPS握手过程
        • 15 介绍一个HTTPS工作原理
        • 16 SSL 连接断开后如何恢复
        • 17 谈一谈你对HTTP/2理解
        • 18 HTTP3
        • 19 HTTP/1.0 HTTP1.1 HTTP2.0版本之间的差异
        • 20 DNS如何工作的
        • 21 短轮询、长轮询和 WebSocket 间的区别
        • 22 说一说正向代理和反向代理
        • 23 介绍一下Connection:keep-alive
        • 24 http/https 协议总结
        • 25 TCP为什么要三次握手
        • 26 为什么要有 WebSocket
        • 27 UDP和TCP有什么区别
      • 十一、9种前端常见的设计模式
        • 1. 外观模式
        • 2. 代理模式
        • 3. 工厂模式
        • 4. 单例模式
        • 5. 策略模式
        • 6. 迭代器模式
        • 7. 观察者模式
        • 8. 中介者模式
        • 9. 访问者模式
      • 十二、综合问题
        • 前端常见面试流程
        • 面试一定要问这几个问题
        • 经历
        • 项目相关
        • 项目难点问题分析
        • 项目流程相关面试题
        • 把握投递简历的黄金时间段
        • 把握面试时的关键点
        • 工作交接流程 & 福利衔接
      • 十三、人事面
        • 第一个要点: 你是否胜任这份工作?
        • 第二个要点:你是怎样的人?
        • 第三个要点:你是否适合这个企业?
        • 第四个要点:聘用你,公司需付出多少?
    • 高频篇
    • 手写篇
    • 设计模式
  • 精选模块

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

前端进阶面试题大全:JavaScript、性能优化、工程化与源码解析

# 进阶篇

相关专题:本篇适合系统准备中高级前端面试。需要规划完整顺序可先看 前端面试题大全与复习路线;需要现场编码练习可进入 前端手写面试题,需要快速查漏补缺可使用 每日一题综合题库。

# 一、JS基础

# 1 类型及检测方式

30 秒速记

  • 原始类型 7 个:number、string、boolean、null、undefined、symbol、bigint;其余都是引用类型
  • 存储差异:原始类型值存栈上,引用类型值在堆上、栈里只存地址
  • 四种检测手段:typeof(原始够用,null 和引用类型分不清)、instanceof(看原型链,跨 iframe 失效)、constructor(可被改写)、Object.prototype.toString.call()(最准)
  • typeof null === 'object' 是历史遗留 bug,判断数组一律用 Array.isArray
  • 加分点:Object.prototype.toString 之所以准,是因为它读的是内部标签 Symbol.toStringTag

JavaScript 有 7 种基本类型和 Object 引用类型,检测时要根据目标选择 typeof、instanceof 或 Object.prototype.toString.call()。 typeof 适合基本类型和函数,但 typeof null、数组及普通对象都会得到 object。instanceof 本质上检查原型链,适合引用类型,却不能正确判断基本类型,而且 constructor 可能被修改。需要精确区分数组、日期、正则等对象时,我一般会用 Object.prototype.toString.call()。

把这个知识点单独学透

结合独立示例、易错点和追问,复习下面这些题目。

  • JavaScript 闭包是什么?
  • JavaScript 事件循环如何执行?
  • Object.is、=== 与 SameValueZero 的差别
  • Promise.all 传入空数组时,会怎样?
  • Promise.all 的输入数组中如果存在非 Promise 值,会如何处理?
  • Promise.all 在其中一个 Promise 被拒绝时,会立即拒绝吗?其他 Promise 的结果如何处理?

← 基础篇高频篇 →

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • 基础进阶

    • 基础篇
    • 进阶篇
      • 一、JS基础
        • 1 类型及检测方式
        • 2 This
        • 3 apply/call/bind 原理
        • 4 变量提升
        • 5 执行上下文
        • 6 作用域
        • 7 闭包
        • 8 New的原理
        • 9 原型/原型链
        • 10 继承
        • 11 面向对象
        • 12 事件机制
        • 13 模块化
        • 14 Iterator迭代器
        • 15 Promise
        • 16 Generator
        • 17 async/await
        • 18 事件循环
        • 19 垃圾回收
        • 20 内存泄露
        • 21 深浅拷贝
        • 22 节流与防抖
        • 23 Proxy代理
        • 24 Ajax
        • 25 深入数组
      • 二、HTML
        • 1 meta 标签:自动刷新/跳转
        • 2 viewport
        • 3 性能优化
        • 4 如何高效操作DOM
      • 三、CSS基础
        • 1 盒模型
        • 2 BFC
        • 3 层叠上下文
        • 4 左右居中方案
        • 5 上下垂直居中方案
        • 6 选择器权重计算方式
        • 7 清除浮动
        • 8 左边定宽,右边自适应方案
        • 9 左右两边定宽,中间自适应
        • 10 CSS动画和过渡
        • 11 CSS3的新特性
        • 12 列举几个css中可继承和不可继承的元素
      • 四、浏览器
        • 1 浏览器架构
        • 2 JavaScript单线程模型
        • 3 Chrome 打开一个页面需要启动多少进程?分别有哪些进程?
        • 4 渲染机制
        • 5 缓存机制
        • 6 浏览器存储
        • 7 跨域方案
        • 8 XSS 和 CSRF
        • 9 Service Worker
        • 10 DOM 节点操作
        • 11 掌握页面的加载过程
        • 12 从输入URL到页面展示过程
        • 13 渲染引擎什么情况下才会为特定的节点创建新的图层
        • 14 定时器与requestAnimationFrame、requestIdleCallback
      • 五、框架通识
      • 六、Vue
        • 1 Vue 响应式原理
        • 2 发布订阅模式和观察者模式
        • 3 为什么使用 Virtual DOM
        • 4 VDOM:三个 part
        • 5 vue 和 react技术选型
        • 6 nextTick
        • 7 生命周期
        • 8 vue-router
        • 9 vuex
        • 10 vue3带来的新特性/亮点
        • 11 Compositon api
        • 12 computed 的实现原理
        • 13 watch 的理解
        • 14 vue 渲染过程
        • 15 说一说keep-alive实现原理
        • 16 为什么访问data属性不需要带data
        • 17 template预编译是什么
        • 18 介绍一下Vue中的Diff算法
        • 19 说说Vue2.0和Vue3.0有什么区别
      • 七、React
        • 0 对虚拟DOM的理解
        • 1 谈谈你对React的理解
        • 2 如何避免React生命周期中的坑
        • 3 React Fiber架构
        • 4 createElement过程
        • 5 调和阶段 setState内部干了什么
        • 6 setState
        • 7 setState原理分析
        • 8 React事务机制
        • 9 React组件和渲染更新过程
        • 10 如何解释 React 的渲染流程
        • 11 diff算法是怎么运作
        • 12 合成事件原理
        • 13 JSX语法糖本质
        • 14 为什么 React 元素有一个 $$typeof 属性
        • 15 Virtual DOM 的工作原理是什么
        • 16 React有哪些优化性能的手段
        • 17 Redux实现原理解析
        • 18 谈谈你对状态管理的理解
        • 19 connect组件原理分析
        • 20 React Hooks
        • 21 受控组件和非受控组件
        • 22 如何避免ajax数据请求重新获取
        • 23 组件之间通信
        • 24 类组件与函数组件有什么区别呢?
        • 25 如何设计React组件
        • 26 组件的协同及(不)可控组件
        • 27 React-Router 的实现原理及工作方式分别是什么
        • 28 React 17 带来了哪些改变
      • 八、性能
        • 1 DNS 预解析
        • 2 缓存
        • 3 使用 HTTP / 2.0
        • 4 预加载
        • 5 预渲染
        • 6 懒执行与懒加载
        • 7 文件优化
        • 8 其他
        • 9 如何根据chrome的timing优化
        • 10 移动端优化
      • 九、工程化
        • 1 介绍一下 webpack 的构建流程
        • 2 介绍 Loader
        • 3 介绍 plugin
        • 4 webpack 热更新实现原理
        • 5 webpack 层面如何做性能优化
        • 6 介绍一下 Tree Shaking
        • 7 介绍一下 webpack scope hosting
        • 8 Webpack Proxy工作原理?为什么能解决跨域
        • 9 介绍一下 babel原理
        • 10 介绍一下Rollup
      • 十、HTTP
        • HTTP状态码
        • 1 HTTP前生今世
        • 2 HTTP世界全览
        • 3 HTTP分层
        • 4 HTTP报文是什么样子的
        • 5 HTTP之URL
        • 6 HTTP实体数据
        • 7 谈一谈HTTP协议优缺点
        • 8 说一说HTTP 的请求方法
        • 9 谈一谈GET 和 POST 的区别
        • 10 谈一谈队头阻塞问题
        • 11 谈一谈HTTP数据传输
        • 12 cookie 和 session
        • 13 介绍一下HTTPS和HTTP区别
        • 14 HTTPS握手过程
        • 15 介绍一个HTTPS工作原理
        • 16 SSL 连接断开后如何恢复
        • 17 谈一谈你对HTTP/2理解
        • 18 HTTP3
        • 19 HTTP/1.0 HTTP1.1 HTTP2.0版本之间的差异
        • 20 DNS如何工作的
        • 21 短轮询、长轮询和 WebSocket 间的区别
        • 22 说一说正向代理和反向代理
        • 23 介绍一下Connection:keep-alive
        • 24 http/https 协议总结
        • 25 TCP为什么要三次握手
        • 26 为什么要有 WebSocket
        • 27 UDP和TCP有什么区别
      • 十一、9种前端常见的设计模式
        • 1. 外观模式
        • 2. 代理模式
        • 3. 工厂模式
        • 4. 单例模式
        • 5. 策略模式
        • 6. 迭代器模式
        • 7. 观察者模式
        • 8. 中介者模式
        • 9. 访问者模式
      • 十二、综合问题
        • 前端常见面试流程
        • 面试一定要问这几个问题
        • 经历
        • 项目相关
        • 项目难点问题分析
        • 项目流程相关面试题
        • 把握投递简历的黄金时间段
        • 把握面试时的关键点
        • 工作交接流程 & 福利衔接
      • 十三、人事面
        • 第一个要点: 你是否胜任这份工作?
        • 第二个要点:你是怎样的人?
        • 第三个要点:你是否适合这个企业?
        • 第四个要点:聘用你,公司需付出多少?
    • 高频篇
    • 手写篇
    • 设计模式
  • 精选模块