前端面试基础题库——7

六十一、什么是 Node.js?  如何使用?

        Node.js 是一种基于 Chrome  V8 引擎的 JavaScript 运行环境，提供了采用事件驱动、非阻塞 lO 模型的方法，用于开发 Web  服务器和网络应用程序。 Node.js 可以在服务器端用JavaScript 来开发网络应用程序、处理数据流等等。 Node.js 具有如下特点：

        ● 异步编程模型，利用事件驱动和非阻塞的 IO(Input/Output)模型，增强了Web 应用程序的性能和并发处理能力。

        ● 采用单线程模型，避免了多线程编程所带来的复杂性。

        ● 开放的文化和丰富的扩展库，提供一系列标准 API 和 WebSocket 等。

        ● 使 用 JavaScript 语言来开发，可以快速开发 Web  应用，缩短了应用部署时间，简化了客户端和服务器端之间的数据交换过程。

 六十二、日常前端代码开发中，有哪些值得用 ES6 去改进的编程优化或者规范

        1、常用箭头函数来取代 var self = this;的做法。

        2、常用 let 取代 var 命令。

        3、常用数组/对象的结构赋值来命名变量， 结构更清晰，语义更明确， 可读性更好。

        4、在长字符串多变量组合场合， 用模板字符串来取代字符串累加， 能取得更好地效果和阅读体验。

        5、用 class 类取代传统的构造函数，来生成实例化对象。

        6、在大型应用开发中，要保持 module 模块化开发思维，分清模块之间的关系，常用 import、 export 方法。

 六十三、Promise 中 reject 和 catch 处理上有什么区别

        1.reject 是用来抛出异常， catch 是用来处理异常

        2.reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

        3.reject 后的东西， 一定会进入 then 中的第二个回调，如果 then 中没有写第二个回调， 则 进入catch

        4.网络异常（比如断网），会直接进入 catch 而不会进入 then 的第二个回调

六十四、理解 async/await 以及相对 Generator 的优势 

        理解 async await

        async await 是用来解决异步的， async 函数是 Generator 函数的语法糖 使用关键字 async 来表示，在函数内部使用 await 来表示异步；

        async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数；

        当函数执行的时候， 一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内 后面的语句；

        async 较 Generator 的优势

        1、内置执行器

                Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器， 调用方式跟普通

函数的调用一样。

        2、更好的语义

                async 和 await 相较于 * 和 yield 更加语义化。

        3、更广的适用性

                yield 命令后面只能是 Thunk 函数或 Promise 对象， async 函数的 await 后面可以是

Promise 也可以是原始类型的值。

        4、返回值是 Promise

                async 函数返回的是 Promise 对象，比 Generator 函数返回的 Iterator 对象   方便，可

以直接使 用 then() 方法进行调用。

                generator 函数就是一个封装的异步任务， 也就是异步任务的容器，执行 Generator 函数会返回一个遍历器对象,async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个 函数里。

 六十五、说一下 ES6 的导入导出模块

         导入模块

        通过 import 关键字

// 只导入一个

import {sum} from "./example.js"

// 导入多个

import {sum,multiply,time} from "./exportExample.js"

// 导入一整个模块

import * as example from "./exportExample.js"

        导出模块

        导出通过 export 关键字

//可以将 export 放在任何变量,函数或类声明的前面

export var firstName = 'Chen'; export var lastName = 'Sunny'; export var year = 1998;

//也可以使用大括号指定所要输出的一组变量

var firstName = 'Chen';

var lastName = 'Sunny';

var year = 1998;

export {firstName, lastName, year} ;

//使用 export default 时，对应的 import 语句不需要使用大括号

let bosh = function crs(){} export default bosh;

import crc from 'crc';

//不使用 export default 时，对应的 import 语句需要使用大括号

let bosh = function crs(){}

export bosh;

import {crc} from 'crc';

六十六、JS 里垃圾回收机制是什么， 常用的是哪种， 怎么处理的？ 

        JS 的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内 存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向 的内存。JS 中最常见的垃圾回收方式是标记清除。

        工作原理：

                        是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其 标记为“离开环境”。标记“离开环境”的就回收内存。

        工作流程：

                1.垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记；

                2.去掉环境中的变量以及被环境中的变量引用的变量的标记；

                3.再被加上标记的会被视为准备删除的变量；

                4.垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间 。

六十七、切换其他组件统计图时，出现卡顿问题如何解决 

        1、原因： 每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后， echarts 图例是销毁了， 但是这个 echarts 的实例还在内存当中，同时它的气泡渲染定时器还在运行。这 就导致 echarts 占用 CPU 高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃

        2、解决方法： 在 mounted()方法和 destroy()方法之间加一个 beforeDestroy()方法释放该页面 的 chart 资源， clear()方法则是清空图例数据，不影响图例的 resize，而且能够释放内存，切 换的时候就很顺畅了

beforeDestroy () {

    this.chart.clear()

}

六十八、echarts 图表自适应 div resize 问题 

        echarts 官网的实例都具有响应式功能

        echarts 图表本身是提供了一个 resize 的函数的。

        用于当 div 发生 resize 事件的时候，让其触发 echarts 的 resize 事件，重绘 canvas。

<div class="chart">

<div class="col-md-3" style="width:73%;height:270px" id="chartx"></div> </div>

<script src="/static/assets/scripts/jQuery.ba-resize.js"></script>

var myChartx = echarts.init(document.getElementById('chartx'));

$('.chart').resize(function(){

myChartx.resize();

})

六十九、常见的 HTTP 状态码以及代表的意义 

        5 种常见的 HTTP 状态码以及代表的意义

                200（ OK）：请求已成功， 请求所希望的响应头或数据体将随此响应返回。

                 400（ Bad Request）：请求格式错误。       

                        1) 语义有误，当前请求无法被服务器理解。除非进行  修改，否则客户端不应该重

复提交这个请求；

                        2) 请求参数有误。

                404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。

                500（ Internal Server Error）：服务器遇到了一个未曾预料的状况， 导致了它无法完成对请求的处理。

        更多状态码

                100 => 正在初始化（一般是看不到的）

                101 => 正在切换协议（websocket 浏览器提供的）

                202 => 表示接受

                301 => 永久重定向/永久转移

                302 => 临时重定向/临时转移（一般用来做服务器负载均衡）

                304 => 本次获取的内容是读取缓存中的数据，会每次去服务器校验

                401 => 未认证，没有登录网站

                403 => 禁止访问，没有权限

                502 => 充当网关或代理的服务器， 从远端服务器接收到了一个无效的请求

                503 => 服务器超负荷（假设一台服务器只能承受 10000 人，当第 10001 人访问的时候， 如果服务器没有做负载均衡，那么这个人的网络状态码就是 503）

                505 => 服务器不支持请求的 HTTP 协议的版本，无法完成处理。 

 七十、Ajax 注意事项及适用和不适用场景

        Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考 虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHTTPRequest 的不恰当处理， 都会使用户感到延迟，这是用户不希望看到的， 也是他们无法理解的。通常的解决方案是， 使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

        Ajax 适用场景

                1、表单驱动的交互

                2、深层次的树的导航

                3、快速的用户与用户间的交流响应

                4、类似投票、yes/no 等无关痛痒的场景

                5、对数据进行过滤和操纵相关数据的场景

                6、普通的文本输入提示和自动完成的场景

        Ajax 不适用场景

                1、部分简单的表单

                2、搜索

                3、基本的导航

                4、替换大量的文本

                5、对呈现的操纵