面试题总结

通常当⿏标滑动到元素上的时候显示
alt 属性是当元素不能正常呈现时用作元素内容的替代文本。 <img> 是使用 alt 属性的最常用标签。当无法加载图像时，浏览器将在其位置显示 alt 文本，以便用户了解包含图像的含义。
title 属性是将鼠标悬停在元素上时看到的工具提示文本，是对图片的描述和进一步的说明。

3.行内元素和块级元素

1，块级元素独占一行，块级元素可以设置 width, height属性

2，行内元素挨个排放，行内元素设置width,height属性无效

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

4.媒体查询的使用方式

使用 @media 规则在样式表中指定对应的设备类型；用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定的设备类型。

/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

5.src和href之间的区别

1.href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

2.src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

6.css让元素看不到的方法

可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none。

7.重绘和回流

1.重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

2.回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

8.new操作符具体干了什么

1.创建一个空对象，并且this了变量应用该对象，同时还继承了该函数的原型。

2.属性和方法被加入到this应用的对象中。

3.新创建的对像由this所引用，并且最后隐式的返回this。

9.ajax的原理

1.ajax的原理简单的来说是在用户和服务器之间加入了一个中间层（ajax引擎），通过XmlHttpRequest对象来向服务器发异步请求从服务器获取的数据，然后用javascript来操作DOM而更新新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据。

2.ajax的过程只是涉及JavaScript，XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制。

10.常见的设计模式有哪些

1有单列模式和观察者模式。

单列模式：确保一个类只有一个实例，先判断实例是否存在如果存在就直接返回，不存在就创建了在返回这个就确保了一个类只有一个实例对象。

在JavaScript中单列作为一个命名空间的提供者，从全局命名空间中提供一个唯一的访问点来访问该对象

观察者模式：当一个对象的改变需要同时改变其他对象，并且不知道有多少对象需要改变的时候，就应该考虑到使用观察者模式。

观察者模式所做的工作就是在解耦。让耦合的双方都依赖于抽象，而不是依赖于具体，从而使得个自的变化都不会影响的另一边的变化。

11.说一说对promise的了解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

12.js数据类型有哪些

js数据类型有：

基本数据类型：Number，String，undefined，null，boolean，symbol，bigInt

复合类型：Object，function，array

13.js的内存存储方式

js内存存储方式有三种：

一是：sessionStorage

二是：localStorage

三是：cookie

14.js里如何判断是不是一个数组

1、使用“Array.isArray (数组对象)”语句来判断，如果是数组则返回true。

2、使用“数组对象.constructor===Array”语句来判断。

3、使用“数组对象 instanceof Array”语句来判断

15.map和foreach的区别

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。

map 方法主要对数组的复杂逻辑处理时用的多，特别是 react 中
遍历数据，也经常用到，写法和 forEach 类似

16.vue2的双向数据绑定原理

核心主要利用es5中的object。defineProperty实现的，然后利用里面的getter和setter来实现双向数据绑定的，大致上就是这些，其实要实现起来比这个要复杂一些，不过我大致了解过。

17.数组去重的方法

1.利用es6的 Set去重

2.利用for嵌套for，然后splice去重

3.利用indexOf去重

4.利用filter

5.利用includes

18.防抖和节流

1.节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

function throttle(fn, delay = 500) {
    let oldtime = Date.now()
    return function (...args) {
        let newtime = Date.now()
        if (newtime - oldtime >= delay) {
            fn.apply(null, args)
            oldtime = Date.now()
        }
    }
}

2.防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

19.apply，call，bind的区别

apply，call，bind主要作用都是改变this指向的，使用上有区别。

1,call和apply主要区别是在传递参数上的不同，call后面传递参数是以逗号形式分开的，

apply传递参数是以数组形式。

2,bind返回的是一个函数形式，如果要执行后面要再加一个小括号

bind(obj,参数 1,参数 2,)(),bind 只能以逗号分隔形式，不能是数组形式

20.this的指向

箭头函数和普通函数的区别：

1箭头函数指向定义时，定义的时候this就确定了指向他的外层。

2普通函数指向调用时，谁调用了我,this就指向谁。

21.判断js的数据类型

最长见的是：typeof

判断已知对象类型的方法： instanceof

22.eventloop的理解

js的一个底层运行原理，js是单线程的，但是也是也是有一些耗时任务，会影响执行效率，代码都在主线程中执行，当遇见像ajax请求，setTimeout定时器时候，会单独开启异步线程，异步线程耗时之后会推入异步队列中等待执行，然后当主线程执行完毕之后，会到异步队里中取出来到主线程中执行，然后再去异步队里中取第二个，这个来回取的过程就是事件循环（eventloop）

