2023年前端面试题（三件套）

已于 2023-08-10 13:05:13 修改
阅读量811 收藏 10
点赞数 3
文章标签： javascript 前端
于 2023-05-24 20:39:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59278546/article/details/130846040
版权

html以及css相关的面试题

1、如何理解html语义化

  1. 增加代码的可读性
  2. 让搜索引擎更容易读懂（SEO）

2、块状元素和内联元素

块状元素：display:block/table;有div h1 h2 table ul ol p等
内联元素：display:inline-block/inline;有span img input button 等

3、盒模型宽度计算

offsetWidth = （内容宽度+内边距+边框），无外边距
在这里插入图片描述

4、margin纵向重叠问题

  • 相邻元素的margin-top和margin-bottom会发生重叠
  • 空白内容的p标签也会重叠
    在这里插入图片描述
    在这里插入图片描述

5、margin负值的问题

margin-top和margin-left负值，元素上移动，左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移动，自身不受影响

6、BFC理解与应用

概念：块级格式化上下文
好处：一块独立渲染区域，内部元素的渲染不会影响边界外的元素
常见形成BFC的条件：

  1. float不是none
  2. position是absolute或fixed
  3. overflow不是visible
  4. display是flex或者inline-block等

BFC的应用：清除浮动

7、absolute、relative、fixed分别依据什么定位

relative依据自身定位
absolute依据最近一层的定位元素（非static）定位 （absolute relative fixed => body）
fixed根据浏览器窗口的位置和大小进行定位

8、css实现居中

六种方式实现居中

九、line-height如何继承

  1. 学具体值，如30px，则直接继承
  2. 写比例，如2/1.5，则继承该比例
  3. 写百分比，如200%，则继承计算出来的值（考点）
    在这里插入图片描述

十、css响应式

  1. px，绝对长度单位，最常用
  2. em，相对长度单位，相对父元素，不常用
  3. rem，相对长度单位，相对于根元素，常用于响应式布局

十一、响应式布局的常见方案

  • media-query，根据不同的屏幕宽度设置根元素font-size
  • rem，基于根元素的相对单位
    在这里插入图片描述

十二、CSS vw和vh

rem的弊端：“阶梯”性
在这里插入图片描述
网页视口尺寸

  • window.screen.height 屏幕高度
  • window.innerHeight 网页视口高度
  • doucment.body.clientHeight body高度（内容高度）

vh：网页视口高度的1/100
vw：网页视口宽度的1/100
vmax：取两者最大值
vmin：取两者的最小值

js面试题

1、类型转换

turly变量 ： !!a === true
falsely变量 ：!!a === false

2、typeof 能判断哪些类型

  1. 识别所有值类型
  2. 识别函数
  3. 判断是否为引用类型（不可细分）

3、何时使用 = = = ，何时使用 = =

除了 = = null之外，其他一律用 = = =
例如：

const obj = { x: 100 }
if (obj.a == null) { }

相当于：

if (obj.a === null || obj.a === undefined) { }

4、手写深拷贝

  • 注意判读值类型和引用类型
  • 注意判读是数组还是对象
  • 递归
// 深拷贝
const obj1 = {
    name: 'obj1',
    address: {
        city: 'cq'
    }
}
const obj2 = deepClone(obj1)
obj2.name = 'ojj2'
console.log(obj1.name);
// 深拷贝函数
function deepClone(obj) {
    if (typeof obj !== "object" || obj == null) {
        return obj
    }
    let result
    // 初始化返回结果
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }
    for (let key in obj) {
        // 保证key不是原型的属性
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key])
        }
    }
    return result
}

5、原型和原型链

  1. 原型：函数都有prototype属性，称之为原型，也称为原型对象
  • 原型对象可以放一些属性和方法，共享给实例对象使用
  • 原型也可以做继承。
  1. 原型链：对象都有__proto__属性，这个属性指向它的原型对象，原型对象也是对象，也有__proto__属性，指向原型对象的原型对象，这样一层一层形成的链式结构称之为原型链，最顶层找不到则返回null
    图示：

在这里插入图片描述

6、作用域和闭包

作用域：

  1. 全局作用域（window、document等）
  2. 函数作用域（函数内部）
  3. 块级作用域
//es6新增const let 块级作用域
if (1) {
    let a = 1
}
//报错
console.log(a)

自由变量：

  1. 一个变量在当前作用域没有定义，但被使用了
  2. 向上级作用域，一层一层依次寻找，直到找到为止
  3. 如果到全局作用域没有找到，则报错 xx is not defined

闭包

  1. 函数作为返回值被返回
