前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 1 自检100题
  • 2 面试综合汇总
    • 如何解决a标点击后hover事件失效的问题?
    • 点击一个input依次触发的事件
    • 响应式的好处
    • null和undefined的区别
      • 语义上
      • 检测上
      • 隐式类型转换上
      • 其他角度
    • 冒泡排序算法和数组去重
      • 冒泡排序
      • 数组去重
    • 描述一下Promise
    • Promise.all中如果有一个抛出异常了会如何处理
      • Promise.all的实现代码:
    • Promise为什么能链式调用
    • 描述一下EventLoop的执行过程
    • document window html body的层级关系
    • addEventListener函数的第三个参数
    • 有写过原生的自定义事件吗
      • new Event
      • new CustomEvent
      • 使用场景
    • 冒泡和捕获的具体过程
    • 描述下原型链
    • 手写new
    • typeof和instanceof的区别
    • typeof为什么对null错误的显示
    • 详细说下instanceof
    • 一句话描述一下this,另外函数内的this是在什么时候确定的?
    • apply/call/bind和不同
    • webpack中的Loader和Plugin有什么区别
      • Loader
      • Plugin
    • HTTP和TCP的不同
    • TCP和UDP的区别
      • TCP
      • UDP
      • 场景
    • 介绍一下虚拟DOM
    • 盒模型
    • 输入URL到页面的呈现
    • JSON的原理以及手写一个实现
      • 原理
      • 实现
    • 浏览器为什么要跨域?如果是因为安全的话那小程序或者其他的为什么没有跨域?
    • CORS跨域的原理
    • CORS预请求OPTIONS就一定是安全的吗?
    • 在深圳的网页上输入百度,是怎么把这个请求发到北京的
    • Vue的响应式原理
    • 那在这个响应式中一个数据改变它是怎么通知要更新的,也就是如何把数据和页面关联起来?
    • CommonJS和ES6模块的区别
    • 模块的异步加载
    • 实现一个一组异步请求按顺序执行你有哪些方法?
    • Promise.all()是并发的还是串行的?
    • webpack几种hash的实现原理
      • hash和chunkhash
      • contenthash
    • webpack中如何处理图片的?
    • 说一下回流和重绘
      • 回流
      • 重绘
      • 它们之间的关系
      • 如何避免回流和重绘
    • 实现水平垂直居中的几种方式
    • flex的兼容性怎样
    • 移动端中css你是使用什么单位
    • rem和em的区别
    • 在移动端中怎样初始化根元素的字体大小
    • 移动端中不同手机html默认的字体大小都是一样的吗
    • 如果让你实现一个一直旋转的动画你会如何做
    • animation有一个steps()功能符知道吗?
    • 用过哪些移动端的调试工具?
    • V8的垃圾回收是发生在什么时候?
    • 具体说一下垃圾回收机制
      • 新生代空间(占比小)
      • 老生代空间(占比高)
    • 在项目中如何把http的请求换成https
    • 知道meta标签有把http换成https的功能吗?
    • http请求可以怎么拦截
      • 为什么要有拦截器?
      • 请求拦截
    • 响应拦截
    • https的加密方式
    • 混合加密的好处
    • 浏览器如何验证服务器的身份
      • 数字签名
      • 数字证书
    • ETag首部字段说一下
    • 你们的token一般是存放在哪里的
    • Token会不会被伪造?
    • https工作流程
    • 前后端如何验证一个用户是否下线了
    • CSP白名单知道吗?
    • Vue的diff算法
    • 浏览器的兼容?
    • 如何实现一个findIndex
    • 移动端布局有哪些方案?
    • 如果一个移动端的项目要显示在PC端上保证结构稳定你会如何做?
    • 具体说一下splitChunksPlugin
    • 有自己写过webpack插件吗
    • 说一下Vue-Router的实现原理
      • Hash模式
      • History模式
      • abstract模式
    • Vue-Router初始化是发生在什么时候
    • webpack构建流程
    • webpack插件原理
    • webpack在配置插件的时候是一个数组那它有顺序吗
    • 让你从零开始构建一个webpack项目你可以吗
    • 为什么TCP要三次握手而不是两次
    • HTTP和TCP的区别
    • 什么情况会阻塞页面的加载
    • script放在body头部就一定会阻塞吗
    • 添加删除了DOM节点会发生什么?
    • js中改变transform的left和right对比于css修改transform
    • 什么是GPU加速
    • 进程和线程的区别
    • HTTP/2对比HTTP/1.1
      • 头部压缩
      • 多路复用
      • 二进制传输
      • 服务器推送
    • 为什么说HTTPS比HTTP安全呢
    • 说一下对称加密和非对称加密
    • HTTP请求的什么时候用的对称加密什么时候非对称加密
    • 对称加密的原理
    • 如果让你去实现一个CSRF攻击你会怎做?
    • Vue中key的作用
    • 还知道其他攻击方式吗
    • 如果我将key设置为了一个Math.random()可以吗
    • 如果让你设计一个双向绑定你会如何设计
    • 如何实现if (a===1 && a===2 && a===3)
    • token放在Cookie和放在localStorage、sessionStorage中有什么不同吗
    • Cookie存在哪些安全问题?如何预防?
    • SameSite设置为了lax之后是怎样来控制Cookie的发送的
    • 如果顶级域名不同会发送吗
    • 如果使用jsonp的话会有什么安全问题吗?
    • SSR的使用场景
    • requestAnimationFrame属于宏任务还是微任务
    • script与css还有页面的渲染顺序
    • script标签的async是什么时候加载的
    • 说一下==数据类型转换吧
    • diff算法的缺点
    • Object.defineProperty()有什么缺点?Vue3为什么用Proxy?
    • nextTick实现原理
    • nextTick中的waiting是什么时候变为true的呢
    • Vue3有哪些新的API或者有做哪些优化?
      • 性能上
      • Tree-shaking
    • 有关HTTP缓存的首部字段说一下
    • HTTP中的keep-alive有了解吗?
    • 在一次传输中它是如何保证每个数据包之间的顺序的?
    • 为什么说GET会留下历史记录?
    • GET可以上传图片吗?
    • GET就一定是幂等的吗?
    • 为什么说POST相对安全一些
    • 如果一个按钮点击进行GET请求会留下历史记录吗?
    • position属性有哪些值分别介绍一下
      • relative
      • absolute
      • fixed
      • sticky:
      • static:默认定位
    • 普通文档流是个怎样的层级关系
    • inline-block的使用场景
    • GET和POST的区别
    • 说一下你所知道的缓存方案
    • 项目中的环境变量是如何控制的?
  • 3 Promise面试题