23.常见的跨域方式

一、是 jsonp
jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口
地址，然后传递 callback 参数，后端接收 callback，后端经过
数据处理，返回 callback 函数调用的形式，callback 中的参数
就是 json

二、通过代理的方式（前端代理和后端代理）
前端代理我在 vue 中使用那个 vue.config.js 里面配置一个
proxy,里面有个 target 属性指向跨域链接.修改完重启项目就可
以了.实际上就是启动了一个代理服务器.绕开同源策略,在请求
的时候,通过代理服务器获取到数据再转给浏览器

三、是 CORS
CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达
到前端跨域请求的

24.存储方式浏览器

我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）。

25.浏览器的缓存策略

强缓存
协商缓存

1，根据http header判断是否命中强缓存，如果命中，返回200状态码，让客户端直接从本地缓存中获取资源，不会向服务器请求资源

2，当没有命中强缓存时，客户端会发送请求到服务器，服务器通过request header验证该资源是否命中协商缓存

3，如果命中协商缓存，服务器直接返回请求（304状态码），不返回资源，告诉客户端直接从本地缓存中获取资源

4，如果未命中协商缓存，服务器在返回请求的同时（200状态码）将资源也返回给客户端

26.vue2的生命周期

vue 生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下 4
个阶段：创建，挂载，更新，销毁

创建前：beforeCreate, 创建后:created
挂载前：beforeMount, 挂载后：mounted
更新前：beforeUpdate, 更新后：updated
销毁前：beforeDestroy, 销毁后：destroyed

27.http的常见的状态码

100（临时响应）表示临时响应并需要请求者继续执行操作的状态代码

2xx （成功）
表示成功处理了请求的状态码。
常见的 2 开头的状态码有：200 – 服务器成功返回网页

3xx （重定向）
表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向

301（永久移动）请求的网页已永久移动到新位置。服务器返回此响应
时，会自动将请求者转到新位置。

302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应
继续使用原有位置来进行以后的请求。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响
应时，不会返回网页内容。

4xx（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
常见的 4 字开头的状态有：404 – 请求的网页不存在
401 没权限吧.当时在我们项目里面的时候 token 值过期就是返回 401.我在响应拦
截器做了处理

5xx（服务器错误）
这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本
身的错误，而不是请求出错。
常见的以 5 开头的状态码有：
500 （服务器内部错误）服务器遇到错误，无法完成请求。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这
只是暂时状态

28.标准盒子模型和怪异盒子模型

盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个
盒子（即标签）都会有内容(width,height)，边框(border)，以及内容和边框
中间的缝隙（即内间距 padding），还有盒子与盒子之间的外间距（即margin）,
用图表示为：

当然盒模型包括两种：IE 盒模型和 w3c 标准盒模型

IE 盒模型=设置的 width 宽度+margin 的值,其中,width 值包含了 padding
和 border;

标准盒模型＝width+padding+border+margin
那如何在 IE 盒模型宽度和标准盒模型总宽度之间切换呢，可以通过
box-sizing:border-box 或设置成 content-box 来切换
其中：box-sizing：border-box //IE 盒模型
box-sizing：content-box //w3c 盒模型

29.如何清除浮动

方式一:使用overflow属性来清除浮动

.ovh{

　　　　　　overflow:hidden;

　　　　　}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

方式二:使用额外标签法

.clear{

　　　　　　clear:both;

　　　　　}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

30.es6的新增语法

es6新增的有let/const，箭头函数，模板字符串，解构赋值，模块的导入（import）和导出（export default），promise，扩展运算符：...，set

31.vue子父组件传值

1，在子组件上绑定某个事件以及事件触发的函数

子组件代码

<template>

<div>

<Tree :data="treeData" show-checkbox ref="treeData"></Tree>

 

<Button type="success" @click="submit"></Button>

</div>

   

</template>

事件在子组件中触发的函数

submit(){

  this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());

},

2，在父组件中绑定触发事件

<AuthTree  @getTreeData='testData'>

</AuthTree>

父组件触发函数显示子组件传递的数据

testData(data){

      console.log("parent");

      console.log(data)

    },

cookie 可以设置失效时间，但没有自己的存取取的方法，需要时封装，
每次请求时跟随请求发送,而 localStorage 和 sessionStorage 可以有自己存
取的方法例如：setItem(),getItem(),removeItem(),clear()

如：localStorage.setItem(‘属性’，值)

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间，如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4k左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在http头中，如果使用Cookie保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信
易用性	需要程序员自己封装，原生的Cookie接口不友好	原生接口可以接受，可再次封装来对object和array有更好的支持

