JavaScript的组成
- JavaScript 由以下三部分组成：
- ECMAScript（核心）：JavaScript 语言基础
- DOM（文档对象模型）：规定了访问HTML和XML的接口
- BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法
JS的基本数据类型和引用数据类型
- 基本数据类型：undefined、null、boolean、number、string、symbol：
Symbol是由ES6规范引入的一项新特性，它的功能类似于一种标识唯一性的ID - 引用数据类型：object、array、function
检测浏览器版本版本有哪些方式？
- 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
- 根据 window 对象的成员 // 'ActiveXObject' in window
介绍JS有哪些内置对象？
- 数据封装类对象：Object、Array、Boolean、Number、String
- 其他对象：Function、Arguments、Math、Date、RegExp、Error
- ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect
说几条写JavaScript的基本规范？
- 代码缩进，建议使用“四个空格”缩进
- 代码段使用花括号{}包裹
- 语句结束使用分号;
- 变量和函数在使用前进行声明
- 以大写字母开头命名构造函数，全大写命名常量
- 规范定义JSON对象，补全双引号
- 用{}和[]声明对象和数组
如何编写高性能的JavaScript？
- 遵循严格模式："use strict";
- 将js脚本放在页面底部，加快渲染页面
- 将js脚本将脚本成组打包，减少请求
- 使用非阻塞方式下载js脚本
- 尽量使用局部变量来保存全局变量
- 尽量减少使用闭包
- 使用 window 对象属性方法时，省略 window
- 尽量减少对象成员嵌套
- 缓存 DOM 节点的访问
- 通过避免使用 eval() 和 Function() 构造器
- 给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数
- 尽量使用直接量创建对象和数组
- 最小化重绘(repaint)和回流(reflow)
描述浏览器的渲染过程，DOM树和渲染树的区别？
- 浏览器的渲染过程：
- 解析HTML构建 DOM(DOM树)，并行请求 css/image/js
- CSS 文件下载完成，开始构建 CSSOM(CSS树)
- CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
- 布局(Layout)：计算出每个节点在屏幕中的位置
- 显示(Painting)：通过显卡把页面画到屏幕上
- DOM树 和 渲染树 的区别：
- DOM树与HTML标签一一对应，包括head和隐藏元素
- 渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性
重绘和回流（重排）的区别和关系？
- 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
- 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
- 注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
- 回流必将引起重绘，而重绘不一定会引起回流
如何最小化重绘(repaint)和回流(reflow)？
- 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
- 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
- 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
- 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
- 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
- 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
- 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
script 的位置是否会影响首屏显示时间？
- 在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script的位置不影响首屏显示的开始时间。
- 浏览器解析 HTML 是自上而下的线性过程，script作为 HTML 的一部分同样遵循这个原则
- 因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间
解释JavaScript中的作用域与变量声明提升？
- JavaScript作用域：
- 在Java、C等语言中，作用域为for语句、if语句或{}内的一块区域，称为作用域；
- 而在 JavaScript 中，作用域为function(){}内的区域，称为函数作用域。
- JavaScript变量声明提升：
- 在JavaScript中，函数声明与变量声明经常被JavaScript引擎隐式地提升到当前作用域的顶部。
- 声明语句中的赋值部分并不会被提升，只有名称被提升
- 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
- 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数
介绍JavaScript的原型，原型链？有什么特点？
- 原型：
- JavaScript的所有对象中都包含了一个 [__proto__] 内部属性，这个属性所对应的就是该对象的原型
- JavaScript的函数对象，除了原型 [__proto__] 之外，还预置了 prototype 属性
- 当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [__proto__]。
- 原型链：
- 当一个对象调用的属性/方法自身不存在时，就会去自己 [__proto__] 关联的前辈 prototype 对象上去找
- 如果没找到，就会去该 prototype 原型 [__proto__] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
- 原型特点：
- JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变
JavaScript有几种类型的值
- 原始数据类型（Undefined，Null，Boolean，Number、String）-- 栈
- 引用数据类型（对象、数组和函数）-- 堆
- 两种类型的区别是：存储位置不同：
- 原始数据类型是直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据；
- 引用数据类型存储在堆(heap)中的对象，占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；
- 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。
- 当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
JavaScript如何实现一个类，怎么实例化这个类？
构造函数法（this + prototype） -- 用 new 关键字 生成实例对象
- 缺点：用到了 this 和 prototype，编写复杂，可读性差
Object.create 法 -- 用 Object.create() 生成实例对象
- 缺点：不能实现私有属性和私有方法，实例对象之间也不能共享数据
极简主义法（消除 this 和 prototype） -- 调用 createNew() 得到实例对象
- 优点：容易理解，结构清晰优雅，符合传统的"面向对象编程"的构造
ES6 语法糖 class -- 用 new 关键字 生成实例对象
Javascript如何实现继承？
- 构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上
- 实例继承：将子对象的 prototype 指向父对象的一个实例
- 拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象
- 原型继承：将子对象的 prototype 指向父对象的 prototype
- ES6 语法糖 extends：class ColorPoint extends Point {}
谈谈this对象的理解
- this 总是指向函数的直接调用者
- 如果有 new 关键字，this 指向 new 出来的实例对象
- 在事件中，this指向触发这个事件的对象
- IE下 attachEvent 中的this总是指向全局对象Window
在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？
- 该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）
- 如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获
- 如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡
IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
- IE只事件冒泡，不支持事件捕获；火狐同时支持件冒泡和事件捕获
什么是闭包 (closure)，如何使用它，为什么要使用它？
- 闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。
通过js中函数拥有独立作用域的特性，在内部定义的变量不会被外部侵染，但是我们可以通过暴露接口，使外部可以访问，以及修改，当外部引用此函数内部的变量的时候，这个函数是不会被销毁收回的。
NodeJS 部分
什么是promise
用于管理与异步API交互的抽象对象,避免使用回调函数的层层嵌套
状态:等待->完成->拒绝
必须有一个then(),第一个参数是resolved,第二个是rejected函数;
什么是EventEmitter?
EventEmitter是node中一个实现观察者模式的类，主要功能是监听和发射消息，用于处理多模块交互问题.
node有哪些核心模块?
参考答案: EventEmitter, Stream, FS, Net和全局对象 等。。。
node有哪些全局对象?
process, console, Buffer和exports 等
node中的异步和同步怎么理解
参考答案: node是单线程的，异步是通过一次次的循环事件队列来实现的．同步则是说阻塞式的IO,这在高并发环境会是一个很大的性能问题，所以同步一般只在基础框架的启动时使用，用来加载配置文件，初始化程序什么的．
有哪些方法可以进行异步流程的控制?
参考答案: 1) 多层嵌套回调 2) 为每一个回调写单独的函数，函数里边再回调 3) 用第三方框架比方async, q, promise等
怎样绑定node程序到80端口?
参考答案: 多种方式 1) sudo 2) apache/nginx代理 3) 用操作系统的firewall iptables进行端口重定向
有哪些方法可以让node程序遇到错误后自动重启?
参考答案: 1) runit 2) forever 3) nohup npm start &
怎样充分利用多个CPU?
参考答案: 一个CPU运行一个node实例
怎样调节node执行单元的内存大小?
参考答案: 用–max-old-space-size 和 –max-new-space-size 来设置 v8 使用内存的上限
程序总是崩溃，怎样找出问题在哪里?
参考答案: 1) node –prof 查看哪些函数调用次数多 2) memwatch和heapdump获得内存快照进行对比，查找内存溢出
有哪些常用方法可以防止程序崩溃?
参考答案: 1) try-catch-finally 2) EventEmitter/Stream error事件处理 3) domain统一控制 4) jshint静态检查 5) jasmine/mocha进行单元测试
怎样调试node程序?
参考答案: node –debug app.js 和node-inspector
常用知名第三方类库(Async, Express等)
说出四、五个可以
npm是什么？
npm是nodejs包管理和分发的工具，用于管理node包。如安装、卸载、发布、查看等。
npm的好处？
通过npm，可以安装和管理项目的依赖，且可以指明依赖项的具体版本号。
Node.js中导入模块和导入js文件写法上有什么区别？
nodejs引入模块，直接使用名字导入即可。
用Nodejs 如何调用mysql数据库数据
可以使用模块node-mysql-promise所封装的数据库操作类 来链接数据库 做增删查改语句
VueJS 部分
请说下具体使用vue的理解？
答：1、使用vue不必担心布局更改和类名重复导致的js重写，因为它是靠数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
4、js的代码无形的规范，团队合作开发代码可阅读性更高。
你觉得哪些项目适合vue框架？
答：1、数据信息量比较多的，反之类似企业网站就无需此框架了。
2、手机web和app应用多端共用一套界面的项目，因为使用vue.cli+webpack后的前端目录，非常有利于项目的跨平台部署。
怎么理解MVVM模式的这些框架？
答：1、M就是Model模型层，存的一个数据对象。
2、V就是View视图层，所有的html节点在这一层。
3、VM就是ViewModel，它通过data属性连接Model模型层，通过el属性连接View视图层。
PC端项目你会在哪些场景使用Vue框架？
答：上万级数据需要瀑布流更新和搜索的时候，因为数据庞大的时候，用原生的dom操作js和html都会有列表的html布局，迭代很困难。再一个dom节点的大面积添加会影响性能。
那么vue为什么解决这些问题呢？
第一：只需用v-for在view层一个地方遍历数据即可，无需复制一段html代码在js和html两个地方。
第二：vue通过Virtual Dom就是在js中模拟DOM对象树来优化DOM操作。
什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
第一次页面加载会触发哪几个钩子？
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。
简单描述每个周期具体适合哪些场景？
答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom
axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
axios+tp5进阶中，调用axios.post(‘api/user’)是进行的什么操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用户操作，更新操作。
vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
说出至少4种vue当中的指令和它的用法？
答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定
自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
vue-router是什么？它有哪些组件？
答：vue用来写路由一个插件。router-link、router-view
Vue的双向数据绑定原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
你是怎么认识vuex的？
答：vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
vue-loader是什么？使用它的用途有哪些？
答：解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
请说出vue.cli项目中src目录每个文件夹和=的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
都有用过哪些第三方的vue组件？
说出4-5个左右就可以了
WebPack 部分
1.什么是webpack ,webpack 与grunt 或者gulp有什么区别
答：webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
他和其他的工具最大的不同在于他支持code-splitting（代码分割）,模块化（AMD,ESM,CommonJs），全局解析。
1.如何可以自动生成webpack配置？
答：webpack-cli/vue-cli等等
什么是模块热更新？
模块热更新，是webpack的一个功能，他可以使得代码通过修改过后，不用刷新浏览器就可以更新。是高级版的自动刷新浏览器。
webpack中，你使用过哪些loader
答：style-loader、css-loader、url-loader、file-loader、sass-loader
什么是bundle,什么是chunk，什么是module?
bundle是由webpack打包出来的文件，chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。