前端面试八股文

1.说说你对盒子模型的理解
盒子模型分为border边距，content内容，margin外边距，padding内边距
盒子模型分为俩种模式一种标准模式，一种IE模式
标准模式计算方式：box-zing:content-box
IE模式计算方式：box-zing:border-box
2.css选择器有哪些？优先级？哪些属性可以继承？
ID选择器-类选择器-标签选择器-相邻选择器-子选择器-后代选择器-通配符选择器-属性选择器-伪类选择器
可继承:font-size,font-fmily，color
不可继承:宽，高，边框，外边距，内边距
3.元素水平垂直居中的方法有哪些？如果元素不定宽高呢？
父元素设置display:flex，子元素margin：auto
父元素相对定位，子元素绝对定位，top：50%，left：50%，然后tansform:tanslate(-50%,-50%)
直接再父元素设置弹性盒子，然后justify-conten:center,align-items:center
使用单元格居中，直接父元素display:table-cell,text-content-center,vertical-align:middle
父元素使用display:grid,子元素align-slef:center,justify-self:center
4.怎么理解回流跟重绘？什么场景下会触发？
首先浏览器会解析html，生成dom树，解析css成cssom树，然后把dom和cssom结合起来，形成rendertree，然后根据生成的渲染树进行回流，得到节点的几何信息，然后重绘就是根据回流得到的几何信息，得到节点的绝对像素，最终将像素发生给GPU,展示再页面上
回流的触发：添加删除dom元素，元素的位置，尺寸发生变化，内容发生变化，窗口尺寸变化，都会触发回流
重绘的触发：颜色，文本，阴影发生变化，还有透明度得到
回流一定会触发重绘，重绘不会触发回流
避免减少的话就是，避免使用css的js表达式，避免多级内联样式，避免csstable布局。
5.什么是响应式设计？响应式设计的基本原理是什么？如何做？
首先响应式设计就是网络页面响应布局，就是给用户的不同的设备比如屏幕的大小，尺寸做一个响应式的调整
响应式的设计实现是通过四部分实现，分别式，媒体查询，百分比，vw/vh，rem实现的。
媒体查询就是通过媒体查询可以给不同分辨率的设备设置样式，比如给不同分辨率的设备设置不同大小的背景图片。
百分比就是根据页面的拉伸，扩大，做一个百分比的自适应，根据用户的屏幕设置响应式的自适应。
Vw就是相当于屏幕的宽度，vh设置屏幕的高度
Rem就相当于px像素，px和rem会有一个对比，一个转换
总结就是响应式设计就是面对不同分辨率的设备有一个灵活的调整，能够解决不同设备的一个自适应的问题。
6.如果要做优化，CSS提高性能的方法有哪些？
总首先都知道css是写样式的，然而css还可以提升性能，css提升性能的几种方式有
使用内联首屏加载css，即时内联css可以提升浏览器的渲染时间，然后就是资源压缩，使用webpack打包工具压缩css的体积，然后就是异步加载css，css他本身是有阻塞，解决不必要的阻塞，就得异步加载css，异步加载css的方式就是使用js把link标签追加到head尾部，还有一种方法再ref属性中添加alertnate样式表，合理使用选择器，就是避免嵌套复杂选择器，避免使用属性选择器和通配符选择器，然后就是减少重绘啊等等。
7.对前端工程师这个职位是怎么样理解的？它的前景会怎么样
前端工程师是最贴近用户的，比后端，运维，数据库，安全的程序员都接近
所以前端程序员可以更好的提升用户的体验，给用户一个满意的答卷
8.说说JavaScript中的数据类型？存储上的差别？
首先数据类型分为基本数据类型，引用数据类型
基本数据类型包括string,number,boolean,null,undefind,symbol,bigint
引用数据类型包括：数组，对象，方法等等
基本数据存储在栈中，引用数据类型存储再堆中
9.typeof 与 instanceof 区别
Typeof和instanceof都是用来判断类型的
Typeof判断的时候返回的数据的类型，而instanceof判断返回的是true或flase，它是通过对象的原型链来进行判断的
Typeof时候判断基本数据类型，判断引用类型的时候不太准确
Instanceof主要判断引用类型，判断基本类型不准确
如果相使用一个统一的判断方式，推荐使用object.protopy.tostring来进行判断。
10.说说你对闭包的理解？闭包使用场景
就是内部函数可以访问到外部函数的作用域
可以创建私有变量和私有作用域
可以延长变量的生命周期
其作用可以创建私有方法，私有属性，缺点就是变量会常驻内存，使用不当会造成内存泄漏
使用场景就是，防抖和节流，vue中的data都是使用的闭包。
11.bind、call、apply 区别？如何实现一个bind?
首先apply，call，和bind都是来改变一个函数执行上下文，改变函数的this指向
Apply第一个参数是this的指向，第二个参数是一个数组，他会自己执行，如果第一个参数为null和this会执行window
Call基本和apply一样
而bind第一个参数是this指向，第二个参数是参数列表，不会立即指向，但会返回一个永久改变this指向的函数
实现bind就是首先判断一个对象是否是函数，然后获取参数，最后根据调用方式，传入不同的绑定值
12.说说你对事件循环的理解
首先说一下js是单线程的，所以会有同步任务和异步任务，异步任务同时也会包括微任务和宏任务
然后事件循环就是所有任务进入执行栈中，先去执行同步的任务，一步步的进入callstak中执行，遇到异步任务的时候会先记录下来，等到时机到了才执行，时机一到，就是进入callback队列中执行，接下来调用eventlop轮询机制，轮询的去查询调用栈是否有任务，然后继续执行，像永动机一样。
13.DOM常见的操作有哪些
创建节点：createElemnt，createTextNode,createAttribute
查询节点：querySeletorAll,querySeletor,getElemntById,getElemntByclassName,getElemntByTagName,getElemntBysName
添加节点：innerHtml,appendChilren,innerBefore
更新节点：innerHtml,innerText
删除节点：removeChild
14.说说你对BOM的理解，常见的BOM对象你了解哪些？
BOM就是浏览器对象模型，它把浏览器视为对象模型，有一个顶级对象是window
主要的BOM对象有location，window，navgtor，screen，history
Location中有几个常用的属性，pathname，hash，port，herf等等
Navgtor主要是获取浏览器的属性，还scren获取客户端显示器的信息
History用来浏览器的前进后退，页面的跳转，跳转使用go，前进forword，后退back
15.Javascript本地存储的方式有哪些？区别及应用场景？
分别有cookie,sessionStoreage,localStoreage
cookie是存在浏览器中的，存储大小只有4k，而sessionStore和localStore有5M大小，一般用于用户登录的时候存储的标识，下次登录可以直接登录那种，可以设置过期时间，但是如果不设置https加密的话，不安全，别人可以窃取你的cookie信息模仿你登录。
SeesionStoreage也是存储到浏览器的，它的生命周期的话，会话会在浏览器关闭的情况下清楚信息，一般存储敏感账号一次性登录，使用方式获取使用getitem，修改使用setitem
Localstoreage可以长时间永久的存储在浏览器中，不手动删除的话会永久存在，一般存储长期的令牌等等。使用方式，获取getitem，修改setitem，清楚removeitem，一次性删除所有的使用clear。
16.什么是防抖和节流？有什么区别？如何实现？
防抖就是在一定的时间内执行最后一次操作，节流的话就是在一定的时间内多次请求，变为一次请求，实现方式都使用定时器，闭包进行实现。
17.如何通过JS判断一个数组
IsArray,instanceof,object.protopy.toString.call进行判断。
18.说说你对作用域链的理解
首先说说作用域，作用域分为全局作用域，和局部作用域，块级作用域
全局作用域的话就是创建scrit的时候是全局的，在创建的时候会生成一个上下文对象GO
局部作用域的话页是函数作用域，在调用函数的时候会创建一个上下文对象AO
块级作用域体现在let和const变量的作用域
作用域链的话，就是访问一个对象的变量的时候，会现在当前作用域下查找，找不到在去上一级作用域找，找到返回直到全局作用域下结束。
19.JavaScript原型，原型链 ? 有什么特点？
原型的话，每个构造函数中都有prototype也就是原型，当你构造函数new一个实例的话，这个实例有一个__proto__属性，这是属性指向的就是对象的原型。
原型链的话就是当你视图访问一个对象的属性的时候，先在自身查找，找不到才去对象的原型上去查找，以此类推，直到找到和属性名一致的话就返回，否则就会返回null，也就是原型链的顶端。
20.请解释什么是事件代理
事件代理就是事件委托，就是把子元素的事件委托个父元素，去监听事件，去触发事件，相当于事件冒泡的机制
比如有一个ul里面有100个li，给每个li一个点击事件会特别的影响性能，所以使用事件代理的形式，事件冒泡有里向外触发，委托给父元素直接去触发，节省性能。
21.谈谈This对象的理解
首先通俗来说就是谁调用的this就执行谁，这个不太全面
下面说说this的绑定规则，它主要有4中绑定规则，默认绑定，隐士绑定，new绑定，显示绑定
默认绑定就是全局有一个变量，在一个函数里去调用这个变量，就可以直接获取这个变量，应该在这个情况下this指向全 局window
隐士绑定的话就是可以直接访问对象的方法
New绑定就是this指向new出来的那个对象
显示绑定就分为apply，call，bind绑定。他们可以改变this的指向
还有一种特殊情况，箭头函数是没有this指向，它指向的是离它最近的那个作用域中的对象
22.new操作符具体干了什么
New操作符主要就是在构造函数中new一个实例，new出来的实例可以访问到构造函数中的属性和方法
底层实现就是首先创建一个空对象，然后空对象的原型链和构造函数的原型链进行连接
之后构造函数的this绑定到新建的对象上，最后判断构造函数返回的类型，如果是原始值就忽略，否则是对象的话就返回这个对象。
23.null，undefined 的区别
Null的话就是这个值定义了，但是没有赋值，是一个空值
Un
————————————————
版权声明：本文为CSDN博主「程序员Linda」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45231437/article/details/124734500