360一面 前端 秋招 面经
基本信息
时间：2023.10.23
时长：80 min
base：帝都
面试岗位：前端 秋招
问题
- 自我介绍
- 微前端用的什么框架？
- qiankun如何隔离JS？
- web conponent用于css或者JS隔离有啥弊端？
- 为什么要做课程？
- 有针对框架做二开？
- 如何评价你讲述的框架？
- XSS CSRF都讲一下
- 我看你写了axios封装拦截重复请求，这个是怎么做的？
- 拦截之后，会有什么后续操作？
- 业务场景中有并发请求，两个组件都请求同一个接口，该如何降低服务端压力？
- 用axios如何添加一个拦截器？
- 如何学习前端的？
- 用过SpringBoot？
- 讲述一下SpringBoot核心概念
- 讲一下JVM调优
- 如何解决跨域？
- Nginx如何解决跨域？
- 伪元素了解吗？
- 前端JavaScript如何获取到伪元素？
let computedStyle = window.getComputedStyle(element, ":before");
let content = computedStyle.getPropertyValue("content");
console.log(content);
- CSS盒模型
- flex布局介绍
- flex中设置主轴方向的属性是什么？
- align-content属性干嘛的？
- CSS的link和import的区别
- 选择器有哪些？
- 属性选择器的权重是？
- 同时写类选择器和属性选择器，谁优先？
- 父子元素，子元素如何垂直水平居中
- margin：auto可以居中的原理是？
- margin：auto可以纵向居中吗？
- 箭头函数和普通函数的区别
- 箭头函数有prototype吗？
- 箭头函数可以作为构造函数吗？
- 代码题1，看图说结果
- 执行顺序是什么？
- 补全代码
- dom转为json
我写的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
font-size: 14px;
}
</style>
<title></title>
</head>
<body>
<div id="jsContainer">
<ul class="js-test" id="jsParent">
<li data-index="0">
<div id="1111">222222222222222222222222</div>
</li>
<li data-index="1">2</li>
</ul>
<span style="font-weight: bold;">3</span>
4
</div>
<script type="text/javascript">
function dom2json() {
const root = document.getElementById('jsContainer')
const result = dfs(root)
console.log(result)
function dfs(root) {
const result = {}
result.tag = root.tagName
const names = root.getAttributeNames() // arr
const attrs = {}
for (const name of names) {
attrs[name] = root.getAttribute(name)
}
result.attributes = {
...attrs
}
const arr = root.children
if (arr.length === 0) {
result.content = root.innerText
}
const children = []
for (const item of arr) {
const temp = dfs(item)
children.push(temp)
}
if (children.length) {
result.children = children
}
return result
}
}
dom2json()
</script>
</body>
</html>
总结
难度不高，但是属性值记不住，API也记不住。。最后共享屏幕然后用webstorm靠代码提示写出来的，有些API不知道，直接共享屏幕百度查API的
#前端##面经##秋招##360#
