前端面试day day up，以面试题来驱动学习

最新推荐文章于 2025-07-21 16:39:18 发布

原创最新推荐文章于 2025-07-21 16:39:18 发布 · 624 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#面试 #前端 #学习

前端面试题专栏收录该内容

1 篇文章

订阅专栏

本文探讨前端面试中关于link与@import的区别，以及ResizeObserver在图表自适应和滚动条自定义中的应用，共建实用面试知识库。

写在前面

优快云话题挑战赛第1期

活动详情地址：https://marketing.youkuaiyun.com/p/bb5081d88a77db8d6ef45bb7b6ef3d7f
参赛话题：前端面试宝典
话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！
创作模板：

题目一

页面导入样式时，使用link和@import有什么区别？

考点

主要考察HTML和CSS

答案

区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

题目二

你有使用过ResizeObserver吗？请说说它的用途

考点

主要考察ResizeObserver的用途

答案

1.配合echarts进行使用
在echarts中我们往往会把图表放进某个div容器，如果你只是通过window.onresize是无法监听到容器的变化，从而使得图表自适应。
区别：
1.link是HTML标签，@import是css提供的。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main{
            border: 1px solid red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.js"></script>

</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <button id="big">放大</button>
    <script>
        let main = document.getElementById('main')
        var myChart = echarts.init(main);
        let oBig = document.getElementById("big")
        const resizeObserver = new ResizeObserver((entries, b) => {
            myChart.resize()
            // for (let entry of entries) {
            // console.log(entries, b === resizeObserver);
            // }
        });
        resizeObserver.observe(main)
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        oBig.onclick = ()=>{
            main.style.width = 1000+"px"
        }
        myChart.setOption(option);
    </script>
</body>
</html>