// 函数作为返回值
function create() {
    const a = 100
    return function () {
        console.log(a)
    }
}
const fn = create()
const a = 200
fn() //100

2.函数作为参数被传递

// 函数作为参数被传递
function print(fn) {
    const a = 200
    fn()
}

const a = 100
function fn() {
    console.log(a)
}

print(fn) //100

总结：所有自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方！！！

7、this

this取什么值是在函数执行的时候确定的，不是在函数定义的时候确定的

  1. 作为普通函数
function fn() {
    console.log(this)
}
fn()//window
  1. 使用call apply bind
function fn() {
    console.log(this)
}
fn.call({ x: 1 }) //{ x: 1 }
const fn2 = fn.bind({ y: 2 }) //{ y: 2 }
fn2() //{ y: 2 } //bind返回的是函数
  1. 作为对象方法被调用
  const lj = {
            name: 'lj',
            say() {
                // this指向的是当前对象
                console.log(this);
            },
            eat() {
                setTimeout(function () {
                    // this === window
                    console.log(this);
                })
            }
        }
        lj.say()
        lj.eat()

在class方法中调用

箭头函数

八、同步和异步

  • 区别
    • 基于JS是单线程语言
    • 异步不会阻塞代码的执行
    • 同步会阻塞代码执行

异步应用场景

  1. 网络请求如ajax, 图片加载
  2. 定时任务, 如setTimeout

题目：

console.log(1);
setTimeout(() => {
    console.log(2);
}, 1000)
setTimeout(() => {
    console.log(3);
}, 0)
console.log(4);
//1432

九、事件循环（event loop）

  1. js是单线程运行的
  2. 异步要基于回调来实现
  3. event loop 就是异步回调的实现原理

问题：js是如何执行？

  • 从前到后，一行一行执行
  • 如果某一行执行错误，则停止下面代码的执行
  • 先把同步代码执行完，再执行异步

promise状态

三种转态：pending resolved rejected； pending -> resolved 或 pending ->rejected

  • pending状态，不会触发then和catch

const p1 = Promise.resolve().then(() => {
    return 100
})
console.log('p1', p1)  //resolved 状态，会触发后续的then回调函数
p1.then(() => {
    console.log(123)
})


const p2 = Promise.resolve().then(() => {
    throw new Error('then error')
})
console.log('p2', p2)    //rejected 状态，会触发后续的catch回调函数
p2.then(() => {
    console.log(456) //不会执行
}).catch((err) => {
    console.error('err1000', err)
})
  • rejected 状态，会触发后续的catch回调函数
const p3 = Promise.reject('my error').catch((err) => {
    console.error(err)
})
console.log('p3', p3); //fulfilled == resolve 注意！触发then回调
p3.then(() => {
    console.log(100) //正常打印
})



const p4 = Promise.reject('my error').catch((err) => {
    throw new Error('catch error')
})
console.log('p4', p4); //rejected 触发catch回调
p4.then(() => {
    console.log(200) //不会打印
}).catch(() => {
    console.log(300)  //正常打印
})

相关的面试题

Promise.resolve().then(() => {
    console.log(1);
}).catch(() => {
    console.log(2);    //没有报错，不会执行  
}).then(() => {
    console.log(3);
})
// 打印 1 3

Promise.resolve().then(() => {
    console.log(1);
    throw new Error('catch error')   //返回resolved的状态
}).catch(() => {
    console.log(2);
}).then(() => {
    console.log(3); //打印，上一个catch没有抛出错误，所有状态为resolved
})
// 打印 1 2 3

Promise.resolve().then(() => {
    console.log(1);
    throw new Error('error1')
}).catch(() => {
    console.log(2);
}).catch(() => {
    console.log(3);  //没有报错，不会执行
})
// 打印 1 2

async await和promise的关系

  • 执行async函数，返回的是promise
async function p() {
    return 100  //相当于return promise.resolve(100)
}
console.log(a()); //执行async函数，返回的是promise 对象

p().then((data) => {
    console.log(data); //100
})
  • await相当于promise的then
!(async function () {
    const p1 = Promise.resolve(300)
    const data = await p1    //await 相当于promise then
    const data1 = await 400 //如果为一个值 则相当于 await promise.resolve(400)
    console.log('data', data); //300
    console.log('data1', data1); //400
})()
  • try…catch可以捕获异常，代替了promise的catch
!(async function () {
    const p4 = Promise.reject(500)
    try {
        const res = await p4
        console.log(res);
    } catch (error) {
        console.error(error)    // try...catch相当于 promise catch
    }
})()

