56 道高频 JavaScript 与 ES6+ 的面试题及答案（中）

session 与 cookie 的区别

• session 保存在服务器，客户端不知道其中的信息；
• cookie 保存在客户端，服务器能够知道其中的信息。
• session 中保存的是对象，cookie 中保存的是字符串。  
• session 不能区分路径，同一个用户在访问一个网站期间，所有的 session 在任何一个地方都可以访问到。
• 而 cookie 中如果设置了路径参数，那么同一个网站中不同路径下的 cookie 互相是访问不到的。  

cookies 是干嘛的，服务器和浏览器之间的 cookies 是怎么传的，httponly 的 cookies 和可读写的 cookie 有什么区别，有无长度限制 ?

• cookies 是一些存储在用户电脑上的小文件。
• 它是被设计用来保存一些站点的用户数据，这样能够让服务器为这样的用户定制内容，后者页面代码能够获取到 cookie 值然后发送给服务器。
• 比如 cookie 中存储了所在地理位置，以后每次进入地图就默认定位到改地点即可。

请描述一下 cookies，sessionStorage 和 localStorage 的区别

共同点

• 都是保存在浏览器端，且同源的。

区别

• cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。
• 而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
• cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下。
• 存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如会话标识。
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage 在不同的浏览器窗口中不共享，即使是同一个页面；cookie 和 localStorage 在所有同源窗口中都是共享的。

从敲入 URL 到渲染完成的整个过程，包括 DOM 构建的过程，说的约详细越好

• 用户输入 url 地址，浏览器根据域名寻找 IP 地址
• 浏览器向服务器发送 http 请求，如果服务器段返回以 301 之类的重定向，浏览器根据相应头中的 location 再次发送请求
• 服务器端接受请求，处理请求生成 html 代码，返回给浏览器，这时的 html 页面代码可能是经过压缩的
• 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染
• 解析渲染该过程主要分为以下步骤：解析 HTML、构建 DOM 树、DOM 树与 CSS 样式进行附着构造呈现树
• 布局
• 绘制

详情：面试题之从敲入 URL 到浏览器渲染完成

是否了解公钥加密和私钥加密。如何确保表单提交里的密码字段不被泄露。

公钥用于对数据进行加密，私钥用于对数据进行解密。

很直观的理解：公钥就是公开的密钥，其公开了大家才能用它来加密数据。私钥是私有的密钥，谁有这个密钥才能够解密密文。

解决方案 1:

form 在提交的过程中，对密码字段是不进行加密而是以明码的形式进行数据传输的。

如果要对数据进行加密，你可以自己写一个脚本对内容进行编码后传输，只是这个安全性也并不高。

解决方案 2:

如果想对数据进行加密，你可以使用 HTTPS 安全传输协议，这个协议是由系统进行密码加密处理的，在数据传输中是绝对不会被拦截获取的，只是 HTTPS 的架设会相对麻烦点。一些大型网站的登录、银行的在线网关等都是走这条路。

验证码是干嘛的，是为了解决什么安全问题。

所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

• 验证码一般是防止批量注册的，人眼看起来都费劲，何况是机器。
• 像百度贴吧未登录发贴要输入验证码大概是防止大规模匿名回帖的发生。
• 目前，不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。

截取字符串 abcdefg 的 efg。

从第四位开始截取

alert('abcdefg'.substring(4));
alert ('abcdefg'.slice(4))alert('abcdefg'.substring(4));
alert ('abcdefg'.slice(4))

判断一个字符串中出现次数最多的字符，统计这个次数

步骤

• 将字符串转化数组
• 创建一个对象
• 遍历数组，判断对象中是否存在数组中的值，如果存在值 +1，不存在赋值为 1
• 定义两个变量存储字符值，字符出现的字数

var str = 'abaasdffggghhjjkkgfddsssss3444343';
// 1.将字符串转换成数组
var newArr = str.split("");
// 2.创建一个对象
var json = {};
// 3. 所有字母出现的次数，判断对象中是否存在数组中的值，如果存在值 +1，不存在赋值为 1
for(var i = 0; i < newArr.length; i++){
      // 类似：json : { ‘a’: 3, ’b’: 1 }
      if(json[newArr[i]]){
         json[newArr[i]] +=1;
      } else {
           json[newArr[i]] = 1;
      }
}
// 4 定义两个变量存储字符值，字符出现的字数
var num = 0 ; //次数
var element = ""; //最多的项
for(var k in json){
   if(json[k] > num){
     num = json[k];
     element = k ;
   }
}
console.log("出现次数："+num +"最多的字符："+ element);

document.write 和 innerHTML 的区别

• document.write 是直接写入到页面的内容流，如果在写之前没有调用 document.open, 浏览器会自动调用 open。每次写完关闭之后重新调用该函数，会导致页面被重写。
• innerHTML 则是 DOM 页面元素的一个属性，代表该元素的 html 内容。你可以精确到某一个具体的元素来进行更改。如果想修改 document 的内容，则需要修改 document.documentElement.innerElement。
• innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘。
• innerHTML 很多情况下都优于 document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
• document.write 是重写整个 document, 写入内容是字符串的 html；innerHTML 是 HTMLElement 的属性，是一个元素的内部 html 内容

JS 识别不同浏览器信息