33 let ，const,val的区别

1-变量提升-

var存在变量提升即变量可以在声明之前调用，值为undefined，

let const 不存在变量提升他们所声明的变量一定要在声明后使用否则报错

2-暂时性死区-

val不存在暂时性死区

let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

3-块级作用域-

val 不存在块级作用域。

let 和const存在块级作用域

4-重复声明-

var 允许重复声明变量

let 和 const 在同一个作用域下不允许重复声明变量

5-修改声明变量-

val 和 let 可以修改声明变量

const 声明一个只读的常量一旦声明，常量的值就不能改变

34.computed和watch的区别

计算属性computed：

1，支持缓存，只有依赖数据发生改变，才会重新进行计算

2，支持异步，当computed内有异步操作时无效，无法监听数据的变化

3，computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4，如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5，如果computed属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

侦听属性watch：

1，不支持缓存，数据变，直接会触发相应的操作；

2，watch支持异步；

3 ，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4，当一个属性发生变化时，需要执行对应的操作

35.vue3常用的api

1,setup

2,生命周期

3，reactive

4，ref，

5，toRef，toRefs

6，shallowReactive

7，shallowRef

8，toRaw

9，markRaw

36.js常见的创建方式

1、{}
2、new Ｏbject()
3、使用字面量
4、工厂模式
5、构造函数模式（constructor）
6、原型模式（prototype）
7、构造函数+原型模式

37.==和===的区别

前者会自动转换类型
后者不会
1==”1”
null==undefined
===先判断左右两边的数据类型，如果数据类型不一致，直接返回 false
之后才会进行两边值的判断

38.阻止事件冒泡的方式

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9 之前
阻止默认事件：
为了不让 a 点击之后跳转，我们就要给他的点击事件进行阻止
return false
e.preventDefault();

39.http请求方法有哪些

1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	允许客户端查看服务器的性能。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

40.rem和em的区别

rem 和 em 都是相对单位，主要参考的标签不同：
1，rem 是相对于根字号，即相对于<html>标签的 font-size 实现的，浏览
器默认字号是 font-size:16px
2，em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，
只不过是%相对于父级宽度的，而 em 相对于父级字号的

41.实现一个div上下左右居中的三种方法

第一种：定位

通过给div设置绝对定位，并且

left，rigth，top，bottom设置给div设置为0，margin:auto即可以水平垂直居中

第二种思路：通过给 div 设置绝对定位，left 为 50%,top 为 50%,再给
div 设置距左是自身的一半即：margin-left:自身宽度/2,margin-top:自身高度/2。

第三种思路：通过给 div 设置绝对定位，left 为 50%,top 为 50%，再给
div 设置跨左和跟上是自身的一半：transform:translate3d(-50%,-50%,0)

第四种：flex 布局:思路：有两个div，父级div和子级div，给父级div设置display:flex,
并且设置父级 div 的水平居中 justify-content:center，并且给父级 div 设置
垂直居中 align-items:center 即可

42.v-for和v-if的区别

当他们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。

当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用

<li v-for="todointodos" v-if="!todo.isComplete">
{{todo}}
</li>
上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元
素 (或 <template>)上

43.router传参的方式

1. 声明式导航

<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>

<router-link :to="{name:'test',params: { userId: 123,userName:'xia' }}">跳转</router-link>

2. 编程式导航

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

44.v-if和v-show的区别

1，v-if 和 v-show 都可以显示和隐藏一个元素，但有本质区别
2，v-if 是惰性的，只是值为 false 就不会加载对应元素，为 true 才动态加
载对应元素
3，v-show:是无论为 true 和为 false 都会加载对应 html 代码，但为 false
时用 display:none 隐藏不在页面显示，但为 true 时页面上用 display:block
显示其效果
4，适用场景：切换频繁的场合用 v-show,切换不频繁的场合用 v-if

45.URL输入到地址栏后发生了什么

DOM 树构建一个样式表.组合成一颗 render 树,页面经过重绘(重塑)和回流
的过程.

大致过程是这样的：
1. DNS 解析
2. TCP 连接
3. 发送 HTTP 请求
4. 服务器处理请求并返回需要的数据
5. 浏览器解析渲染页面
6. 连接结束

输入了一个域名,域名要通过 DNS 解析找到这个域名对应的服务器地址(ip),通过 TCP
请求链接服务,通过 WEB 服务器(apache)返回数据,浏览器根据返回数据构建 DOM 树,再把
css 形成一个样式表.这两个东西结合,变成了 render 树.页面上通过重绘和回流的过程,渲
染出页面来