注意：reject用await不执行，因为await对应then

!(async function () {
    const p4 = Promise.reject(500)
    const res = await p4  //await->then 
    console.log(res)  //不会执行
})()

异步的本质：
async await 是同步语法，彻底消灭回调函数
js还是单线程，还得是有异步，还是得基于event loop
async await 只是语法糖
在这里插入图片描述
在这里插入图片描述

十、宏任务、微任务

  • 宏任务：setTimeout, setInterval, ajax, DOM事件
  • 微任务：promise async / await

event loop 和DOM渲染

在这里插入图片描述

  • 每次Call Stack清空(即每次轮询结束)，即同步任务执行完
  • 都是DOM重新渲染的机会，DOM结构如有改变则重新渲染
  • 然后再去触发下一次Even Loop

宏任务：DOM渲染后触发，如setTimeout
微任务：DOM渲染前触发，如promise

宏任务和微任务根本区别

微任务是ES6语法规定的
宏任务是由浏览器规定的

在这里插入图片描述
8-17题目
注意：promise初始化立刻执行，await 后的为回调异步

前端实现跨域：jsonp cors 服务器设置 access-control-allow-origin

十、http面试题

http状态码

  1. 1xx服务器收到请求
  2. 2xx请求成功，如200
  3. 3xx重定向，如302

301永久重定向，302临时重定向，304资源未被修改

  1. 4xx客户端错误，如404

  2. 5xx服务端错误，如500

Resutful API（一种新的api推广使用）

  1. get获取数据
  2. post新建数据
  3. patch/put更新数据
  4. delete删除数据

传统 API 设计：把每个url当做一个功能
Restful API设计：把每个url当做一个唯一的资源

如何当做一个资源：

  1. 不使用url参数
  2. 使用methd表示操作类型

http headers

请求头

  • accpet 浏览器可接受的数据格式
  • accept-encoding 浏览器可接收的压缩算法
  • accept -languange 浏览器可接受的语言
  • connection keep-live 一次tcp连接重复使用
  • cookie
  • host 域名
  • user-agent 浏览器信息
  • content-type 发送数据的格式（post）

响应头

  • content-type
  • content-encoding 返回的压缩算法
  • set-cookie
  • cache-control

http缓存

为什么缓存：提示页面加载速度，增强用户体验
哪些可以被缓存：（js css img）

强制缓存

cache-control

  • 存在响应头中
  • 控制强制缓存的逻辑
  • 列如cache-control：max-age=255555412（单位是秒） 值：no-cache不用强制缓存 no-store都不做

cache-control的值：
1.max-age
2.no-cache不用强制缓存

协商缓存

  • 服务端缓存策略
  • 服务端判断客户端资源，是否和服务端资源一样
  • 一致则返回304，否则返回200和最新资源

资源标识：
1.响应头中
2.last-modified 资源的最后修改时间
3.etag 资源的唯一标识（一个字符串 类似人类的指纹）
4.优先使用Etag

http请求的过程

在这里插入图片描述

刷新操作对http请求的影响

  • 正常操作：强制缓存有效，协商缓存有效
  • 手动刷新f5：强制缓存消失，协商缓存有效
  • 强制刷新ctrl+f5：强制缓存和协商缓存都失效

https加密方式

http和https的区别：http明文传输，敏感信息容易被劫持，https=http+加密，劫持了也无法解密，现代浏览器已开始强制https协议

https采用非对称加密

  • 对称加密：一个key负责加密、解密
  • 非对称加密：一对key，A加密之后，B只能用来解密

十一、web API

  1. DOM是哪种数据结构：DOM树
  2. DOM操作常见的API：DOM节点的操作，DOM结构的操作，attribute（修改html属性，会改变html结构）和property（修改对象属性，不会体现到html结构）两者都会引起dom渲染
  3. 一次性插入多个节点考虑性能在这里插入图片描述