function myBrowser() {
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
  var isOpera = userAgent.indexOf("Opera") > -1;
  if (isOpera) {
    return "Opera"
  }; //判断是否Opera浏览器  
  if (userAgent.indexOf("Firefox") > -1) {
    return "Firefox";
  }  //判断是否Firefox浏览器  
  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  }   //判断是否Google浏览器  
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  } //判断是否Safari浏览器  
  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    return "IE";
  }; //判断是否IE浏览器  
}

JavaScript 常见的内置对象

有 Object、Math、String、Array、Number、Function、Boolean、JSON 等，其中 Object 是所有对象的基类，采用了原型继承方式。

编写一个方法，求一个字符串的字节长度

假设：一个英文字符占用一个字节，一个中文字符占用两个字节

function getBytes(str){
    var len = str.length;
    var bytes = len;
    for(var i = 0; i < len; i++){
        if (str.charCodeAt(i) > 255)  bytes++;
    }
    return bytes;
}
alert(getBytes("你好,as"));

JS 组成

• 核心（ECMAScript） 描述了该语言的语法和基本对象
• 文档对象模型(DOM) 描述了处理网页内容的方法和接口
• 浏览器对象模型(BOM) 描述了与浏览器进行交互的方法和接口

new 操作符具体干了什么呢 ?

• 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
• 属性和方法被加入到 this 引用的对象中。
• 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

JSON 的了解？

• JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
• 它是基于 JavaScript 的一个子集。
• 数据格式简单，易于读写，占用带宽小。
• 格式：采用键值对。例如：{ “age‟: ‟12‟, ”name‟: ‟back‟ }

你有哪些性能优化的方法 ？

web 前端是应用服务器处理之前的部分，前端主要包括：HTML、CSS、javascript、image 等各种资源，针对不同的资源有不同的优化方式。

内容优化

• 减少 HTTP 请求数。这条策略是最重要最有效的，因为一个完整的请求要经过 DNS 寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。

常见方法：合并多个 CSS 文件和 js 文件，利用 CSS Sprites 整合图像，Inline Images (使用 data：URL scheme 在实际的页面嵌入图像数据 )，合理设置 HTTP 缓存等。

• 减少 DNS 查找
• 避免重定向
• 使用 Ajax 缓存
• 延迟加载组件，预加载组件
• 减少 DOM 元素数量。页面中存在大量 DOM 元素，会导致 javascript 遍历 DOM 的效率变慢。
• 最小化 iframe 的数量。iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括 JavaScript 和 CSS 的 DOM 元素的创建慢了 1-2 个数量级。
• 避免 404。HTTP 请求时间消耗是很大的，因此使用 HTTP 请求来获得一个没有用处的响应（例如 404 没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

服务器优化

• 使用内容分发网络（CDN）。把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
• GZIP 压缩
• 设置 ETag：ETags（Entity tags，实体标签）是 web 服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
• 提前刷新缓冲区
• 对 Ajax 请求使用 GET 方法
• 避免空的图像 src

Cookie 优化

• 减小 Cookie 大小
• 针对 Web 组件使用域名无关的 Cookie

CSS 优化

• 将 CSS 代码放在 HTML 页面的顶部
• 避免使用 CSS 表达式
• 使用 < link> 来代替 @import
• 避免使用 Filters

javascript 优化

• 将 JavaScript 脚本放在页面的底部。
• 将 JavaScript 和 CSS 作为外部文件来引用。

在实际应用中使用外部文件可以提高页面速度，因为 JavaScript 和 CSS 文件都能在浏览器中产生缓存。

• 缩小 JavaScript 和 CSS
• 删除重复的脚本
• 最小化 DOM 的访问。使用 JavaScript 访问 DOM 元素比较慢。
• 开发智能的事件处理程序
• javascript 代码注意：谨慎使用 with，避免使用 eval Function 函数，减少作用域链查找。

图像优化

• 优化图片大小
• 通过 CSS Sprites 优化图片
• 不要在 HTML 中使用缩放图片
• favicon.ico 要小而且可缓存

JS 格式化数字（每三位加逗号）

从后往前取。

function toThousands(num) {  
    var num = (num || 0).toString(), result = '';  
    while (num.length > 3) {  
        result = ',' + num.slice(-3) + result;  
        num = num.slice(0, num.length - 3);  
    }  
    if (num) { result = num + result; }  
    return result;  
}

合并数组

如果你需要合并两个数组的话，可以使用 Array.concat()

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然而，这个函数并不适用于合并大的数组，因为它需要创建一个新的数组，而这会消耗很多内存。

这时，你可以使用 Array.push.apply(arr1, arr2) 来代替创建新的数组，它可以把第二个数组合并到第一个中，从而较少内存消耗。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.push.apply(array1, array2)); // [1, 2, 3, 4, 5, 6]

把节点列表 (NodeList) 转换为数组

如果你运行 document.querySelectorAll("p") 方法，它可能会返回一个 DOM 元素的数组 — 节点列表对象。

但这个对象并不具有数组的全部方法，如 sort()，reduce()， map()，filter()。

为了使用数组的那些方法，你需要把它转换为数组。

只需使用 [].slice.call(elements) 即可实现：

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // 现在 NodeList 是一个数组
var arrayElements = Array.from(elements); // 这是另一种转换 NodeList 到 Array  的方法

打乱数组元素的顺序

不适用 Lodash 等这些库打乱数组元素顺序，你可以使用这个技巧：

var list = [1, 2, 3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2, 1, 3]