前端面试题汇总

1.BFC了解(什么是BFC,如何实现BFC,解决什么问题)

BFC浏览器自带的一种CSS渲染模式,也是一种盒子模型

四种方式开启BFC盒子

  • float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)

  • overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)

  • position属性不是static和relative

  • display属性为以下值 : table-cell 、 inline-block 、 table-caption

开启BFC 盒子变化

  • 当一个块级盒子触发BFC之后,其内部形成独立环境,在里面做任何事都不会对盒子外部有影响。

  • 在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列

BFC解决哪些问题

  • 清除元素内部浮动

  • 解决盒子margin合并问题(塌陷也可以解决)

  • 实现元素宽度自适应多列布局

    • 制作右侧盒子自适应宽度的问题(左侧盒子宽度固定,右侧宽度不固定)

      • 当在父元素中只设定一个盒子浮动,另一个不浮动时,会造成第二个盒子在第一个盒子的下方,被覆盖掉一部分(但文字不会被覆盖)。

2.事件委托

  • 1.什么是事件委托

    • 给父元素注册事件,委托给子元素处理

  • 2.事件委托原理:==事件冒泡==

  • 3.事件委托注意点

    • this : 指向父元素

    • e.target : 指向触发事件的子元素

  • 4.事件委托场景 : 给动态新增元素注册委托事件

3.如何判断数据类型

  • typeof有两种数据类型无法检测: null 、array
  • Object.prototype.toString.call(数据)

4.浅拷贝与深拷贝

  • 1.浅拷贝:拷贝地址, 修改拷贝后的数据原数据也会变化

  • 2.深拷贝:拷贝数据, 修改拷贝后的数据原数据不会变化

    • 推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )

    • 递归

5.for in与for of区别

1.功能不同

    for-in是遍历数组的下标

    for-of是遍历数组的元素

2.原型的属性

    for-in会遍历原型的属性

    for-of不会遍历原型的属性

3.数据类型

    for-in可以遍历Object类型

    for-of不可以遍历Object类型

总结:如果只想要属性值/元素,使用for-of效率更高

6.get请求与post请求区别

  • 1.传参方式不同

    • get在url后面拼接(请求行)

    • post在请求体传参

  • 2.大小限制不同

    • get有大小限制,不同浏览器大小限制不同。 一般2-5 MB

    • post没有大小限制

  • 3.安全性不同

    • get参数直接暴露在url,不安全(一般查询类数据都是get)

    • post参数在请求体中,更加安全(一般登录注册必须是post)

  • 4.传输速度不同

    • get传输速度快

    • post传输速度慢

7.一个页面从输入url到呈现过程

  • 1.DNS域名解析: 将url中的域名解析成ip地址

  • 2.TCP三次握手: 建立安全的网络传输协议

    • 2.1 什么是TCP : 一种 传输控制协议

    • 2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 (检测客户端 与 服务器的网卡是不是通的)

    • 2.3 TCP三次握手 :

      第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)

      第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送)

      第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)

  • 3.HTTP建立连接

    • 3.1 客户端发送请求

    • 3.2 服务器处理请求

    • 3.3 服务器响应请求

  • 4.渲染引擎开始渲染响应返回的HTML文本

    • 4.1 解析html生成:dom树

    • 4.2 解析css生成:样式树

    • 4.3 dom树 与 样式树 合并得到 渲染树

    • 4.4 呈现页面

8.防抖节流

  • 函数防抖:单位时间内,频繁触发事件,只会触发最后一次

  • 函数防抖实际开发应用场景: 实时获取输入框文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入文本">

    <script>
        /* 
        1.函数防抖 :  单位时间内,频繁触发事件,只会触发最后一次
        2.经典应用场景 : 输入框输入事件
        3.函数防抖流程 :
            3.1 声明全局变量存储定时器ID
            3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
        */

        let timeID = null
        document.querySelector('input').oninput = function(){
            
            //清除上一次定时器
            clearTimeout(timeID)
            //开启本次定时器. 500ms内用户没有触发,自动执行定时器代码。 
            timeID = setTimeout(()=>{
                console.log(`发送ajax请求,搜索内容为${this.value}`)
            },500)            
        }
    </script>
</body>
</html>

  • 函数节流:单位时间内,频繁触发事件,只会触发一次

  • 函数节流应用场景 : 解决高频事件,频繁触发事件浪费性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            width: 3000px;
            height: 3000px;
        }        
    </style>
</head>
<body>
    

    <script>
        /* 
        1.函数防抖 :  单位时间内,频繁触发事件,只会触发一次
        2.经典应用场景 : 滚动条事件
        3.函数防抖流程 :
            3.1 声明全局变量存储上一次触发交互时间
            3.2 每一次触发事件, 获取当前时间  与 上一次时间做比较。判断是否超过节流间隔
            3.3 如果 超过节流时间,则执行事件处理代码。 并且存储本次触发时间。
        */

        let lastTime = null
        window.onscroll = function(){
            //判断时间间隔
            let currentTime = Date.now()
            if( currentTime - lastTime >= 500 ){
                console.log('执行滚动条事件处理代码')
                //存储本次触发时间
                lastTime = currentTime
            }
        }
    </script>
</body>
</html>

 9.什么是跨域

跨域是浏览器一种安全策略,如果你的ajax地址与页面地址不同源,也就是协议名和ip地址和端口号不一致的时候,浏览器就会拒收服务器响应的数据。一般在开发中,公司后台主要使用cors技术来解决跨域,前端不需要做任何处理,后台大概好像是设置一个响应头'Access-Control-Allow-Origin '.前端出来在config.js中设置代理服务器,服务器与服务器不存在跨域.

10.前端web优化方案

  • 1.减少HTTP请求数

    • 这是必须要放在第一个回答的,因为这是优化web最优方案

    • 具体示例 : 精灵图、多个文件合并成一个

      • 精灵图适用场景 : (1)图片不经常更换的,比如按钮图标 (2)图片不能太大

  • 2.资源压缩

    • 就是一般我们第三方包有一个min版本,就是通过压缩文件体积来优化web

  • 具体示例 :响应min文件

  • 3.合理利用浏览器缓存

    • 某些接口的数据是固定的,服务器就没有必要每一次都响应数据。可以让浏览器进行缓存。

    • 具体示例:例如省市县数据, 这种数据一般不会变化

11.请说一下你对promise的理解

promise是ES6新增的一个构造的数,主更是用干好决开发中的回调地默问题。promise对象有三种工作状态,分别是进行中,已成功,已失败。一旦创建promise就会立即进入进行中状态,此时立即执行promise里面的代码
promise状态改变有两种,从进行中到已成功,此时对应resolve方法(通过resolve修改状态为已成功)从进行中到己失败,此时对应reject方法
promise状态一旦改变就不会再变,resolve和reject分别对应promise实例的then和catch

promise相关的几个静态方法

  1. promise.race():接收多个promise实例,可以得到最先处理完毕的结果(可能成功,可能失败)
  2. promise.all():接收多个promise实例&
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金凯枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值