Web前端面试题 HTML行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （1）行内元素有：a b span img input select strong（强调的语气） （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）常见的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 常见的浏览器内核有哪些？ Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML] Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）] 详细文章：[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; 语意化更好的内容元素，比如 article、footer、header、nav、section; 表单控件，calendar、date、time、email、url、search; 新的技术webworker, websocket, Geolocation; 移除的元素： 纯表现的元素：basefont，big，center，font, s，strike，tt，u; 对可用性产生负面影响的元素：frame，frameset，noframes； * 支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式。 当然也可以直接使用成熟的框架、比如html5shim; <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> * 如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 有期时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage 数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭HTML5的form如何关闭自动完成功能？ 给不想要提示的 form 或某个 input 设置为 autocomplete=off。 CSS介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区 别： IE的content部分把 border 和 padding计算了进去; display有哪些值？说明他们的作用。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承 display 属性的值。position的值relative和absolute定位原点是？ absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。 inherit 规定从父元素继承 position 属性的值。为什么要初始化CSS样式。 - 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 - 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议） 淘宝的样式初始化代码： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }如果需要手动写动画，你认为最小时间间隔是多久，为什么？多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7msrem布局的优缺点CSS选择符有哪些？哪些属性可以继承？1.id选择器（ # myid）2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = "external"]） 9.伪类选择器（a:hover, li:nth-child） 可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;CSS优先级算法如何计算？优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 !important > id > class > tag important 比 内联优先级高 CSS3新增伪类有那些？举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 ::after 在元素之前添加内容,也可以用来做清除浮动。 ::before 在元素之后添加内容 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。为什么要初始化CSS样式。因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）淘宝的样式初始化代码：body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }请解释一下为什么需要清除浮动？清除浮动的方式清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。 1、父级div定义height；2、父级div 也一起浮动；3、常规的使用一个class；.clearfix::before, .clearfix::after { content: " "; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom: 1; } 4、SASS编译的时候，浮动元素的父级div定义伪类:after&::after,&::before{ content: " "; visibility: hidden; display: block; height: 0; clear: both; } 解析原理：1) display:block 使生成的元素以块级元素显示,占满剩余空间;2) height:0 避免生成内容破坏原有布局的高度。3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；5）zoom：1 触发IE hasLayout。通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。什么是外边距合并？外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。w3school介绍网址： http://www.w3school.com.cn/css/css_margin_collapsing.asp移动端的布局用过媒体查询吗？假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来， 而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法 <!-- link元素中的CSS媒体查询 --> 当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。 当媒体查询返回假， <link> 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）。 <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- 样式表中的CSS媒体查询 --> 包含了一个媒体类型和至少一个使用 宽度、高度和颜色等媒体属性来限制样式表范围的表达式。 CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 <style> @media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } } </style> 使用 CSS 预处理器吗？喜欢那个？SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)CSS优化、提高性能的方法有哪些？关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；浏览器是怎样解析CSS选择器的？样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。margin和padding分别适合什么场景使用？margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms什么是CSS 预处理器 / 后处理器？预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的 是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。JavaScript介绍js的基本数据类型。 Undefined、Null、Boolean、Number、String、 ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 介绍js有哪些内置对象？ Object 是 JavaScript 中所有对象的父对象 数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、Arguments、Math、Date、RegExp、Error 参考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html JavaScript原型，原型链 ? 有什么特点？ 每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时， 如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype， 于是就这样一直找下去，也就是我们平时所说的原型链的概念。 关系：instance.constructor.prototype = instance.__proto__ 特点： JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话， 就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//现在可以参考var person = Object.create(oldObject); console.log(person.getInfo());//它拥有了Func的属性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()} Javascript作用链域? 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找， 直至全局函数，这种组织形式就是作用域链。 Javascript如何实现继承？ 1、构造继承 2、原型继承 3、实例继承 4、拷贝继承 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。 function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//继承了Parent，通过原型 var demo = new Child(); alert(demo.age); alert(demo.name);//得到被继承的属性 JavaScript继承的几种实现方式？参考：构造函数的继承，非构造函数的继承；谈谈This对象的理解。 this总是指向函数的直接调用者（而非间接调用者）； 如果有new关键字，this指向new出来的那个对象； 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；["1", "2", "3"].map(parseInt) 答案是多少？ parseInt() 函数能解析一个字符串，并返回一个整数，需要两个参数 (val, radix)， 其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间，并且字符串中的数字不能大于radix才能正确返回数字结果值】; 但此处 map 传了 3 个 (element, index, array),我们重写parseInt函数测试一下是否符合上面的规则。 function parseInt(str, radix) { return str+'-'+radix; }; var a=["1", "2", "3"]; a.map(parseInt); // ["1-0", "2-1", "3-2"] 不能大于radix 因为二进制里面，没有数字3,导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN 所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN] 详细解析：http://blog.csdn.net/justjavac/article/details/19473199 如何判断一个对象是否属于某个类？ 使用instanceof （待完善） if(a instanceof Person){ alert('yes'); } 同步和异步的区别?同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。 .call() 和 .apply() 的区别？ 例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。 function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?那些操作会造成内存泄漏？内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）检测浏览器版本版本有哪些方式？功能检测、userAgent特征检测比如：navigator.userAgent//"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"Webpack热更新实现原理?Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)页面首次打开后，服务端与客户端通过 EventSource 建立通信渠道，把下一次的 hash 返回前端客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。ECMAScript6 相关Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？两等号判等，会在比较时进行类型转换；三等号判等(判断严格)，比较时不进行隐式类型转换,（类型不同则会返回false）；Object.is 在三等号判等的基础上特别处理了 NaN 、-0 和 +0 ，保证 -0 和 +0 不再相同，但 Object.is(NaN, NaN) 会返回 true.Object.is 应被认为有其特殊的用途，而不能用它认为它比其它的相等对比更宽松或严格。## ReactReact 使用场景？逻辑复杂单页应用，偏中后台管理系统，纯展示性的UI页面不合适、React有什么特点？它使用虚拟DOM 而不是真正的DOM。它可以用服务器端渲染。它遵循单向数据流或数据绑定。什么是 Props?Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。描述一下React 生命周期渲染过程调用到的生命周期函数，主要几个要知道；constructor
getInitialState
getDefaultProps
componentWillMount
render
componentDidMount
更新过程componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
卸载过程componentWillUnmount实现组件有哪些方式？React.createClass 使用API来定义组件React ES6 class component 用 ES6 的class 来定义组件Functional stateless component 通过函数定义无状态组件应该在React生命周期的什么阶段发出ajax请求，为什么？AJAX请求应在 componentDidMount函数 进行请求。shouldComponentUpdate函数有什么作用？shouldComponentUpdate是一个允许我们自行决定某些组件（以及他们的子组件）是否进行更新的生命周期函数，reconciliation的最终目的是尽可能以最有效的方式去根据新的state更新UI，如果你已经知道UI的哪些状态无需进行改变，就没必要去让React去判断它是否该改变。 让shouldComponentUpdate返回falss, React就会让当前的组件和其子组件保持不变。当组件的setState函数被调用之后，发生了什么？React会做的第一件事就是把你传递给setState的参数对象合并到组件原先的state。这个事件会导致一个“reconciliation”（调和）的过程。reconciliation的最终目标就是，尽可能以最高效的方法，去基于新的state来更新UI。为了达到这个目的，React会构建一个React元素树（你可以把这个想象成一个表示UI的一个对象）。一旦这个树构建完毕，React为了根据新的state去决定UI要怎么进行改变，它会找出这棵新树和旧树的不同之处。React能够相对精确地找出哪些位置发生了改变以及如何发生了什么变化，并且知道如何只通过必要的更新来最小化重渲染。为什么循环产生的组件中要利用上key这个特殊的prop？Keys负责帮助React跟踪列表中哪些元素被改变/添加/移除。React利用子元素的key在比较两棵树的时候，快速得知一个元素是新的还是刚刚被移除。没有keys，React也就不知道当前哪一个的item被移除了。列出一些应该使用 Refs 的情况需要管理焦点、选择文本或媒体播放时触发式动画与第三方 DOM 库集成Redux 的组件Action – 这是一个用来描述发生了什么事情的对象。Reducer – 这是一个确定状态将如何变化的地方。Store – 整个程序的状态/对象树保存在Store中。View – 只显示 Store 提供的数据## VueVue的生命周期Vue在什么阶段才可以访问Dom在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。vue 具体的生命周期示意图可以参见如下，理解了整个生命周期各个阶段的操作，关于生命周期相关的面试题就难不倒你了。Vuex 的组件State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。 Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。 Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。 Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。 Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中谈谈你对 keep-alive 的了解？keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性： 一般结合路由和动态组件一起使用，用于缓存组件； 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高； 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。Vue 是如何实现数据双向绑定的？Vue 主要通过以下 4 个步骤来实现数据双向绑定的： 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。 实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。 实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。Proxy 与 Object.defineProperty 优劣对比Proxy 的优势如下: Proxy 可以直接监听对象而非属性； Proxy 可以直接监听数组的变化； Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的； Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改； Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利； Object.defineProperty 的优势如下: 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。$set在vue中解决了什么问题？解决数据不能响应的问题 虚拟 DOM 实现原理？虚拟 DOM 的实现原理主要包括以下 3 部分： 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象； diff 算法 — 比较两棵虚拟 DOM 树的差异； pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。vue-router 路由模式有几种？ 有 3 种路由模式：hash、history、abstract，Vue 组件间通信有哪几种方式？1.props / $emit 适用 父子组件通信 2.ref 与 $parent / $children 适用 父子组件通信 3.EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信Vue-Router的原理是什么想在Vue中实现动态表单，如果实现不使用框架，如何手动实现一个菜单React NativeReact Native相对于原生的ios和Android有哪些优势？1.性能媲美原生APP 2.使用JavaScript编码，只要学习这一种语言 3.绝大部分代码安卓和IOS都能共用 4.组件式开发，代码重用性很高 5.跟编写网页一般，修改代码后即可自动刷新，不需要慢慢编译，节省很多编译等待时间 6.支持APP热更新，更新无需重新安装APP有了解过React Native的原理吗？大概说一下你的理解？ 简述：主要是由JavaScriptCodeReact Native是如何加载Bundle的机制？要实现RN的脚本热更新，我们要搞明白RN是如何去加载脚本的。 在编写业务逻辑的时候，我们会有许多个js文件，打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件，所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里，启动App时会第一时间加载bundle文件，所以脚本热更新要做的事情就是替换掉这个bundle文件。如何在React Native中实现一个视频播放器？如何在React Native中实现实时地位？请简单说明一下热更新的原理调用 react native 的打包命令，将当前环境的非 native 代码全量打包成一个 bundle 文件，然后上传到服务器中， 在 app 中启动页（或 splash 页）编写请求更新的代码（请求包含了本地版本，hashCode、appToken 等信息），对比本地 js bundle 版本和服务器上的版本，如果本地版本低，就下载新的 js ，如果相等或者小于服务器的版本号，则不更新。其他问题一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ 注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句， 而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、 到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等； 详细版： 1、浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理; 2、调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法; 3、通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求; 4、进行HTTP协议会话，客户端发送报头(请求报头); 5、进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器; 6、进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理; 7、处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304; 8、浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存; 9、文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie; 10、页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。 简洁版： 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求； 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）； 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）； 载入解析到的资源文件，渲染页面，完成。

