cssz-index在什么情况下失效z-index只作用于定位元素，子元素的z-index会被其值覆盖parent（准确的说应该是使用了z-index之后，父元素和子元素在不同的堆叠上下文中，他们的z-index应该和他们的兄弟元素比较。）。box-sizing的取值有哪些？有内容框和边框框。前者为默认值，表示设置的宽度只包括内容的宽度，不包括border和padding，后者包括两者。这个问题比较多，有的是html+css代码计算大小，有的是口头表达。display:none和visibility:hidden和opacity:0有什么区别？继承visibility:hiddenopacity:0不能监听事件；子元素可以通过设置visibility来取消隐藏：visible表示监听事件；子元素不能通过opacity取消隐藏：1通过opacity监听事件的特性实现点击劫持；opacity的继承其实和z-index是一样的。当opacity属性不为1时，元素将被放置在一个新的堆叠上下文中。flex相关的属性值及其含义。flex是布局的大方向，问的频率挺高的。要么垂直居中的时候画出来，要么要求实现一个简单的布局再画出来。不清楚的可以看一哈阮一峰的教程（传送门）css优化方法这个优化方法没完没了，我现阶段只表达一些自己的理解。1.提高加载速度：比如最基本的压缩文件大小，可以使用内联css来提前浏览器的起始页渲染时间。文件大小需要控制在14.6kb（因为初始拥塞窗口的限制），还有chrome自带的coverage标签，可以分析js和css文件的使用率，然后我们就可以做进一步延迟加载或删除无用代码。2.提高选择器的性能，例如不要嵌套过多的复杂层次，选择器从右向左匹配。3.提高渲染速度。我对此了解不多。只是最近看canvas的时候，mdn提到csstransforms使用GPU进行canvas优化，所以速度比较快。找到一篇文章，介绍了使用与否的对比演示，也解释了为什么会更快，感觉不错，文章传送门。JSmap和filter的区别map的回调中返回的是什么，filter的回调中返回的布尔值决定了当前item是否存储到新的数组中。我其实没看懂自己想问什么，因为笔试遇到这道题的时候，其他的题都蛮有意思的，让我有点迷糊。//2020.11.16更新event.target和evevt.currentTarget的区别面试的时候被问到这个。我当时不知道。我想问一下事件委托。事件委托就是使用事件冒泡的方式，通过只指定一个事件处理器来管理某一类型的所有事件。优点：减少事件注册，节省内存；简化dom节点更新时对应事件的更新，比如新增加的子节点不需要绑定事件，需要删除的时候不需要解除绑定事件。需要注意的是，事件委托是基于冒泡的，不支持非冒泡事件。//2020.11.16更新sleep后，实现一个sleepalonefunction很简单遇到一道很有趣的笔试题，大概是这样的：//实现Person('Jack').eat('lunch').sleep(2).eat('dinner').firstSleep(5)//输出//Waitingfor5sfirstSleep5sHi，我叫JackEatlunch//Waitingfor2ssleep2sEatdinner我最初的想法是利用setTimeout和Promise的宏观/微观特性，即firstSleep使用Promise，其他都使用setTimeout。在这个思路下，sleep和eat大概是这样的(()=>{log('balabala')},this.sleepTime)returnthis}那么firstSleep根本写不出来，前面的this.sleepTime往往没有空位。之所以会产生这样的错误想法，是因为对上面提到的sleep函数或者浏览器的事件循环没有很好的理解。这里需要的是一个双向队列（好像是这样叫的），也??就是在普通的链式调用中push入队列，遇到firstSleep时unshift，在Person的构造函数中定义一个setTimeout开始执行this中的双向队列函数（如next()用于在级联多个异步任务时连接各个任务）。代码：constlog=console.logconstdeque=[]functionnext(){constfn=deque.shift()fn&&fn()}functionPerson(name){deque.push(()=>{log(`嗨，我叫${name}`)next()})setTimeout(()=>{next()},0)returnthis}Person.prototype={eat(food){deque.push(()=>{log(`Eat${food}`)next()})returnthis},sleep(time){deque.push(()=>{setTimeout(()=>{log(`sleep${time}s`)next()},time*1000)})returnthis},sleepFirst(time){deque.unshift(()=>{setTimeout(()=>{log(`sleepFirst${time}s`)next()},time*1000)})returnthis}}newPerson('Jack').eat('lunch').sleep(2).eat('dinner').sleepFirst(2)再次观察标题没有new关键字，直接写个函数包function_Person(name){returnnewPerson(name)}currying//添加函数add(1,2,3)实现三个数相加//6add(1,2)(3)//6add(1)(2)(3)//6实现一个函数柯里化并不难，主要是判断当前参数的个数和o的个数f目标函数的参数，不够则返回函数，够则返回结果，两种实现方式如下：constsum3=(x,y,z)=>x+y+zconstadd=currying(sum3)//method1functioncurrying1(fn){/**@param{Number}ntarget函数需要剩余参数的数量*@param{Array}argsArrayofexistingarguments*/functionnext(n,args){return(...xs)=>{if(n<=xs.length){returnfn(...args,...xs)}returnnext(n-xs.length,[...args,...xs])}}returnnext(fn.length,[])}//方法2functioncurrying2(fn){return(...a)=>{if(a.length>=fn.length){returnfn(...a)}returncurrying2(fn.bind(null,...a))}}思路是一样的，方法1中合并参数的[...args,...xs]操作其实就是bind函数最后一个返回合并参数的柯里化部分。但是如果还是这个add的话，我想实现的问题是不知道要加多少个参数。与柯里化相同的是将收集到的参数保存在函数内部。不同的是柯里化可以通过判断参数个数来确定返回值。新需求需要重写return函数的toString，输出上次执行的返回值。当函数要表示为文本值时，JavaScript会自动调用toString方法，例如当函数与字符串连接时。代码：functionadd(){varargs=Array.prototype.slice.call(arguments)varadder=function(){args。推（...参数）返回加法器}加法器。toString=function(){返回参数。reduce((a,b)=>a+b)}returnadder}add(1,2,3)(4)(5)//f15add(1,2,3)(4)(5)+0//15好像搞定了，但是如果不进行类型转换，就会有一个f，这让我很困惑，找了很多资料，都没有结果，有知道的还请赐教.vue父子组件钩子顺序parentbeforeCreateparentcreatedparentbeforeMountchildbeforeCreatechildcreatedchildbeforeMountchildmountedparentmounted子组件在父组件之前挂载。数据变化后dom会立即更新吗？这个问题也很有意思。在vue双向绑定的原理之后问的。看看你能记住多少面试题。标题是这样的//...data(){return{title:'abc'}}methods:{change:function(){this.title='1'this.title='2'this.title='3'//调用change之后，dom更新了几次}}//...猜到肯定是更新了一次。但是想到别的地方说错了原因。具体原因是Vue使用了自己的nextTick来异步更新。如果后面这段不熟悉，建议搭配Vue(2.6.10)源码一起吃。调用change后，defineProperty中的set依次同步执行3次，即Watcher的update方法依次同步3次。update的核心是queueWatcher，exportfunctionqueueWatcher(watcher:Watcher){constid=watcher.idif(has[id]==null){has[id]=trueif(!flushing){queue.push(watcher)}else{//...}//将冲洗排队if(!waiting){waiting=true//...nextTick(flushSchedulerQueue)}}}代码中的has用于过滤同一个watcher。后面的虽然被无情的丢弃了，但是只要有watcher的id，异步更新就使用同步修改的数据。vue-routerhash和history这两种模式最直观的区别，hash模式带'#'history模式使用了h5新的pushState和replaceState，用于修改浏览器的历史栈，而修改询问时不会立即发送。Othersourcemaps简单的说，sourcemap是一个信息文件，存放的是源代码和编译后代码之间的映射关系。比如在开发环境使用webpack调试代码，浏览器并没有下载你写的源码，以及webpack压缩、混淆、合并等操作后的代码，那为什么你的调试器在你写的地方仍然生效它？就是sourcemap的作用。如果你能看到这篇文章，你很有可能正在准备面试。如果你是新人，面试的不多，那我可以告诉你，不管是大厂还是小作坊，面试过程中很大一部分是介绍简历。写技巧和项目，与其一味被面试题淹没，还不如准备好简历，搞定那些分题。如果你是一个身经百战的秃头码农，那么希望本文能对你有所帮助。
