面试题大集合

css3和html

1-display有哪些常用属性

    none 设置元素隐藏

    block 此元素将显示为块级元素，此元素前后会带有换行符

    inline 默认。此元素会被显示为内联元素，元素前后没有换行符

    inline-block 行内块元素、

2-position属性

   static 为默认值，指示元素出现在正常的文档流中

   相对定位(relative)：相对于该元素在文档流中的正常位置进行偏移定位，原占位仍保留(即不脱离文档流)

   绝对定位(absolute)：相对于static定位以外的最邻近父级元素进行偏移定位，即相对于其直接父级元素。注意：脱离了文档流

   固定定位(fixed)：相对于浏览器窗口进行定位，即固定定位是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动，因此应用得很少。主要运行于浏览器窗口的贴边定位

   inherit:规定应该从父元素继承 position 属性的值。

   粘性定位(sticky):这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

3-用css隐藏div有哪些方法，区别是什么

    display:none

    设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

    visibility: hidden

    虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

    opacity:0

    设置元素透明度opacity属性为0，也可以隐藏页面元素，在呈现上与visibility:hidden;方式一样，同样会占据页面空间。

     差异性

     display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

     visibility: hidden;的元素不会触发绑定的事件。

     opacity:0; 的元素仍然会触发绑定的事件。

4-说说flex布局

5-css清除浮动有哪几种方案

https://blog.csdn.net/qwguanbin/article/details/107317634?spm=1001.2014.3001.5501

6-让一个盒子水平垂直居中有哪几种方案

https://blog.csdn.net/qwguanbin/article/details/107519442?spm=1001.2014.3001.5501

7-img标签atl和title区别

当图片加载不出来的时候，就会在图片未显示的地方出现一段 alt 设置的属性内容

浏览器的搜索引擎可以通过 alt 属性的文字描述来获取图片

title 属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会显示预先设置的 title 的内容，起到对图片说明的作用

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

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

9-css选择器有哪些？优先级？

• id选择器（#box），选择id为box的元素
• 类选择器（.one），选择类名为one的所有元素
• 标签选择器（div），选择标签为div的所有元素
• 后代选择器（#box div），选择id为box元素内部所有的div元素
• 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
• 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
• 群组选择器（div,p），选择div、p的所有元素

内联 > ID选择器 > 类选择器 > 标签选择器

10-常见的行内元素、块级元素

1、块级元素（div,p,h1...h6,ol,ul,table）

块级元素可自动换行，可以设置宽高，margin，padding都有效。

2、行内元素（span,a,img,input,strong）

行内元素不会自动换行，设置宽高无效，对margin设置左右有效，上下无效，padding都无效。

11-说说bfc

块级格式化上下文，用于形成一个独立的渲染区域，内部元素的渲染不会影响到外界。

触发条件：浮动float不为none，定位position为absolute和fixed，overflow不为visible

使用场景：清除浮动，两栏布局，解决上下两个元素margin重叠

12-讲讲回流和重绘

页面首次加载会触发回流，像改变元素尺寸，位置等会触发回流，而改变元素颜色会触发重绘。

重绘不一定会引发回流，回流必然导致重绘。

13-浏览器的渲染过程

14-什么是盒模型

盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）

标准盒模型的大小就是内容大小，不包含padding ，border的大小，而IE盒模型的大小是包含padding +border。

15-link和@import的区别。

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

16-从输入url到加载完页面主要发生了什么

一、DNS解析

二、建立TCP连接
三、客户端发送HTTP请求
四、服务端返回资源
五、浏览器渲染页面
六、断开TCP连接

17-浏览器运行机制

1、解析HTML文件，构建DOM Tree

2、解析CSS，构建CSSOM Tree（css规则树）

3、将DOM Tree和CSSOM Tree合并，构建Render tree（渲染树）

4、生成布局（flow），浏览器在屏幕上“画出”渲染树中所有的结点

5、将布局绘制（paint）在屏幕上，显示出整个页面

js基础

1-说说js的数据类型

基本数据类型包含number，string，null，undefined，boolean，以及es6新增的symbol

引用类型 object

2-基本数据类型和引用类型的区别

存放方式不同，基本数据类型存放在栈中，引用类型存放在堆中

3-数组去重有哪些方法

1-indexOf()通过循环返回值-1判断是否存在，不存在就加到一个新数组中。

2-用json去重

var arr=[1,2,33,2,4,5,33,5,7,8,1,3];
   var result=[];
   var temp={};
   for( var i=0;i<arr.length;i++){
   if(!temp[arr[i]]){
     result.push(arr[i]);
     temp[arr[i]]=1;
   }
}

console.log(result);
3-用es6 set去重