前端泰裤辣
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2023前端HTML+CSS最全面试题和答案汇总
02-09
内容概要：2023前端HTML+CSS最全面试题汇总，前端知识点全部覆盖，保你面试无忧。在手写Spring 源码的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：IOC、AOP、Bean生命周期、上下文、...
2023前端vue面试题及答案.pdf
06-21
2023前端vue面试题及答案.pdf
2023 前端面试题
冰魂魄的博客
04-06 1553
间隔一段时间后将函数放到任务队列中TypeScript是JS的超集（加强版），给JS添加了可选的静态类型和基于类的面向对象编程，拓展了JS的语法，TS是纯面向对象的编程语言，包含类和接口的概念，程序员可有用它来编写面向对象的服务端或客户端程序TS引入了很多面向对象程序设计的特征，主要包括interface 接口class 类enumerated type 枚举类型。
2024前端面试题(持续更新中～)
weixin_57844432的博客
03-16 8317
CSS3 中伪元素after和before，盒模型概念，元素居中方法，防抖和节流，深拷贝和浅拷贝，forEach用什么方法结束，怎么结束for循环的一层，forin和forof，如果要取数组第100条数据，怎么取，数组哪些方法改变原数组哪些方法不改变原数组，SSR服务端渲染流程及SEO，服务端渲染框架，前端项目中环境变量怎么处理，怎么配置，axios有封装过吗，后台管理侧边栏权限管，简述TCP/IP，UDP，对于SEO怎么优化，后台管理登录流程，解决Git冲突
前端2023最全面试题（javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react）
最新发布
weixin_47882573的博客
09-05 6951
答案：事件循环是JavaScript中的一种处理异步操作的方法。在事件循环中，JavaScript引擎不断地检查事件队列，如果有新的事件，就将其加入队列并执行相关的回调函数。当所有的回调函数执行完毕后，再次检查事件队列，如此反复进行。答案：在JavaScript中，高阶函数是一种可以接受函数作为参数或返回函数的函数。这种函数可以用于抽象和封装常见的功能，使代码更加灵活和可重用。
【面试宝典】2023前端面试题
前端代码小白的日常博客
01-17 6711
前端常见面试题，不定期更新！
2023年前端面试题
老余的博客
11-22 1294
深拷贝：层层拷贝 每一层的数据都会拷贝 — 产生了新的数据浅拷贝：只拷贝一层数据，深层次对象级别的只拷贝了地址 – 拷贝引用在JavaScript中有这么一句话万物皆可对象在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。而protortype 的指向是它的隐式原型 proto所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；
2023最新前端面试题总结
05-30
2023最新前端面试题总结
2023前端工程师面试题手册
04-14
包含了所有的前端面试的面试题，你只需要把这些背过，那么面试是一件容易的事情。
2023年最新前端程序员面试题
02-21
2023年最新前端程序面试题，最近招聘领导经常问到的问题，做了 整理提供给大家参考
2023前端面试题整理
xiaoxiaomuyu511的博客
05-14 501
基本数据类型：string，number，blooean，undefined，null引用数据类型：object，array，functionjs数据类型分为基本数据类型和引用数据类型，基本数据类型保存的是值，引用数据类型保存的是引用地址（this指针），浅拷贝共用一个引用地址，深拷贝会创建新的内存地址。Object.assign:对象合并(第一级属性深拷贝，第一级以下的级别属性浅拷贝）实现深拷贝的三种方式：a.使用递归实现深拷贝//使用递归的方式实现数组、对象的深拷贝。
2023前端面试题——HTML篇
HanXiaoXi_yeal的博客
02-01 930
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核JS引擎则：解析和执行javascript来实现网页的动态效果。
2023前端面试题汇总
热门推荐
m0_56232007的博客
03-09 2万+
2023前端基础面试题汇总
【面试题】最新2023前端面试题
web全栈开发的博客
11-25 1413
1、前端面试题库
2023最新前端面试题
weixin_44851819的博客
04-16 92
reset.css是一个用来重置css样式的css文件可直接在官网下载reset文件引入至工程里，不建议使用，性能不太好normalize.css：是用于增强浏览器渲染一致性的重置样式库。
2023年最新前端面试题（CSS相关）
爱蹦哒的咸鱼的博客
02-17 181
一、CSS 优化提高性能的方法 二、line-height和height区别 三、em px rem 的区别 四、如何使一个盒子水平垂直居中 五、盒子模型 六、清除浮动的方法 七、隐藏元素的方法 八、css选择器执行顺序 九、flex布局 十、css可继承的样式 十一、定位模式 十二、CSS3新特性 十三、精灵图 十四、如何用css画三角形 十五、只设置高或者只设置宽如何撑开长方形 十六、scss定义变量 十七、样式穿透
2023年最新前端面试题（JS相关1）
爱蹦哒的咸鱼的博客
02-02 716
一、原生JS编写tab栏切换 二、利用递归函数实现 setTimeout 模拟 setInterval效果 三、节流 四、防抖 五、JS同步异步，执行机制，事件循环（event loop） 六、==和 ===的区别 七、垃圾回收机制 八、闭包 九、原型链 十、递归函数
2023前端面试题及答案整理（Webpack ）
suli77的博客
02-09 531
2023前端面试题及答案整理（Webpack ）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值