这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)
routeList: [
{
// title: '授权管理后台',
list: [
{
id: 1,
label: '工程管理', //一级控件
children: [
{
id: 2,
label: '物料管理', //二级控件
children: [
{
id: 4,
label: '列表查看', //三级控件
// children: [
// {
// id: 7,
// label: '页面查看权限' //四级控件
// },
// {
// id: 8,
// label: '编辑'
// }
// ]
},
{
id: 5,
label: '查询',
// children: [
// {
// id: 9,
// label: '次数分布child1'
// },
// {
// id: 10,
// label: '次数分布child2'
// }
// ]
}
]
},
{
id: 3,
label: '工艺流程管理',
children: [
{
id: 6,
label: '列表查看',
// children: [
// {
// id: 7,
// label: '页面查看权限'
// }
// ]
},
{
id: 7,
label: '查询',
// children: [
// {
// id: 7,
// label: '页面查看权限'
// }
// ]
}
]
}
]
},
{
id: 111,
label: '销售管理',
children: [
{
id: 112,
label: '订单管理',
children: [
{
id: 113,
label: '列表查看'
},
{
id: 114,
label: '查询'
},
{
id: 114,
label: '重置'
},
{
id: 114,
label: '复选框'
},
{
id: 114,
label: '新增订单'
},
{
id: 114,
label: '导出'
},
{
id: 114,
label: '打印'
},
{
id: 114,
label: '操作'
},
{
id: 114,
label: '订单详情'
},
{
id: 114,
label: '编辑'
},
{
id: 114,
label: '作废'
},
{
id: 114,
label: '出库'
},
{
id: 114,
label: '结束'
}
]
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
**js部分:**
mounted() {
this.changeCss() //默认调用此方法将子节点渲染为横向排列
},
methods: {
handleExpand() { // 节点被展开时触发的事件
// 因为该函数执行在renderContent函数之前,所以得加this.
n
e
x
t
T
i
c
k
(
)
t
h
i
s
.
nextTick() this.
nextTick()this.nextTick(() => {
this.changeCss()
})
},
renderContent(h, { node, data, store }) { // 树节点的内容区的渲染 Function
let classname = ‘’
// 由于项目中有三级菜单也有四级级菜单,就要在此做出判断
if (node.level === 4) {
classname = ‘foo’
}
if (node.level === 3 && node.childNodes.length === 0) {
classname = ‘foo’
}
return h(
‘p’,
{
class: classname
},
node.label
)
},
changeCss() { //将子节点横向排列方法
var levelName = document.getElementsByClassName(‘foo’) // levelname是上面的最底层节点的名字
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器
levelName[i].parentNode.style.cssFloat = ‘left’ // 最底层的节点,包括多选框和名字都让他左浮动
levelName[i].parentNode.style.styleFloat = ‘left’
levelName[i].parentNode.onmouseover = function() {
this.style.backgroundColor = ‘#fff’
}
}
总结
我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-GEBdDDyY-1715799414493)]
[外链图片转存中…(img-uoSTJdSc-1715799414494)]