本文主要是关于javascript和css的基础面试问题，适合面试前和复习。 基础知识是前台必备的。如果在基础知识上打滚，在webpack、git、node学的再好也无济于事。因为对方不会再给你表现的机会，所以不要因为基础知识而错过自己喜欢的公司。 前台的基础知识是杂而多的，知道了也不一定ok，但是有些确实需要记住。 当然我们是牛X的前台工程师，没必要天天背英语单词之类的知识点。我们只需要在日常工作中多注意总结，在面试前台把问题刷下来就可以了。 什么？你问我好的面试作文，这不就摆在你面前吗？javascript第一章，数据类型JavaScript有几种类型:undefined、null、boolean、number、string、symbol(ES6的新数据类型)引用数据类型:object、array、function(统称为object)类型检测type of对于基本数据类型，正确的类型可以显示除null以外的类型，对于object，除function以外的类型， 会显示objec type of 5//' number ' type of ' 5 '/' string ' type of undefined//' undefined ' type of false//' boolean ' type of symbol()/' symbol ' console . log(type of null)//object console . log(type of NaN)//numbertype of[]/' object ' type of { }/' object ' type of console . log//Function ' instance of P1 = new person()person的P1实例//true object . prototype . tostring . call()可以通过原型链检测所有数据类型，即 var obj = { } var arr =[]console . log(Object . prototype . tostring . call(obj))//[Object Object]console . log(Object . prototype . tostring . call(arr))//[Object Array]浅层复制Object.assign() //es6的方法会合并对象生成一个新的对象。 如果对象的属性是common，那么类型改变后新对象不会改变，如果引用类型改变，新对象也会改变，所以Object.assign实际上是一个浅拷贝。 var obj={aa:1，b:{ item:' 45 ' } }；var newObj=Object.assign({}，obj)；obj . aa = 2；obj . b . item = ' kk '；console . log(new obj . aa)；//1 console . log(new obj . b . item)；//kk深度复制json.parse(json.stringify(obj))先用JSON.stringify(obj)把一个对象转换成JSON字符串，再用json.parse()转回JSON对象实现深度复制，这也是常用的方法。 用js实现深度复制，其实深度复制可以拆分成两步，浅复制+递归。浅层拷贝时，判断属性值是否为对象，如果是对象，则进行递归运算，两者结合实现深层拷贝。 函数cloneDeep(source) { if(！isObject(source))返回源；//非对象返回自身var target = Array.isArray(source)？[] : {};for(source中的var key){ if(source . hasownproperty(I)){ if(is object(source[key]){ target[key]= cloneDeep(source[key])；//此处注意} else { target[key]= source[key]；} } }返回目标；} function is object(obj){ obj的返回类型= = = ' object ' & amp& ampobj！= null}二。JavaScript中的作用域变量公告提升，函数公告(function aa(){})和变量公告(var)经常被JavaScript引擎隐式提升到当前作用域的顶部。 函数公告的优先级高于变量。如果变量名与函数名相同且未赋值，函数公告将覆盖变量公告的公告语句中的赋值部分，不会被提升。只有变量名会被提升。由于函数的嵌套，作用域链形成了作用域的层次关系。 当执行该函数时，搜索从当前范围开始。如果找不到该变量，将向上搜索，直到到达全局函数。这是作用域链。 在JavaScript中，作用域是function(){}内的区域，称为函数作用域。 全局函数不能查看局部函数的内部细节，但是局部函数可以查看上层函数细节，直到全局细节封闭的原理是作用域链。函数F内部有一个函数G，可以访问函数F中的变量，所以函数G是闭包。 function(){ let a = 1 window . g = function(){ console . log(a)} } f()g()//1 III。原型和继承js创建对象的几种方法。对象的文字量的平方var obj = { }；New a构造函数Pel(){ } var p = new Pel()；p.name= "胡"；p.age = " 25P.address=function(){ }new A内置对var obj = new Object()；Object.create()创建对象var test = object . create({ x:1 })；给你留个思考题，new Object()，Object.create()，{}。这三种创建对象的方式有什么区别？ JS如何实现一个类构造函数方法缺点:使用了this和prototype，所以编译复杂，可读性差。函数p(姓名，年龄){ this.name = namethis.age=年龄；} P . prototype . sal = function(){ } var pel = new P(" jj "，1)；Pel.sell()ES6语法sugar class class point { constructor(x，y){ this . x = x；this.y = y} toString() { return '(' + this.x +'，'+this . y+')'；} } var point = new Point(2，3)；原型链用一句话分析什么是原型链。遍历实列的属性时，先遍历实列对象上的属性，然后遍历其原型对象，直到对象的任何一个类(函数)都有原型对象，并且原型对象至少有两个属性(constructor，proto) 构造函数指向函数本身，proto指向父类的原型对象。 函数上有一个prototype属性，指向原型对象，通过它可以访问原型对象。函数的实列可以直接访问prototype对象(因为实列中有一个指向构造函数的prototype对象)。function Dog(){ }//class var obj = new Dog()；//实际列obj.name= '沪江'；Dog.prototype.name= "王采"；dog . prototype . eat = function(){ console . log(this . name)；};console . log(dog . prototype . name)；//王采console . log(obj . prototype)；//undefined，prototype只在类上可用，实列上没有obj . eat()；//沪江(先遍历实列对象上的属性，再遍历其原型对象)继承Js如何实现继承？构造函数绑定:使用call或apply方法将父对象的构造函数绑定到子对象functioncat (name，color) {animal.apply (this，arguments)；this.name = namethis.color = color}实例继承:将子对象的原型指向父对象的一个实例cat . prototype = new Animal()；Cat . prototype . constructor = Cat；Copy:如果将父对象的所有属性和方法复制到子对象functionextend (child，parent){ var p = parent . prototype；var c = Child.prototypefor(p中的var I){ c[I]= p[I]；} c . Uber = p；}原型继承:将子对象的原型指向父对象的原型函数extend (child，parent){ var f = function(){ }；f . prototype = parent . prototype；child . prototype = new F()；Child . prototype . constructor = Child；child . Uber = parent . prototype；}ES6语法sugar extends继承类colorpoint extends point { constructor(x，y，color) {super (x，y)；//调用父类this.color = color的构造函数(x，y)；} toString(){ return this . color+' '+super . toString()；//调用父类的tostring ()}}空间有限。有关更多详细信息，请单击“我”获取完整的pdf文件，查看four、new和thisnew运营商具体做了什么？当我们更新一个数据时，新的操作符具体做什么？首先实例对象{ }这个变量引用了这个对象，同时继承了构造函数的原型。其次，将属性和方法添加到由此引用的对象中，并且由此引用新创建的对象。最后，它隐式返回thisnew的模拟实现，function object factory(){ var obj = new object()，并//克隆一个对象构造函数= []。Object.prototype中的shift.call(参数);//获取外部传递的构造函数var F = function(){ }；f .原型= Constructor.prototypeobj = new F()；//指向正确的原型varret = constructor.apply (obj，arguments)；//借用外部传递的构造函数为obj设置ret === 'object '的属性返回类型？ret:obj；//确保构造函数总是返回对象}；对这个对象普通函数的理解这总是指向函数的直接调用者。如果有一个新的关键字，它指向新的实例对象。在事件中，它指向触发此事件的对象。在窗口箭头函数中，函数体中的这个对象是定义时作用域中的对象，而不是使用时作用域中的对象。 function foo(){ console . log(this . a)} var a = 1 foo()//1 const obj = { a:2，O:foo } obj . foo()//2 const c = new foo()//undefined对于直接调用foo，无论foo函数放在哪里，这都必须是窗口。对于obj.foo()，我们只要记住谁调用函数就是这个，那么在这个场景中，foo函数中的这个就是obj对象。对于new的方式，这是永远和new出来的对象绑定在一起的，无论如何都不会改变。这样就完成了以上情况。其实这个在很多代码里应该是没有问题的。我们来看这个函数a(){ return()= >；{ return()= & gt；{ console . log(this)} } a()()//window首先，arrow函数没有这个。arrow函数中的this只依赖于包装arrow函数的第一个普通函数的this。 在这个例子中，由于包装箭头函数的第一个普通函数是A，所以此时这是window。 另外，对箭头函数使用bind等函数是无效的。 动词 （verb的缩写）apply、call、bindcall、apply和bind是Function对象附带的三个方法，所有这些方法都用于在函数体内改变这个对象的方向。 apply、call、bind的第一个参数都是这个想要指向的对象，也就是你想要指定的上下文；Apply、call、bind都可以通过后续参数传递；Bind是返回相应函数的函数，以便以后调用；立即调用Apply和call。 function fruits(){ } fruits . prototype = { color:' red '，say:function(){ console . log(this . color)；}};var apple =新水果()；apple . say()；//红色，此时方法中的this指的是fruits banana = { color:' yellow ' }；apple.say.call(香蕉)；//黄色，此时this的指向已经被call()方法改变，指向banana，this.color为banana.color = ' yellowapple.say.apply(香蕉)；//黄色，同理此时this的点已经被apply()方法改变，指向banana，this.color为banana.color = ' yellowapple.say.apply(空)；//未定义，null在窗口下。此时this指向window，但window下没有clolr属性，所以this.clolr为window.color = undefined传入参数列表应用传入数组var array1 = [12，' foo ']；var array2 = ['Doe '，100]；array . prototype . push . call(array 1，' doe '，100)array . prototype . push . apply(array 1，array2) bind()方法创建一个新函数。当调用这个新函数时，新函数将调用原始函数，第一个参数在创建时传递给bind()方法，第二个和后续参数传递给bind()方法，加上绑定函数运行时本身的参数，按顺序作为原始函数的参数。 var bar = function(){ console . log(this . x)；};var foo = { x:3 }；bar()；//undefinedvar func = bar . bind(foo)；func()；// 3 VI。数据解决方案阵列重复数据删除var arr = ['12 '，' 32 '，' 89 '，' 12 '，' 12 '，' 78 '，' 12 '，' 32 ']；//最简单的数组去重函数unique 1(array){ var n =[]；//一个新的临时数组(var I = 0；我& lt数组.长度；++){//遍历当前数组if(n . index of(array[I])= =-1)n . push(array[I])；}返回n；} arr = unique 1(arr)；Sort/* * * Sort by Sort and id * @ param { object } a * @ param { object } b */function Sort fun(a，b) {return a.sort-b.sort = = 0？a . id-b . id:a . sort-b . sort }；Arr.sort(sortFun) //递归求和函数add (num1，num 2){ var num = num 1+num 2；if(num 2+1 & gt；100){返回编号；} else {return add (num，num2+1)}} var sum = add (1，2)计算数组中每一项的重复次数var arr=['沪江'，'沪江'，'沪江'，'沪江']；var obj = { }；arr . sort()；//Sort for first(var I = 0；我& lt数组长度；){ var con = 0；for(var j = I；j & lt数组长度；j++){ if(arr[I]= = = arr[j]){ con++} } obj[arr[I]]= con；I = I+con；//跳过重复值} console . log(obj)；//{沪江:2，'沪江':3，'沪江':1}七。事件循环宏任务/微任务。除了广义的同步任务和异步任务之外，我们还有一个更精细的任务定义:宏任务:当前调用栈中执行的任务称为宏任务。 包括脚本统一代码、setTimeout、setInterval、setImmediate(暂时浏览器不支持，仅IE10支持，参见< u style = " text-decoration:none；边框-底部:1px虚线灰色；"& gtMDN & lt/u & gt；)、I/O、UI渲染 。微任务:当前宏任务(在本事件周期内)结束，需要在下一个宏任务开始前执行的任务为微任务。 包括:流程。下一个Tick(对节点唯一)、Promise、Object.observe(过时)和MutationObserver。不同类型的任务会进入相应的事件队列，宏任务中的事件会放在回调队列中，由事件触发的线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。 总之，分析什么是会生成堆和栈的事件循环主线程)；当它运行时；自顶向下的Js解析方法，按照执行顺序排列执行栈中的同步任务；当程序调用外部API(如ajax、setTimeout等)时。)，它会挂起这样的异步任务，继续执行执行栈中的任务。 异步任务返回结果后，会在事件队列中按顺序排列。主线首先清除执行堆栈中的同步任务，然后检查事件队列中是否有任务。如果有，对应于第一个事件的回调将被推到执行堆栈中执行。如果在执行过程中遇到异步任务，异步任务将继续被安排在事件队列中。 每次主线程清空执行堆栈时，它都会去事件队列检查是否有任务。如果有，它会一次取出一个任务，推入执行栈执行。这个循环过程叫做“事件循环事件循环”，篇幅有限。更多详情，点击我获取完整版pdf。八。浏览器页面呈现过程。浏览器页面渲染的一般流程:1。浏览器解析html源代码，然后创建一个DOM树。 并行请求css/image/js在DOM树中，每个HTML标签都有对应的节点，每个文本也有对应的文本节点。 DOM树的根节点是documentElement，对应html标签。 2.浏览器解析CSS代码并计算最终的样式数据。 构建CSSOM树 它会直接忽略CSS代码中的非法语法。 解析CSS时，会按照以下顺序定义优先级:浏览器默认设置<设置客户<外链样式 3.DOM树+CSSOM-& gt；渲染树(rendering tree) 渲染树和DOM树类似，但是有区别。 DOM树和html标签一一对应，但是渲染树会忽略不需要渲染的元素，比如head，display:none等等。 而且，一大段文本中的每一行都是渲染树中的一个独立节点。 渲染树中的每个节点存储相应的css属性。 4.一旦创建了渲染树，浏览器就可以根据渲染树直接将页面绘制到屏幕上。 以上四个步骤不是一次性完成的。 如果修改DOM或CSSOM，将重复上述过程。 其实CSS和JavaScript经常会反复修改DOM或者CSSOM。 九。浏览器缓存这个内容通常在面试中被问的更多的是强缓存和协商缓存。更多详细内容，点击我获取完整版pdf查看css。一、盒子模型盒子模型的构成，从里到外内容，填充，边框，边距。在IE盒子模型中，内容+填充+边框的宽度是在标准盒子模型中，宽度是指内容部分的宽度-调整大小。框尺寸:内容框是W3C框模型框尺寸:边框框是IE框模型框尺寸。框大小的默认属性是content-box II，居中水平居中行元素:text-align:居中块级别元素:Margin:0 autoposition:Absolute+Left:50%+Transform:translate x(-50%)Display:flex+justify-content:居中垂直居中设置行高等于高度位置:Absolute+top:50%+Transform:translate y(-50%)Display:flex+align-items:center Display:table+Display:table-cell+vertical-align:middle；//不知道宽度和高度宽度:78px高度:78px位置:绝对；左:50%；top:50%；transform:translate x(-50%)translate y(-50%)；//知道宽度和高度高度:100px宽度:100px位置:绝对；左:50%；top:50%；左边距:-50px；边距-顶部:-50px；显示器:flexjustify-content:居中；align-content:居中；说到底，面试是一个双向选择的过程。我们不应该在面试中把自己当成一个被筛选掉的弱者。 前台知识很多，有时候面试成绩不理想。不要怀疑自己。 我只是在某些方面有一些不足，然后可以弥补。 我们不是在求工作，我们只是在找一个适合我们的公司。 不要妄自菲薄，不要自负，理清自己的态度，一定会找到适合自己的公司！！！啊，前台的知识点很多，需要在学习过程中不断总结。