web前端面试题 vuelazyload的参数+数组扁平化+冒泡插入快速排序+CSS中calc, support, media各自的含义及用法？

最新推荐文章于 2024-04-23 18:09:29 发布

教练我真的想敲代码

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量398

点赞数

分类专栏：前端面试文章标签：面试

本文链接：https://blog.csdn.net/gy_9543/article/details/108487514

版权

面试同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

0 篇文章 0 订阅

订阅专栏

call和apply的区别是什么、哪一个性能更好

都是用来改变this指向，call传参是一个一个传、apply是数组传参
call 第一可以调用函数，第二可以改变函数内的this指向
bind 不调用函数改变函数内部this指向
apply 调用一个函数可以改变函数的this指向

性能更好的是

在改变this的情况下参数小于等于三个二者性能差不多，参数多于三个的时候call比apply性能好
在这里插入图片描述

性能测试console.time（‘A’）+console.timeEnd（‘A’）可以测试代码执行时间

在这里插入图片描述

类和实例链式方法调用

在这里插入图片描述
类似数组通过实例调用原型上的方法

箭头函数和普通函数的区别，构造函数function可以使用new生产实例，那么箭头函数可以么？为什么

在这里插入图片描述

在这里插入图片描述
回调函数一般this指向windown，什么是回调函数，把一个函数当做值传给另外一个方法

箭头函数不能通过new实例、也没有prototype原型

字符串大小写取反操作

在这里插入图片描述

字符串s中查找字符串t（循环或者正则）

在这里插入图片描述

计算运算结果

在这里插入图片描述

图片懒加载

https://www.jianshu.com/p/9101e971cafd
https://www.jianshu.com/p/7e303bc8fc20

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .imgbox {
            margin: 1000px auto;
            width: 500px;
            height: 300px;
            background-color: #bbb;
        }
        img{
            width: 100%;
        }
    </style>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <div class="imgbox">
        <img src="" alt=""
            data-img="https://oimageb2.ydstatic.com/image?id=1835681861552908612&product=adpublish&w=520&h=347">
    </div>
</body>

</html>

在这里插入图片描述

vue lazyload

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .imgbox {
            margin: 1000px auto;
            width: 500px;
            height: 300px;
            background-color: #bbb;
        }

        img {
            width: 100%;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

</head>

<body>
    <div id="app">
        <div class="imgbox">
            <img v-lazy="List" alt="">
        </div>
    </div>

</body>
<script type="text/javascript">
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: 'shibai.jpg',
        loading: 'dengdai.jpg',
        attempt: 1
    })
    var app = new Vue({
        el: "#app",
        data: {
            List: 'https://oimageb2.ydstatic.com/image?id=18356818615529086121&product=adpublish&w=520&h=347',//图片 或后台传来的图片
        },
    })

</script>

</html>

可选的参数如下：

preLoad:类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).

attempt:图片加载失败后的重试次数.默认为3.

error:类型string.图片加载失败后的显示的失败图片路径.

loading:类型string.图片正在加载中显示的loading图片的路径.

listenEvents:类型array.默认[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’].即是在监听上述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定[‘touchmove’].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.

adapter:注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.

filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行

更多参数的解释：https://segmentfault.com/a/1190000011672452

作者：An的杂货铺
链接：https://www.jianshu.com/p/e9f451d2cdff
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

自己写一个attr

在这里插入图片描述

数组扁平化

https://www.jb51.net/article/163767.htm
在这里插入图片描述

数组合并

在这里插入图片描述

快速排序

在这里插入图片描述

对象变数组

在这里插入图片描述

计算数组的交集

在这里插入图片描述
方法一

方法二

旋转数组

在这里插入图片描述

自定义实现一个以下功能的函数

在这里插入图片描述

CSS中calc, support, media各自的含义及用法？

https://blog.csdn.net/qq_22182989/article/details/106564423

1rem、1em、1vh、1px各自代表的含义？

https://www.runoob.com/w3cnote/px-em-rem-different.html

页面渲染html的过程

用户输入url地址，浏览器根据域名寻找IP地址
浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染
　　解析渲染该过程主要分为以下步骤：

解析HTML
构建DOM树
DOM树与CSS样式进行附着构造呈现树
布局
绘制
在这里插入图片描述