vue面试题
Model 层: 对应数据层的域模型，它主要做域模型的同步 。在层间关系⾥，它主要⽤于抽象出 ViewModel 中视图的 Model。 View 层: 作为视图模板存在 ，在 MVVM ⾥，整个 View 是⼀个动态模板。 除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态 。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声 明。 ViewModel 层: 把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处 理 View 层的具体业务逻辑。 ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；⽽当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。⼀旦值变 化，View 层绑定的 ViewModel 中的数据也会得到⾃动更新。 优点: Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化 的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑 缺点: Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程 官⽅实例的异步请求是在mounted⽣命周期中调⽤的，⽽实际上也可以在created⽣命周期中调⽤。 https://juejin.im/post/5d267dcdf265da1b957081a3 computed用于计算属性，只有它依赖的值改变才会触发，且这个值有缓存 watch用于监听一个属性的变化，属性变化就会触发 computed: ⼩结: 简单版：利⽤ Object.defineProperty 劫持对象的访问器,在属性值发⽣变化时我们可以获取变化,然后根据变化进⾏后续响应,在 vue3.0中通过Proxy代理对象进⾏类似的操作。 补充 vue的双向绑定是通过数据劫持和发布者-订阅者模式实现的，数据劫持又是通过 Object.defineProperty()实现的 Proxy的优势如下: Proxy可以直接监听对象⽽⾮属性 Proxy可以直接监听数组的变化 Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的 Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修 改Proxy作为新标准将受到浏览器⼚商重点持续的性能优化，也就是传说中的新标准的性能红利 Object.defineProperty的优势如下: 兼容性好,⽀持IE9 v-if 用于条件渲染 v-show 用于条件渲染，两者的区别请参考下一个问题 v-for 用于列表渲染 v-on 监听事件 v-bind 动态绑定 v-html 渲染html元素 v-model 数据双向绑定 v-if 是惰性的，只有条件为真时才会切换，为假时什么也不做。确保切换过程中的事件监听器和子组件适当的被销毁和重建，适用于运行条件很少改变的场景。v-show 不管条件是否为真，总是会被渲染，适用于频繁切换的场景 v-for优先级高于v-if，放于同级可能会重复渲染两次v-if，建议把v-for放于v-if所在的外层元素 原理:eventloop事件循环 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。不指定key时，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试 就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 1.beforeCreate 初始化界面前 2.created 初始化界面后，拿到data，props，methods、computed和watch 3.beforeMount 渲染dom前 4.mounted 渲染dom后，拿到$el 5.beforeUpdate 更新前 6.updated 更新后，拿到更新后的dom 7.beforeDestroy 卸载组件前 8.destroyed 卸载组件后 9.activated 被 keep-alive 缓存的组件激活时调用 10.deactivated 被 keep-alive 缓存的组件停用时调用 虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对树进行逐层搜素遍历，因此时间复杂度是O(n)。虚拟dom可以减少页面的回流和重绘，提升性能
vue2和vue3区别面试题
1、vue2相较vue3代码可读性比较差。vue2中选项API格式的代码的可读性较差，当需要实现的某一个功能涉及到多个属性的时候，就会出现在props中接收参数在data中定义变量在watch中监听变化在computed中定义需要使用到的计算属性在methods中定义事件响应方法对相同数据操作的代码会被分隔到各个属性内，不利于阅读代码。而vue3的组合式API对这一缺点进行了优化，使用组合式API能够将我们想要关联的代码放到一个组合里，增加了代码的可读性和可维护性。2、vue2使用的API中使我们的代码大量的使用了this，不利于代码逻辑的复用。而vue3使用的组合式API在涉及到跨组件之间提取，复用逻辑时，会非常的灵活。且Vue3中的composition API对类型推导很友好，对于TS的兼容性更高。3、Vue2需要对每个对象的每个属性进行遍历，当对象的属性还是对象时，需要递归监听，影响性能。对于已创建的实例不允许动态添加根级别的响应式属性，不具备监听数组的能力。而vue3可以监听原生数组并监听对象属性的动态添加和删除。
前端面试官常问的问题有哪些？
1、重绘和重排的关系：重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。2、重绘的概念：重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。3、触发重排的情况：页面渲染初始化时；浏览器窗口改变尺寸；元素尺寸改变时；元素位置改变时；元素内容改变时；添加或删除可见的DOM元素时。4、redux的缺点：（1）一个组件所需要的数据，必须_父组件传过来，而不能像flux中直接从store取。（2）当一个组件相关数据更新_，即使父组件不需要用到这个组件，父组件还是会重新render,可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。5、对MVC和MVVM的理解：（1）mvc：View传送指令到Controller Controller完成业务逻辑后，要求Model改变状态Model将新的数据发送到View，用户得到反馈所有通信都是单向的。Angular它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。组成部分Model、View、ViewModel（2）View：UI界面ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；Model：数据访问层。
web前端 面试必问的几个问题?有那些?
web前端 面试必问的几个问题?有那些? 根据面试官的不同，面试的内容页不一样的。一般的话就是+css布局占一部分，例如各浏览器的相容性，然后就是js的ajax，闭包，冒泡什么的，js会占很大一部分，也有一部分面试官会抛开这些，直接问公司需要的内容，这样的话就是考验你的实际操作了，这类的面试官我很喜欢，就是直接问布局，资料填充之类的，能学到很多东西，建议面试时偷偷用手机录音，回来之后听一听，研究一下自己不会的问题，因为面试完之后，你可能就会忘了面试时都问过什么了 web前端 面试 会问哪些问题 对公司这个行业有什么样的看法，未来的职业规划，自己做好该职位工作的优势，个人缺点是什么，还有就是一些技术性问题了。web前端 面试 会问哪些问题 web前端开发的几个问题 1.巢状表单一般不会有什么问题，主要是看业务需求，不过尽量还是不要使用巢状。 2.name只是标签的属性，一般的网页标签元素都可以使用这个属性，并非只能表单域里的标签才能使用。比如 div、span、input等等都可以有name属性。 3.JQuery已经成为JS指令码开发的标配了，本身的体积也比较小，最主要的是简化了很多JS操作，而且我们基本不用考虑JS的浏览器相容问题了。至于效能和原生的JS没什么区别，放心使用吧。 面试Web前端需要注意什么？会面试哪些问题？ 将这些问题作为参考。 希望你的面试官有点经验，不会用以下这样的问题开场。以防万一，还是准备一些答案。 1.为什么选择程式设计师这个职业生涯? 2.截至目前，你所从事的专案中最喜欢的是哪个? 3.描述一下你梦想中的研发专案。 另外一些面试官会问一些通用的技术问题，来测试你的技术能力。有可能部分人不知道这些问题是什么意思，而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同，你的答案也会有所不同。这些问题简单易答，因此把这些问题记下来。 1.描述一下建立一个新网页的过程 2.怎样减少页面载入时间? 3.标准和标准体(standards and standards bodies)为什么重要? 4.你使用怎样一个过程来组织程式码? 5.你喜欢用什么工具来测试程式码效能?[page] 既然你从事前端工作，理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题，如果不能回答出来，将对你很不利。 1.CSS 中的 resetting 和 normalizing 之间的区别有哪些? 2.什么是floats，它是如何工作的? 3.absolute、relative、fixed 和 static 定位的区别是什么? 4.解释visiblity hidden和display none之间的区别 5.你是如何修复特定浏览器预设样式的问题? 6.你是否用过网格系统?目的是? 7.如果计算CSS权重? 8.解释如何优化CSS选择器。 9.为什么需要使用预编译器? 10.你是如何测试网站的跨浏览器相容性? 现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚，就把下面这些问题牢记在心。 1.前端开发的框架是什么? 2.响应式web app和原生应用程式的区别是什么? 3.原生app相对web app的优点是什么? 4.客户端和伺服器端开发的区别是什么? 5.什么是SASS和LESS?它们是如何工作的? 面试官会更多关注你是如何表达对这些问题的解释。他们会追问支援你的答案的工作案例。前面的问题你可能可以通过记忆而过关，你可能还会遇到这些问题的扩充套件，但这些答案的深度，将让你与众不同。通过你参与过的实际专案，来展示你的思考过程。 web前端jquery面试题有哪些 常见的几个如下：他们的答案可以百度搜。 1. jQuery 库中的 $() 是什么？ 2. 网页上有 5 个 元素，如何使用 jQuery来选择它们？ 3. jQuery 里的 ID 选择器和 class 选择器有何不同？ 4. 如何在点选一个按钮时使用 jQuery 隐藏一个图片？ 5. $(document).ready() 是个什么函式？为什么要用它？ 6. JavaScript window.onload 事件和 jQuery ready 函式有何不同？ 7. 如何找到所有 HTML select 标签的选中项？ 8. jQuery 里的 each() 是什么函式？是如何使用它的？ web前端面试必考的基础面试题有哪些？ 切图，css 盒模型，js基础语法，ajax, 面向物件，模组化，效能优化，自动化这想相对的考核会多一些。大公司重基础，小公司重能力，所以与时间的话多去刷一刷基础的题目吧。 祝你顺利通过面试！ web前端面试经常问到的面试题有哪些 web前端面试经常问到的面试题实在太多了，建议你去网上搜索一下，或者直接下载一些面试题的集锦，然后看看就好了。 1、 列举web效能优化？ 1) 减少请求次数。合并档案、利用css sprite把零散的图片整合到一张图上。 2) 减少DNS查询。 3) 减少从定向。 4) 响应时间。使用AJAX进行快取，减少请求。 5) 延迟载入元件. 6) 预载入元件。 7) 减少节点的数量。 8) 切分元件到多个域。 9) 最小化iframe。 10) 杜绝404错误。 2、 介绍一下XMLHttpRequest物件的常用方式和属性? open(“method”,”URL”) 建立对伺服器的呼叫，第一个引数是HTTP请求方式 可以为GET，POST或任何伺服器所支援的您想呼叫的方式。 第二个引数是请求页面的URL。 send()方法，传送具体请求 abort()方法，停止当前请求 readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在载入 2=以载入，3=互动中，4=完成 responseText 属性 伺服器的响应，表示为一个串 reponseXML 属性 伺服器的响应，表示为XML status 伺服器的HTTP状态码，200对应ok 400对应not found web前端问题 IE浏览器类似银行网银安全密码输入控制元件，使用键盘钩子防止被键盘记录器监听密码，使用des对密码加密传输，输入框禁止选择复制 或者 只要是ActiveX，必须要进行IE的安全设定。 网银一般都是一个安装程式，安装的时候都给你设定好了。 ActiveX在页面里面和普通的DOM物件一样，只要ActiveX建立成功，就可以用js直接访问该元件的方和和属性。
经典的 Web 前端或者 JavaScript 面试笔试题有哪些？
一、不定项选择题（每题3分，共30分）\x0d\x0a1.声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（D）\x0d\x0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];\x0d\x0aB.varobj={name:”zhangsan”,show:”alert(this.name)”};\x0d\x0aC.varobj={name:”zhangsan”,show:function(){alert(name);}};\x0d\x0aD.varobj={name:”zhangsan”,show:function(){alert(this.name);}};\x0d\x0a2.以下关于Array数组对象的说法不正确的是（CD）\x0d\x0aA.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数\x0d\x0aB.reverse用于对数组数据的倒序排列\x0d\x0aC.向数组的最后位置加一个新元素，可以用pop方法\x0d\x0aD.unshift方法用于向数组删除第一个元素\x0d\x0a3.要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（A）\x0d\x0aA.window.status=”已经选中该文本框”\x0d\x0aB.document.status=”已经选中该文本框”\x0d\x0aC.window.screen=”已经选中该文本框”\x0d\x0aD.document.screen=”已经选中该文本框”\x0d\x0a4.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（AD）\x0d\x0aA.\x0d\x0aB.\x0d\x0aC.\x0d\x0aD.\x0d\x0a\x0d\x0a\x0d\x0a5.使用JavaScript向网页中输出hello，以下代码中可行的是（BD）\x0d\x0aA.\x0d\x0adocument.write(hello);\x0d\x0a\x0d\x0aB.\x0d\x0adocument.write(“hello”);\x0d\x0a\x0d\x0aC.\x0d\x0ahello\x0d\x0a\x0d\x0aD.\x0d\x0a\x0d\x0adocument.write(“hello”);\x0d\x0a\x0d\x0a\x0d\x0a6.分析下面的代码：\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0afunctionwriteIt(value){document.myfm.first_text.value=value;}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a以下说法中正确的是（CD）\x0d\x0aA.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变\x0d\x0aB.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容\x0d\x0aC.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容\x0d\x0aD.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变\x0d\x0a7.下面的JavaScript语句中，（D）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空\x0d\x0aA.for(vari=0;i\x0d\x0a\x0d\x0a\x0d\x0afunctioncloseWin(){\x0d\x0a//在此处添加代码\x0d\x0aif(confirm(“确定要退出吗？”)){\x0d\x0awindow.close();\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）\x0d\x0avarstr=“这里是div里面的段落”;\x0d\x0a//\x0d\x0a\x0d\x0avarreg=//gi;\x0d\x0avarstr=“这里是div里面的段落”;\x0d\x0aalert(str.replace(reg,”"));\x0d\x0a\x0d\x0a3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0afunctionfoo(){\x0d\x0a//在此处添加代码\x0d\x0avarrdo=document.form1.radioGroup;\x0d\x0afor(vari=0;i\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示（15分）\x0d\x0a\x0d\x0a\x0d\x0afunctionshowImg(oSel){\x0d\x0a//在此处添加代码\x0d\x0avarstr=oSel.value;\x0d\x0adocument.getElementById(“pic”).src=str+”.jpg”;\x0d\x0a}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a城市生活\x0d\x0a都市早报\x0d\x0a青山绿水\x0d\x0a
Web前端面试的常见面试题汇总
今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。1.渐进增强与优雅降级渐进增强并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。这两种思想的区别在于：1.渐进增强是向上兼容，优雅降级是向下兼容;2.渐进增强是从简单到复杂，优雅降级是从复杂到简单;3.渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)2.DOCTYPE作用DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。HTML5的文档类型声明：HTML4.01Strict(HTML4.01严格模式)的DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明："http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">标准模式与怪异模式怪异模式(QuirksMode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的DOCTYPE都会触发怪异模式。浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。怪异模式与标准模式的主要区别：1.怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:border-box将标准盒模型转化成怪异模式下的盒模型。2.怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。3.怪异模式下，在表格中的字体样式(如font-size)不会继承。4.怪异模式下颜色值必须使用十六进制标记法。3.语义化HTML5中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。优点·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。·方便其他设备解析，如盲人阅读器根据语义渲染网页。·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。语义化标签·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;·article文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框(搜索框作为文档的主要内容);·aside表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。4.超链接伪类:link、:visited、:active和:hover的声明顺序是怎样的?:link表示未访问的链接状态;:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。推荐顺序是LVHA，即:link:visited:hover:active。理由如下：·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link之前声明，那么(:hover)就会被覆盖;·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited之前声明，那么(:hover)就会被覆盖;·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active样式，因此:active在:hover之后声明;·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和:visited两者的顺序无所谓，互不影响。5.CSS常见的长度单位CSS中除了px长度单位之外，还有下面几个长度单位：·pc六分之一英寸，1pc=12pt=1/6*1in=16px;·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;·in一英寸，1in=2.54cm=96px;·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈0.5em;·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;·rem当用在根元素()的font-size上面时，它代表了它的初始值;·ch代表元素所用字体font中“0”这一字形的宽度;·vh1vh相当于视口高度的1%，100vh就是视口的高度;·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;·vmax视口高度vw和宽度vh两者中的最小值·vmin视口高度vw和宽度vh两种中的最大值;·%相对于父级元素的大小来确定;参考：CSS[1]CSSpercentage[2]6.事件对象冒泡与捕获事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;而冒泡与捕获恰恰相反：·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。addEventListener函数的第三个参数是个布尔值。含义：·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;·当布尔值是true时，表示向下捕获触发事件;不能冒泡的事件有些事件是不会冒泡的。比如：·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;·focus元素获取焦点时触发;·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用e.target属性可以获取到当前触发事件的子元素。事件对象中的方法·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;·preventDefault()阻止默认事件的发生;·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。paragraphdocument.querySelector("div").addEventListener("click",(event)=>{alert("我是div元素,我是p元素的上层元素");//p元素的click事件没有向上冒泡，该函数不会被执行},false);constp=document.querySelector('p')p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第一个监听函数");},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第二个监听函数");event.stopImmediatePropagation();//执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上绑定的其他click事件的事件监听函数的执行.},false);p.addEventListener("click",(event)=>{alert("我是p元素上被绑定的第三个监听函数");//该监听函数排在上个函数后面，该函数不会被执行},false);“在IE浏览器中，使用e.cancelBubble=true也可以取消事件冒泡;使用e.returnValue=false也能阻止默认事件的发生。target与currentTargettarget属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target指向的可能不是定义时的事件目标。例如：div.addEventListener('click',(e)=>{console.log(e.target,e.currentTarget);},false);e.target可能指向div元素，也可能指向它的子元素。而e.currentTarget总是指向div元素。以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。参考资料[1]CSSlength:#/zh-CN/docs/Web/CSS/length[2]CSSpercentage:#/zh-CN/docs/Web/CSS/percentage