var arr=['qwe','asdasd','xxxxx','qwe',55555,12312,55555,454222];
            var newarr = new Set(arr)
            
            console.log(Array.from(newarr))

4-同步和异步的区别

5-跨域的原因和解决方案

6-说说原型和原型链还有实例

每个函数都会有一个prototype属性，这个属性是一个指针，指向的是原型对象，原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，所以一般可以将对象中共有的内容统一设置到原型对象中，方便后续可直接调用。

所有实例都会有一个隐含的属性（__proto__），指向构造函数的原型对象，原型对象也可能还会有原型对象，像这样一层层的就构成原型链。

7-什么是闭包

闭包就是能够读取其他函数内部变量的函数（延长变量生命周期，创建私有环境）。

闭包的用途：一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

闭包的缺点：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

8-let，const，var的区别

var定义的变量可以修改，存在变量提升，在同一个作用域里可以重复声明同一个变量，没有块级作用域

let定义的变量可修改，没有变量提升，做同一个作用域不可以重复同一个b，有块级作用域

const定义的变量不可修改，没有变量提升，有块级作用域。

9-什么是this

在调用函数时，解析器每次都会传递进两个隐含的参数this和arguments

this为函数的上下文对象

以函数的形式调用时，this永远都是window
以方法的形式调用时，this指向的是调用方法的对象
以构造函数的形式调用，this是新创建的那个对象

如果遇到箭头函数，因为箭头函数不会改变this指向，所以this指向的是父级函数对象。
使用call和apply调用时，this是指定的那个对象
arguments为封装实参的对象，arguments是一个类数组，可以通过索引来操作也可以获取长度，调用函数时传递的实参都会在arguments中保存，里面有一个属性叫callee，就是当前指向的函数对象。

function fun() {
    console.log(arguments);
}
fun(2,3,5,6,4,5);

10-unll和undefined的区别

11-防抖和节流怎么实现

防抖和节流_qwguanbin的博客-CSDN博客

• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

• 电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

  电梯第一个人进来后，15秒后准时运送一次，这是节流

12-一次完整的http请求经历哪7个步骤

13-前端性能优化有哪些方案

14-优雅降级和渐进增强是什么意思

15-判断变量类型有哪几种方式

typeof()

Object.prototype.toString.call()

jquery.type()

instanceof

constructor

16-说说es6的新特性

https://blog.csdn.net/qwguanbin/article/details/107298716?spm=1001.2014.3001.5501

17-说说js事件冒泡和向下传导

js冒泡指的就是js事件的向上传导，当后代元素上的事件被触发时，祖先元素的相同事件也会被触发。

冒泡可以通过事件对象来取消冒泡以下为两种方法

event.stopPropagation()

event.cancelBubble = true

18-说说call和apply,bind

call和apply都是执行函数用的，可以改成this指向

call调用函数改变指向是fun.call(a,b,c...) (a是this指向的对象，后面都是参数)

apply是fun.apply(a,["b","c"])

bind是把函数作为返回值返回

let funs = fun.bind(a,b,c...)

19-常用的浏览器内核有哪几种

谷歌内核，火狐内核，ie内核，苹果内核

20-如何判断两个变量相等

21-数组的一些操作方法

push()

concat()合并数组

unshift() 数组开头添加

pop() 删除数组的最后一项，返回被删除的项

shift() 删除数组的第一项，返回被删除的项

splice() 传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素后的数组

slice() 创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组（截取数组部分数据）

split()把一个字符串分割成字符串数组

jion()把一个数组按指定分割符分割成字符串

22-数组各个遍历方法区别

forEach()没有返回值，遍历处理数组。

map有返回值，用return返回一个新的数组。 

some() 返回一个布尔值，判断是否有元素符合,如果有一个符合条件，就会终止循环，返回true

 arr.some((item,index) => {
    return item > 5;  // true
 })

every() 返回一个Boolean，判断每一个元素是否都符合，如果有一个不符合，就会终止循环，返回false

arr.every((item,index) => {
    return item < 20;  //true
})

filter()有返回值，返回一个符合条件的数组的集合

reduce() 让数组中的前项和后项做某种运算，并返回运算结果

let res = arr.reduce((prev,next) => {
    return prev + next;
 })
 console.log(res);  // 28

find() 不创建新数组，不改变元素组,在判断中一旦某个元素符合，立马跳出循环，返回当前符合条件的元素

let res = arr.find((item,index) => {
    console.log( 'arr[' + index + '] = ' item );   // arr[3] = 4 
    return item > 3;
})
console.log(res);  // 4

23-说说你对作用域链的理解

作用域就是变量与函数的可访问范围

变量取值到创建这个变量的函数的作用域中取值。 但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链

