2023最新八股文前端面试题 (css、js、h5c3)

HTML+CSS

1.说一下css的盒模型

在HTML页面中的所有元素都可以看成是一个盒子

盒模型的组成：是由内容、内边距、边框、外边距组成的

盒模型的类型：

        标准盒模型 margin +border+padding +content

        IE盒模型 margin +content（border+ padding）

box-sizing:content-box(默认值，标准盒模型)、border-box（IE盒模型）

2.CSS选择器的优先级？

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

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

3.隐藏元素有那些？

3.1元素在页面中消失，不占据空间

display:none

3.2设置的样式的透明为0，元素不可见，占据空间位置

opacity(哦爬斯几) :0 

让元素消失，占据空间位置，一种不可见的状态

visibility(v斯白了提):hidden

4.px和rem的区别是什么？

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的，绝对单位长度

rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;  1rem=10px;  (16px*62.5%=10px)

5重排和重绘有什么区别？

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

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

浏览器的渲染机制

对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

对DOM元素的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘

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

1.定位+margin

2.定位+transform

3.flex布局

4.grid布局

5.table布局

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

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

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

1.字体的一些属性：font

2.文本的一些属性：line-height

3.元素的可见性：visibility:hidden

4.表格布局的属性:border-spacing

5.列表的属性:list-style

6.页面样式属性：page

7.声音的样式属性

8.有没有用过预处理器？

预处理语言增加了变量、函数、等强大的功能

SASS LESS

 javascript

1.JS由那三部分组成？

ECMAScript :JS核心内容 ，描述了语言的基础语法，比如var、for循环、数据类型（数组、字符串）        

文档对象模型（Dom）: Dom把整个HTML页面规划为元素构成文档

浏览器对象模型（Bom）: 对浏览器窗口进行访问和操作

2.JS有哪些内置对象？

String Boolean Number Array Object Function Math Date RegExp

常用 Math: abs() sqrt() random() max() min

        Date: new Date  getFullYear() getMount() getHours()

        Array: indexOf() Array.isArray() sort() splice() includes()

        String: concat() length slice() split()

3.操作数组的方法有那些？

push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter() every() some() reduce() Array.isArray() findIndex()

那些方法会改变原数组

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

4.对数据类型的检测方式有哪些

typeof()、instanceof()、constructor、Object.prototype.toString.call()

4.1typeof() 对于基本数据类型没问题，遇到引用数据类型就不管用

console.log(typeof 666) //number

console.log(typeof []) //object 明明是个数组

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

console.log([] instanceof Arrat) //true

console.log('abc' instanceof String) //false //明明是字符串 所有不能判断基本数据类型

4.3constructor 几乎可以判断基本数据类型和引用数据类型，如果生命了一个构造函数，并把它的原型指向了Array

conlose.log(('abc').constructor===String) //true 

4.4Object.prototype.toString.call()

var opt=Object.prototype.toString

console.log(opt.call(2)) // Number

console.log(opt.call(true)) //Boolean

console.log(opt.call('aaa')) // String

console.log(opt.call([])) //Array

5.说一下闭包，闭包有什么特点？

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

特点：可以重复利用变量，避免垃圾回收，可以用来保存一个需要持久保存的变量，

缺点: 闭包较多的时候，会增大消耗内存，在IE浏览器里面会导致内存泄漏 

解决方法：防抖，节流，函数嵌套函数避免全局污染的时候

6.内存泄漏怎么理解？

JS里已经分配内存地址的对象，

.但是由于长时间没有释放或者没办法清除，造成长期占用内存的现象，会让内存资源大幅浪费，最终导致运行速度慢，甚至崩溃的情况。

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

7.事件委托是什么？

又叫事件代理，原理就是利用了事件冒泡机制来实现，也就是说把子元素的事件绑定到父元素的身上。

 子元素阻止了事件冒泡，那么事件委托也就不成立

阻止事件冒泡：event.stopPropagation()

addEventListener('click',函数名，true/false) 默认是false(事件冒泡),true(事件捕获)

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

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

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

基本数据类型保存在栈内存当中，保存的就是一个具体的值

引用数据类型(复杂数据类型): Object Function Array

引用数据类型是保存在堆内存中，声明一个引用数据类型的变量，它保存的是引用数据类型的地址

