前端面试题整理

avatar
作者
猴君
阅读量:0

☆☆☆防抖和节流

需要多次输入内容,但是希望输入内容结束再发起请求如何实现?
使用防抖技术(debounce),就是当一个动作连续触发,则只执行最后一次。防抖技术的基本思想是在用户输入内容后,‌不立即发起网络请求,‌而是设置一个延时器,‌在用户停止输入一段时间(‌如0.5秒)‌后再发起请求。‌这样可以确保用户已经完成输入,‌避免因为频繁输入而导致的多次请求。‌
在Vue中,‌可以通过watch属性监听输入框的值变化,‌当值发生改变时,‌不是直接发起网络请求,‌而是设置一个延时器,‌延迟0.5秒再发起网络请求。‌这样就能实现输入框防抖功能,‌提升用户体验。‌

连续的事件,只需触发一次回调的场景有:

  • 搜索框搜索输入。只需用户最后一次输入完,再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

防抖与节流:

  • 相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减。避免大量计算导致的页面卡顿。
  • 不同:防抖是将多次执行变为最后一次执行,节流是将多次执行变为在规定时间内只执行一次。

函数节流:限制一个函数在一定时间内只能执行一次。
规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次生效。

间隔一段时间执行一次回调的场景有:

  • 滚动加载,加载更多或滚到底部监听
  • 谷歌搜索框,搜索联想功能
  • 高频点击提交,表单重复提交

行内元素与块级元素

行内元素:
特点:
根据内容大小排列,宽高由内容决定;
不能设置宽高;
不能包含块级元素,只能包含其他行内元素或文本;
可设置水平方向边距margin和内边距padding,不影响其他元素布局

举例:
<span>:用于标记文本的行内元素。
<a>:用于创建超链接的行内元素。
<strong>:用于强调文本的行内元素。
<em>:用于斜体强调文本的行内元素。
<img>:用于插入图像的行内元素。
<input>:用于创建输入字段的行内元素。
<label>:用于标签文本的行内元素。

块级元素:
特点:
独占一行;
宽高、margin、padding均可设置;
可包含其他块级元素和行内元素;
可设置宽高

举例:
<div>:用于创建一个块级容器。
<p>:用于段落的块级元素。
<h1>-<h6>:用于标题的块级元素。
<ul>:用于无序列表的块级元素。
<ol>:用于有序列表的块级元素。
<li>:用于列表项的块级元素。
<table>:用于创建表格的块级元素。
<form>:用于创建表单的块级元素。

需要注意的是,HTML5中引入了一些新的元素,例如<section>、<article>、<header>、<footer>等,它们的默认样式是块级元素,但也可以通过CSS进行修改。此外,通过CSS的display属性,可以将行内元素转换为块级元素,或将块级元素转换为行内元素。

相互转化:
要将行内元素转化为块级元素,可以使用以下CSS样式:

display: block; 

要将块级元素转化为行内元素,可以使用以下CSS样式:

display: inline; 

要将块级元素转化为行内块级元素,可以使用以下CSS样式:

display: inline-block; 

☆☆☆CSS居中(B站UP主Libra121

  1. 行内元素
    水平居中:
    (1)text-align
    在这里插入图片描述
    (2)fit-content
    在这里插入图片描述
    垂直居中:
    line-height等于父元素height
    在这里插入图片描述
    块级元素:
    水平居中:
    margin:0 auto;
    在这里插入图片描述
    水平垂直居中:
    (1)定位:(需要知道子元素的宽高)
    (2)定位+transform
    在这里插入图片描述
    在这里插入图片描述
    (2) 定位 + transform:
    在这里插入图片描述
    (3)定位+margin:
    在这里插入图片描述
    (4) padding:
    在这里插入图片描述
    (5) flex:
    在这里插入图片描述
    (6)伪元素:
    水平居中: text-align只相对于行内块元素才有效果,故需要将子元素转化成行内块元素 display: inline-block;
    垂直居中:添加伪元素,利用vertical-align: middle;
    在这里插入图片描述
    (7)calc(宽高相等):
    在这里插入图片描述

总结一下(常用):
(1)水平居中:
对于行内元素:① 父元素 text-align: center;
② 父元素设置 宽度自适应+margin,即 width:fit-width; margin: auto;
对于块级元素:①子元素上下边距为0,左右自适应 margin: 0 auto;
② 定位子绝父相,子元素需要设置宽高,left: 50%; margin-left: -50%;
③ 定位子绝父相,子元素需要设置宽高,left: 50%; transform: translate(-50%);
④ 定位子绝父相,子元素需要设置宽高,left: calc(50% - 1/2 * width);
⑤ 父元素display: flex; justify-content: center;
⑥ 只有子元素有高度的情况下,利用padding: 20px 0;
(2)垂直居中:
对于行内元素: 父元素line-height 等于height
对于块级元素:① 定位子绝父相,子元素需要设置宽高,top: 50%; margin-top: -50%;
② 定位子绝父相,子元素需要设置宽高,top: 50%; transform: translate(0,-50%);
③ 定位子绝父相,子元素需要设置宽高,top: calc(50% - 1/2 * height);
④ 父元素display: flex; align-items: center;
⑤ 只有子元素有高度的情况下,利用padding: 0 20px;

HTML5新特性

1、语义化标签(<article>、<section>、<nav>、<aside> 和 <header>/<footer>等),使得页面的内容结构化,见名知义;
2、增强型表单,拥有多个新的表单input输入类型,可提供更好的输入控制和验证;
3、video和audio元素,提供了播放视频和音频文件的标准方法;
4、canvas绘图,提供了强大的图形处理能力;
5. 地理定位,geolocation API 使得 Web 应用能够获取用户的地理位置信息,用于提供基于位置的服务;
5、svg绘图;
6、地理定位;
7、拖放api;
8、web worker;
Web Workers 允许在后台线程中运行 JavaScript,提高了页面的性能。
9、web storage
在这里插入图片描述
10、web scoket
Web Sockets 提供了实时双向通信的能力,适用于聊天应用和实时游戏。

ES6新特性

1、块级作用域,可以在块级作用域中声明变量;
ES6引入了let和const关键字,可以在块级作用域中声明变量。使用let声明的变量只在当前作用域内有效,避免了变量提升和全局命名冲突的问题。而使用const声明的常量是一个只读变量,一旦被赋值,就不能再改变。
2、箭头函数,一种新的函数声明方式;
使用箭头(=>)取代了传统的function关键字。箭头函数具有更简洁的语法,并且自动绑定了上下文,解决了回调函数中this指向问题。
3、解构赋值,一种从数组或对象中提取值并赋值给变量的语;
在这里插入图片描述
在这里插入图片描述

4、默认参数,允许在函数定义时为参数提供默认值;
5、扩展运算符,可以将数组或对象展开,提取出其中的元素;
在这里插入图片描述

6、模板字符串;
7、类和模块;
8、迭代器和生成器;
9、promise对象;
10、模块化导入和导出等等。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!