24-new关键字做了什么？

// 1. 创建一个空对象
let obj = new Object(); // Object => 基类

// 2.设置它的原型链
obj._proto_ = Person.prototype;

// 3. 改变this指向
let result = Person.call(obj)

// 4.判断返回值类型
if(typeof (result) == "object"){
    person1 = result
}else{
    person1 = obj;
}

25-for in和for of区别？

var arr = ['red', 'green', 'blue']
for(let item in arr) {
  console.log('for in item', item)
}
/*
  for in item 0
  for in item 1
  for in item 2
*/
for(let item of arr) {
  console.log('for of item', item)
}
/*
  for of item red
  for of item green
  for of item blue
*/

var obj = {
   'name': 'Jim Green',
   'age': 12
 }
for(let key of obj) {
   console.log('for of obj', key)
 }
 // Uncaught TypeError: obj is not iterable
for(let key in obj) {
   console.log('for in key', key)
 }
 /*
   for in key name
   for in key age
 */

26-宏任务与微任务

宏任务一般是：script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境)
微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)

代码执行会先执行同步代码，如果遇到微任务会把微任务放到微任务队列种，遇到宏任务把宏任务放到宏任务队列中，等同步代码执行完毕之后，再去先执行微任务队列中的微任务依次执行完毕之后，再去宏任务队列中依次执行宏任务。

27-window.onload和$(document).ready的区别

window.onload必须等到页面内包括图片的所有元素和资源加载完毕后才能执行；$(document).ready()是DOM加载完毕后就执行，不必等到整个网页资源加载完毕。所以，使用document.ready()方法的执行速度比window.onload的方法要快。

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

vue

1-vue生命周期

vue2

beforeCreate	组件实例被创建之前，执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
create	组件实例已创建初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	组件挂载之前，DOM未创建
mounted	组件挂载到实例上之后，初始化结束，DOM已创建，可用于获取访问数据和DOM元素
beforeUpdate	组件数据更新前，可用于获取更新前的各种状态
updated	组件数据更新后，所有状态已是最新状态
beforeDestroy	组件销毁前，可用于一些定时器或订阅的取消
destroyed	组件已销毁，作用同上

vue3

2-vue导航钩子

全局守卫

beforeEach进入页面前执行

afterEach进入页面后执行

路由独享守卫
beforeEnter控制单个路由页面

组件内的守卫

beforeRouteEnter进入组件前

beforeRouteLeave进入组件后

3-vue2双向绑定的原理和vue3

vue2 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

vue3是通过proxy

4-讲讲vuex

1. state 放数据的
2. getter state的计算属性
3. mutations 修改state数据的，只能执行同步操作 写法： this.$store.commit(‘mutations方法名’,值)
4. action 异步操作用，写法： this.$store.dispatch(‘actions方法名’,值)调用action里面的方法再用commit调用mutation里面的再去修改state里数据
5. modules 模块化vuex

5-vue计算属性和watch的区别是什么

计算属性一般用于计算多个数据，只能同步，watch可以对监听的数据进行一些复杂操作还可以异步。

6-vue属性改变却没有渲染的解决方案

$set

7-v-show和v-if区别

8-为什么使用key?

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

9-$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

10-route和router的区别

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。

this.$router：全局的 router 实例,跳转用。

11-说说vue3

   1.setup组合式api，在vue2中，数据和方法都是分别写在data和methods中，这样当数据方法多了之后会比较混乱，而setup解决了这个问题，可以将数据和对应得方法写到一块中，降低了代码的耦合度。

2-ref和reactive将数据变成响应式。

12-vue路由两种模式

    1- hash模式下，它指 # 号之后的所有字符，但是他虽然包含在url中，但是不包含在http请求中。所以改变hash值不会重新加载页面，对传给后端的url没有任何影响，因此不会重新加载页面。它每次改变都会触发hashchange事件，可以通过给window加上hashchange事件进行监听。它是单页面的标配

    2-history模式 url都会包含在http请求

12-diff算法原理

TypeScript

1-什么是联合类型

let a:number | string
/**
申明变量a为number或string类型
**/

2-any和unknown是什么

let a:any
/**
any表示变量是任意类型，设置为any相当于关闭了ts的类型检测
如果申明变量时不指定类型，ts会自动判断变量类型为any
**/
let a:unknown
/**
unknown表示变量是未知类型，类似any区别就是any可以赋值给任意变量，而unknown不行。
**/

3-viod和never区别

viod表示空值，表示函数的没有任何返回值，never表示函数不能有返回值。

4-泛型是什么

/**
在定义函数时，如果类型不明确可以使用泛型
**/
function fn<k>(a:k) : k{
   return a;
}