Web前端面试题框架之03

Posted zcyou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端面试题框架之03相关的知识,希望对你有一定的参考价值。

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?

EventEmitternode中一个实现观察者模式的类,主要功能是监听和发射消息,用于处理多模块交互问题.

 

node有哪些核心模块?

参考答案: EventEmitter, Stream, FS, Net和全局对象 等。。。

 

node有哪些全局对象?

process, console, Bufferexports  

 

 

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

 

以上是关于Web前端面试题框架之03的主要内容,如果未能解决你的问题,请参考以下文章

web前端面试题整理02前端面试题第二弹袭来,接招!(转)

Web前端面试题布局之02

WEB前端面试题

前端面试题之解决浏览器兼容性的方案

BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇

前端面试题系列之-CSS及页面布局篇