假如声明两个引用类型同时指向了一个地址的时候，修改其中一个那么另外一个也会改变

9.什么是原型，什么是原型链 ?

1、什么是原型？

 原型prototype:这个属性对应着一个对象，这个对象就是原型对象。

2、什么是原型链？

当我们使用一个对象的属性或方法时，首先会在自身中寻找，

自身有，则直接使用；

自身没有则去原型对象中寻找，原型对象中有，则使用；

再没有则去原型的原型中寻找 ,这个过程就是原型链。

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

1.先创建一个空对象

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

3.把构造函数的this绑定到新的空对象身上

4.根据构造函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型

11.JS是如何实现继承的？

1.原型链继承

2.借用构造函数继承

3.组合式继承

4.ES6的class类继承

12.Js的设计原理是什么？
同步：从头到尾 ，一行一行执行代码

异步：可以改变程序正常执行顺序（从头到尾）的操作就可以看成是异步操作。

13.Js中关于this指向的问题
1.全局对象中的this指向
指向的是window

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

3.this永远指向最后调用它的那个对象
在不是箭头函数的情况下

4.new 关键词改变了this的指向

5. apply,call,bind
可以改变this指向，不是箭头函数

6.箭头函数中的this
它的指向在定义的时候就已经确定了
箭头函数它没有this,看外层是否有函数，有就是外层函数的this，没有就是window

7.匿名函数中的this
永远指向了window,匿名函数的执行环境具有全局性，因此this指向window

14.script标签里的async和defer有什么区别?
当没有async和defer这两个属性的时候，
浏览器会立刻加载并执行指定的脚本

有async
加载和渲染后面元素的过程将和script的加载和执行并行进行（异步)

有defer
加载和渲染后面元素的过程将和script的加载并行进行（异步)，但是它的执行事件要等
所有元素解析完成之后才会执行

15.setTimeout最小执行时间是多少？
HTML5规定的内容：
setTimeout最小执行时间是4ms
setInterval最小执行时间是10ms

16.ES6和ES5有什么区别？
JS的组成：ECMAScript BOM DOM
ES5:全称（ECMAScript5）,2009年ECMAScript的第五次修订，ECMAScript2009
ES6:全程（ECMAScript6）,2015年ECMAScript的第六次修订，ECMAScript2015,是Js的下一个版本标准

17.ES6的新特性有哪些？

1.新增声明变量关键词（let const）
2.class类
3.解构赋值
4.扩展运算符
5.箭头函数
6.数组新增API
7.Promise封装
8.新增模块化（import，export）
9.新增set和map数据结构

18.call,aply,bind三者有什么区别?
都是改变this指向和函数的调用，call和apply的功能类似，只是传参的方法不同
call方法传的是一个参数列表
apply传递的是一个数组
bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的，bind(）（)
call方法的性能要比apply好一些，所以call用的更多一点

19.用递归的时候有没有遇到什么问题？
如果一个函数内可以调用函数本身，那么这个就是递归函数
函数内部调用自己
特别注意：写递归必须要有退出条件return

20.如何实现一个深拷贝?
深拷贝就是完全拷贝一份新的对象，会在堆内存中开辟新的空间，拷贝的对象被修改后，原对象不受影响
主要针对的是引用数据类型(以下就是改变深拷贝方法)
1.扩展运算符
2.JSON.parse(JSON.stringify())
3.利用递归函数实现

21.说一下事件循环
js是一个单线程的脚本语言
主线程 执行栈 任务队列 宏任务 微任务
主线程先执行同步任务，然后再去执行任务队列的任务，如果在宏任务之前有微任务，那么先执行微任务，全部执行完之后等待主线程调用，调用完之后再去任务队列查看是否有异步任务，这样一个循环的过程就是事件循环

22.ajax是什么？怎么实现的

再不重新加载整个页面的前提下，与服务器交换数据并更新部分内容
通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过js操作DOM更新页面 
1.创建XmlHttpRequest对象 xmh
2.通过xmh对象里的open()方法和服务器建立连接
3.构建请求所需的数据，并通过xmh对象的send（）发送给服务器
4.通过xmh对象的onreadystate changes事件监听服务器和你的通信状态
5.接收并处理服务器响应的数据结果
6.把处理的数据更新到HTML页面上