前端面试题

面试题

一.CSS

1.css盒子模型

在html页面中的所有元素都可以被看做为一个盒子。盒子的组成：有内容context、内边距padding、边框border、外边距margin。

盒模型的类型：

标准盒模型（margin+border+padding+context）

C3盒模型（margin+context（padding+border））设置padding和border不会撑开盒子 设置盒子的宽度和高度是多少就是多少

控制盒子模型的格式：box-sizing: content-box;（默认值：标准盒模型）和 box-sizing: border-box;（IE盒模型）

2.CSS选择器的优先级

CSS的特性：继承性、层叠性、优先级

优先级：在写css样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签选择器 > 全局选择器

3.隐藏元素的方法

display: none; 最常用的一种方法 使用这个元素直接消失，不占据空间位置

opacity: 0; 设置元素的透明度为0，元素还占有当前位置

visibity: hidden; 元素还占有当前位置，只是不可见

position: absolute;

clip-path

4.px和rem的区别

px：显示器上呈现画面的像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

rem：相对html根节点的font-size的值，可以直接给html节点的font-size：62.5%（1rem = 10px；（16px*62.5% = 10px））

5.重排和重绘

重排：回流，布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小

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

浏览器的渲染机制：对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排。对DOM的样式进行修改，比如color/background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，这里只触发了重绘。

6.让一个元素水平居中的方式有哪些

定位+margin

定位+transfrom

flex布局

grid布局

table布局

7.CSS的哪些属性可以被继承？哪些不可以被继承？

CSS的三大特性：继承性，层叠性，优先级

继承性：子元素可以继承父类元素的样式

例如：字体的一些属性：font、文本的属性：text line、元素的可见性：visibility：hidden、表格布局的属性：border-spacing、列表的属性：list-style、页面的样式属性：page、声音的样式属性

8.预处理器

css的弊端：不利于重复利用，写一些样式的时候重复用到一些属性不利于维护和扩展，于是增加了预处理器的

预处理器增加了变量、函数、混入等强大的功能，利于维护与扩展，提升开发效率

SASS和LESS

二.JS

1.JS由哪三部分组成

ECMAScript和DOM（文档对象模型）和BOM（浏览器对象模型）

ECMA是JS核心的内容，是js的基础语法描述了语言的基础语法var for 数据类型 字符串 数组

DOM：把整个HTML页面规划为元素构成的文档

BOM：对浏览器进行操作和访问

2.JS由那些内置对象

String、Boolean Number、Array、Object、Function、Math、Date、RegExp

Math：abs() sqrt() max() min()等方法

Data：new Data()实例化一个时间 getYear()

Array：

String：concat() length slice() split() 方法

3.操作数组的方法

Array

push()、pop()、sort()、splice()、unshift()、shift()、reverse()、concat()、join()、map()、filter()、ervey()、some()、reduce()、isArray()、findIndex()

那些会改变原数组：

push()、pop()、sort()、splice()、unshift()、shift()、reverse()

4.JS对数据类型的检验的方式有哪些？

typeof() 只能判断基本数据类型

instanceof() 只能判断引用数据类型 不能判断基本数据类型

constructor 几乎可以判断基本数据类型 和引用数据类型 PS：如果声明了一个构造函数并把它的原型指向了Array的时候 就判断不出来了

Object.proptotype.toString.call() 完美解决方案！！

5.闭包和闭包的特点

函数嵌套函数，内部函数被外部函数返回并保存下来时，就会产生闭包

特点：可以重复利用变量，并且这个变量不会污染全局的一种机制，这个变量一直保存在内存中，不会被垃圾回收机制回收

缺点：对内存消耗，导致页面的性能下降，在IE浏览器中才会导致内存的泄露

使用场景：防抖，节流，函数嵌套避免全局污染的时候

6.前端内存泄漏怎么理解

JS里面已经分配内存地址的对象，但是由于长时间没有释放或者没办法清除会造成长期占用内存的现象，会让内存资源大幅浪费，最终导致运行速度慢，甚至崩溃

JS中有垃圾回收机制

因素：一些为生命直接赋值的变量，一些未清空的定时器；过度的闭包，一些引用元素没有被清除

7.事件委托是什么

事件委托：又叫事件代理，利用事件冒泡的机制来实现，把子元素的事件绑定到父元素上。

事件捕获：浏览器会从根节点=>事件源（由外层到内层）进行事件传播。

如果子元素阻止了时间的冒泡那么委托也不会存在（阻止事件冒泡：event.stopPropagation()）

addEventListener(‘click’, 函数名, true/false) 第三个参数就是事件冒泡的开启情况 默认是false开启事件冒泡 。true开启事件捕获

好处：提高性能，减少事件的绑定，减少了内存的占用

8.基本数据类型和引用数据类型的区别

基本数据类型：String Boolean Number undefined null

复杂数据类型：Object Function Array

基本数据类型是保存在栈内存中，引用数据类型是保存在堆内存中，栈内存中只保存地址值执行堆内存

假如两个引用类型同时指向了一个地址的时候，修改一个另一个也会变化！

9.原型链

原型就是一个普通的对象，为了构造函数的实例共享属性和方法。所有实例中引用的原型都是同一个原型对象

使用prototype可以把方法挂载在原型链上，内存只保存一份

__ proto __可以理解为指针，实例对象中的属性，指向了构造函数的元素（proptotype）

原型链：就是一个实例对象调用属性和方法的时候，会依次从实例本身、构造函数原型、原型对象上去查找

10.new操作符具体做了什么

首先创建一个空对象，

把空对象和构造函数通过原型链进行连接，

把构造函数的this绑定到新的空对象上，

根据构建函数返回的类型判断，如果是值类型，则返回对象；如果是引用数据类型，返回这个引用数据类型

11.JS如何实现继承

原型链继承

借用构造函数继承

组合式继承

ES6的class继承

12.JS的设计原理

JS引擎 运行上下文 调用栈 事件循环 回调

JS引擎把代码转换为电脑可以执行的代码，js调用一些API让浏览器可以执行，因为JS为单线程的，每次从调用栈取出代码调用，代码耗时的话会阻塞代码的运行，导致浏览器卡顿。回调函数通过加入事件队列里面等待事件循环，把其拿出来放入调用栈中执行，只有事件循环监听到调用栈为空的时候才会从事件队列里面拿出来，放入到调用栈里面去执行

13.JS中关于this的指向问题

全局对象中的this指向：指向window

全局作用域或者普通函数中的this：指向window

this永远指向最后调用它的哪一个对象，箭头函数除外

new 关键字 改变了this的指向

apply() call() bind() 可以改变this的指向，不是箭头函数

箭头函