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，看图说结果

alt

执行顺序是什么？

alt

补全代码

alt

dom转为json

alt

我写的代码：

<!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>