零基础学习测试 此内容是作者从各大地方收集过来的，如有失效请及时联系。软件测试学习路线图：第一阶段：前置基础知识基础打牢固，你需要学习的教程零基础学习5天提取码:hvsn第二阶段：Linux和数据库学习这一阶段可以看下面的教程：软件测试必会的linux快速入门教程提取码: p9sh软件测试教程两天搞定Mysql提取码:ysne第三阶段：测试基础这一阶段你要学习的教程：深入了解软件测试4天视频提取码: whd8 第四阶段：编程+数据结构这一阶段需要学习的教程：软件测试必知的Python技术 提取码: imwg 第五阶段：WEB自动化这一阶段需要学习的教程：2天web自动化入门教程提取码: cnrp第六阶段：移动自动化这一阶段需要学习的教程：软件测试项目案例之移动端测试提取码: kuk4第七阶段：接口测试这一阶段需要学习的教程：2天带你掌握接口基础提取码: 6bqv 第八阶段：性能测试这一阶段需要学习的教程：两天带你入门性能测试 提取码: ej4j

如何让pm2支持es6 前言就如同标题一样如何让pm2支持es6，现在 es6已经是满天飞了，写 node 的时候肯定也要用es6咯，所以才会出现如何将pm2支持es6。PM2官网介绍问题是我按照官网介绍使用之后还是不能让 pm2 支持es6，好烦。。。重新看了下官网文档，看到有这么一段其实这段代码 我在对应的ecosystem.config.js（简单说 就是pm2的配置文件，类似npm的package.json）里写过对应的，但没起作用。看到这我才明白为啥没起作用： pm2默认服务是负载均衡的，注意红框中的话：没错，它只能工作在fork模式下。所以我那就一直没跑起来。但如果不用负载均衡，感觉又何必用pm2呢？它的优势不就是这个吗？所以又往下看。果然，pm2提供了解决方法：单写一个js文件，内容如下。pm2 直接运行这个文件即可。既解决了koa的es6编译的问题，又能使用pm2的负载均衡。以下内容只能解决 import运行起来，PM25的状态是 online，但是查看 PM2 logs 时发现报错了。特么我以为以上命令是支持所有 es6，没想到却报以下错误wtf，竟然又报错。我就去谷歌，找了半天找到了。还是一样单写一个 js，内容如下。pm2直接运行这个文件就可以了。我在去查看 logs 时，终于没在报错了。(^▽^)。完美的解决了我的问题。hhhhhh