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

2022年05月14日 阅读数:4
这篇文章主要向大家介绍前端面试day day up,以面试题来驱动学习,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

写在前面css

CSDN话题挑战赛第1期html

  • 活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f前端

  • 参赛话题:前端面试宝典java

  • 话题描述:欢迎各位加入话题创做得小伙伴,若是我没有猜错得话,我以为你是应该同我同样是一位前端人。现在前端在IT事业中的占比愈来愈重,已经成为不可缺乏的部分,前端技术也是层出不穷,各类技术类、技术框架也蜂拥而出,前端面试的难度也随之增长,若是咱们拥有一套前端面试宝典。若是你是应聘者:你就能够从容的solo面试官,若是你是面试官:你就能够将应聘者拷问到骨子里!
    总之咱们你们一块儿将本身的面试经验以及学习到的知识点汇聚于此,造成一套体系的前端面试宝典。让读者不管是面试仍是学习都可以有很是大的收获。就让咱们携手共筑前端面试宝典吧!!!web

  • 创做模板:面试

携手共筑前端面试宝典

题目一

页面导入样式时,使用link和@import有什么区别?ajax

考点

主要考察HTML和CSSecharts

答案

区别:
1.link是HTML标签,@import是css提供的。
2.link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题,@import不兼容ie5如下。
4.link能够经过js操做DOM动态引入样式表改变样式,而@import不能够。框架

题目二

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

考点

主要考察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>

2.自定义滚动条
可参考elementUI中的el-scrollbar 实现过程
写在最后

CSDN话题挑战赛第1期