完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

# 如何解决a标点击后hover事件失效的问题?

严格按照[L V H A]的顺序:Link => Visited => Hover => active

# 点击一个input依次触发的事件

onmouseenter => onmousedown => onfocus => onclick

# 响应式的好处

从用户的角度上出发,可以让用户获得更好的浏览体验,从开发者的角度上出发,降低了代码的重复性,开发人员可以将更多的精力放到其他部分

# null和undefined的区别

# 语义上

  • null:代表空对象
  • undefined:代表未定义的值

# 检测上

  • typeof null === "object"
  • typeof undefined === "undefined"

# 隐式类型转换上

  • Number(null) => 0
  • Number(undefined) => NaN

# 其他角度

  • 函数的默认返回值是undefined
  • 原型链的终点是null
  • JS底层中的对象机器码是以"000"开头,而null的机器码全都是0

# 冒泡排序算法和数组去重

# 冒泡排序

let arr = []
    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - i; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
            }
        }
    }
@前端进阶之旅: 代码已经复制到剪贴板

# 数组去重

  1. 双重for循环
  2. Set数据结构
  3. indexOf
  4. sort排序后再用for循环判断当前值是否等于上一个值和下一个值 更多的方法就在这里: JavaScript数组去重(12种方法)

# 描述一下Promise

Promise是JS异步编程解决方案之一,它的链式调用出现提高了代码的可阅读性和可维护性。在它之前我们只能通过[回调函数]和[事件]解决异步回调的问题,并且容易出现臭名昭著的[回调地狱]

# Promise.all中如果有一个抛出异常了会如何处理

会直接抛出错误。

# Promise.all的实现代码:

static all(promiseArr) {
    let index = 0,
        res = []
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promiseArr.length; i++) {
            
fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • 1 自检100题
  • 2 面试综合汇总
    • 如何解决a标点击后hover事件失效的问题?
    • 点击一个input依次触发的事件
    • 响应式的好处
    • null和undefined的区别
      • 语义上
      • 检测上
      • 隐式类型转换上
      • 其他角度
    • 冒泡排序算法和数组去重
      • 冒泡排序
      • 数组去重
    • 描述一下Promise
    • Promise.all中如果有一个抛出异常了会如何处理
      • Promise.all的实现代码:
    • Promise为什么能链式调用
    • 描述一下EventLoop的执行过程
    • document window html body的层级关系
    • addEventListener函数的第三个参数
    • 有写过原生的自定义事件吗
      • new Event
      • new CustomEvent
      • 使用场景
    • 冒泡和捕获的具体过程
    • 描述下原型链
    • 手写new
    • typeof和instanceof的区别
    • typeof为什么对null错误的显示
    • 详细说下instanceof
    • 一句话描述一下this,另外函数内的this是在什么时候确定的?
    • apply/call/bind和不同
    • webpack中的Loader和Plugin有什么区别
      • Loader
      • Plugin
    • HTTP和TCP的不同
    • TCP和UDP的区别
      • TCP
      • UDP
      • 场景
    • 介绍一下虚拟DOM
    • 盒模型
    • 输入URL到页面的呈现
    • JSON的原理以及手写一个实现
      • 原理
      • 实现
    • 浏览器为什么要跨域?如果是因为安全的话那小程序或者其他的为什么没有跨域?
    • CORS跨域的原理
    • CORS预请求OPTIONS就一定是安全的吗?
    • 在深圳的网页上输入百度,是怎么把这个请求发到北京的
    • Vue的响应式原理
    • 那在这个响应式中一个数据改变它是怎么通知要更新的,也就是如何把数据和页面关联起来?
    • CommonJS和ES6模块的区别
    • 模块的异步加载
    • 实现一个一组异步请求按顺序执行你有哪些方法?
    • Promise.all()是并发的还是串行的?
    • webpack几种hash的实现原理
      • hash和chunkhash
      • contenthash
    • webpack中如何处理图片的?
    • 说一下回流和重绘
      • 回流
      • 重绘
      • 它们之间的关系
      • 如何避免回流和重绘
    • 实现水平垂直居中的几种方式
    • flex的兼容性怎样
    • 移动端中css你是使用什么单位
    • rem和em的区别
    • 在移动端中怎样初始化根元素的字体大小
    • 移动端中不同手机html默认的字体大小都是一样的吗
    • 如果让你实现一个一直旋转的动画你会如何做
    • animation有一个steps()功能符知道吗?
    • 用过哪些移动端的调试工具?
    • V8的垃圾回收是发生在什么时候?
    • 具体说一下垃圾回收机制
      • 新生代空间(占比小)
      • 老生代空间(占比高)
    • 在项目中如何把http的请求换成https
    • 知道meta标签有把http换成https的功能吗?
    • http请求可以怎么拦截
      • 为什么要有拦截器?
      • 请求拦截
    • 响应拦截
    • https的加密方式
    • 混合加密的好处
    • 浏览器如何验证服务器的身份
      • 数字签名
      • 数字证书
    • ETag首部字段说一下
    • 你们的token一般是存放在哪里的
    • Token会不会被伪造?
    • https工作流程
    • 前后端如何验证一个用户是否下线了
    • CSP白名单知道吗?
    • Vue的diff算法
    • 浏览器的兼容?
    • 如何实现一个findIndex
    • 移动端布局有哪些方案?
    • 如果一个移动端的项目要显示在PC端上保证结构稳定你会如何做?
    • 具体说一下splitChunksPlugin
    • 有自己写过webpack插件吗
    • 说一下Vue-Router的实现原理
      • Hash模式
      • History模式
      • abstract模式
    • Vue-Router初始化是发生在什么时候
    • webpack构建流程
    • webpack插件原理
    • webpack在配置插件的时候是一个数组那它有顺序吗
    • 让你从零开始构建一个webpack项目你可以吗
    • 为什么TCP要三次握手而不是两次
    • HTTP和TCP的区别
    • 什么情况会阻塞页面的加载
    • script放在body头部就一定会阻塞吗
    • 添加删除了DOM节点会发生什么?
    • js中改变transform的left和right对比于css修改transform
    • 什么是GPU加速
    • 进程和线程的区别
    • HTTP/2对比HTTP/1.1
      • 头部压缩
      • 多路复用
      • 二进制传输
      • 服务器推送
    • 为什么说HTTPS比HTTP安全呢
    • 说一下对称加密和非对称加密
    • HTTP请求的什么时候用的对称加密什么时候非对称加密
    • 对称加密的原理
    • 如果让你去实现一个CSRF攻击你会怎做?
    • Vue中key的作用
    • 还知道其他攻击方式吗
    • 如果我将key设置为了一个Math.random()可以吗
    • 如果让你设计一个双向绑定你会如何设计
    • 如何实现if (a===1 && a===2 && a===3)
    • token放在Cookie和放在localStorage、sessionStorage中有什么不同吗
    • Cookie存在哪些安全问题?如何预防?
    • SameSite设置为了lax之后是怎样来控制Cookie的发送的
    • 如果顶级域名不同会发送吗
    • 如果使用jsonp的话会有什么安全问题吗?
    • SSR的使用场景
    • requestAnimationFrame属于宏任务还是微任务
    • script与css还有页面的渲染顺序
    • script标签的async是什么时候加载的
    • 说一下==数据类型转换吧
    • diff算法的缺点
    • Object.defineProperty()有什么缺点?Vue3为什么用Proxy?
    • nextTick实现原理
    • nextTick中的waiting是什么时候变为true的呢
    • Vue3有哪些新的API或者有做哪些优化?
      • 性能上
      • Tree-shaking
    • 有关HTTP缓存的首部字段说一下
    • HTTP中的keep-alive有了解吗?
    • 在一次传输中它是如何保证每个数据包之间的顺序的?
    • 为什么说GET会留下历史记录?
    • GET可以上传图片吗?
    • GET就一定是幂等的吗?
    • 为什么说POST相对安全一些
    • 如果一个按钮点击进行GET请求会留下历史记录吗?
    • position属性有哪些值分别介绍一下
      • relative
      • absolute
      • fixed
      • sticky:
      • static:默认定位
    • 普通文档流是个怎样的层级关系
    • inline-block的使用场景
    • GET和POST的区别
    • 说一下你所知道的缓存方案
    • 项目中的环境变量是如何控制的?
  • 3 Promise面试题