Web前端面试题框架之03

Posted 2022-05-20 zcyou

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是开发中的单个模块。