广州长视科技股份有限公司（广州）

[toc]

1. title 和 alt的区别

首先title添加的是标题，鼠标在元素上停留时间较长时会显示出来的文字信息。

alt是占位符，当元素内容资源没有加载过来的时候显示的文字

title属性可以设置在所有标签元素上 包括html标签

alt属性只能用在img area input 这样加载资源的标签上，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息

2. 数组去重

  1. function duplicateArr(arr) {
  2.     var obj = {};
  3.     var result = [];
  4.     for (var i = 0; i < arr.length; i++) {
  5.         var prop = typeof arr[i] != 'object' ? arr[i] : JSON.stringify(arr[i]);
  6.         if (!obj[prop) {
  7.             obj[prop] = true;
  8.             result.push(arr[i]);
  9.         }
  10.     }
  11.     return result;
  12. }

3. 性能优化

  • 减少网络请求次数。
  • 减少dom操作
  • 静态资源压缩合并
  • 静态资源做缓存
  • 渲染优化： css放在head中 js放在body中，图片加载使用懒加载
  • 事件节流处理
  • 使用异步加载

4. 盒模型

盒模型是指页面在渲染的时候每个元素是以类似盒子的形态进行排列展示，在css中与盒子大小相关的属性有margin,border, padding, width, 由于css的发展 在css中盒模型又被分为两种：

一种是标准盒模型，标准盒模型内容区的宽高就是我们设置的width和height 的高度

另一种是IE6混杂盒模型，在混杂盒模型中我们设置的width height 包含了padding 和border区域 也就是盒子真正的内容区的宽高 = width - padding - border

现在切换盒模型的方法是通过c3里面的box-sizing属性进行切换 content-box是标准盒模型 border-box 是混杂盒模型

5. http状态码

  1. 常见的状态码 2xx 成功响应  3xx  重定向 4xx  客户端出现问题  5xx  服务端出现问题  经常看到的几个状态码的描述：
  2. 200   successs  请求成功
  3. 302   found 暂时性转移  （可能的原因接口暂时转到了另外一个url上）
  4. 304  not modified 客户端发送附带条件的请求时（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个）服务器端允许请求访问资源，但因发生请求未满足条件的情况后，直接返回304 Modified（服务器端资源未改变，可直接使用客户端未过期的缓存）。304状态码返回时，不包含任何响应的主体部分。304虽然被划分在3xx类别中，但是和重定向没有关系。
  5. 404  Not Found  没有找到 （可能的原因路径写错了）
  6. 400  Bad Request  坏的请求 （可能的原因没有按照接口要求使用）
  7. 500 （服务器端出现解析问题）

6. array和object的区别

数组和对象都属于引用类型的值，都存储在堆内存当中（这里很有可能被问到堆栈内存的区别，可以适当的扩展）

array 数组是有序的，而object是无序的。数组属于特殊的对象，因此对象含有的方法，数组也拥有，而数组拥有的方法，对象不一定含有
例如：

  1. 数组默认含有长度属性length， 含有很多遍历方法例如forEach  map filter  reduce 等方法，对象没有
  3. 对象调用属性的方式有两： obj.propName / obj[propName]  
  4. 数组调用属性的方式只有一种: arr[index]

7. bfc

  1. bfc: 块级格式化上下文对象，他并不是一个js对象而是一种渲染方式，按照从上到下从左到右，依次排列的方式进行渲染，该方式会进行计算元素的边界，这样就可以修复一些渲染问题例如margin 合并/塌陷的问题，float浮动元素撑不开父元素的问题等。
  2. 触发bfc的方式有：
  3.     1. 添加float浮动
  4.     2. position的值为absolute / fixed
  5.     3. overflow的值为hidden scroll 等非visible的值
  6.     4. display: inline-block, table-ceil等

8. jq事件委托

  1. jq中的事件委托是通过on方法实现， $(parentNode).on(eventName, sonNode, function(){}) 执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript。

9. 数据类型

js 中基本数据类型有: Number, String, Undefined, Object, Function, Boolean 这六种

常用的数据类型有： 除了上面六个基本数据类型之外还有null, array（这两种数据属于基本类型中的object类型）

10. 什么是webpack，为什么要用它

  1. webpack 是一种前端自动化构建工具.
  2. 随着前端的发展，为了更加方便快捷的开发前端涉及到的文件种类越来越多，但是浏览器可识别的文件只有html，css ， js 
  3. 那么其他种类的文件就需要进行编译转化程浏览器可识别的文件，webpack就可以完成这个过程,
  4. 并且webpack本身支持模块化的思想，所以用它构建项目我们可以进行模块化的开发（此处如果面试官问你模块化怎么回事，一定要扩展一下），webpack支持的模块化标准有common.js 以及es6模块化（es6模块化标准需要进行单独的配置）（此处可以扩展模块化的不同标准的特点）
  5. webpack中还支持很多便于我们开发的插件，例如压缩插件，模板渲染插件等等（此处可以将你熟悉的插件详细的描述一下）

11. web socket 和 socket io

  1. websocket 的产生是为了解决事实数据接收的问题，没有websocket之前的解决方案是用ajax轮询 和 http长连接的方式解决.
  2. 这两种方式从整个交互的过程来看，都是非常消耗资源的。
  3. 轮询，需要服务器有很快的处理速度和处理器资源。
  4. HTTP长连接，需要有很高的并发，也就是说并行处理的能力。
  6. 这两种采用HTTP的方式都不是最好的方式，体现在：
  7. 1. HTTP的被动性：需要很多服务资源。一种需要有更快的速度，一种需要更多的响应时间。这两种都会导致对服务资源的需求越来越高。
  8. 2. HTTP的无状态性： 只有客户端发出请求，服务器端接收到才知道他是谁，否则不会知道客户端上一次请求了哪些信息。
  10. WebSocket是HTML5提出的一个协议规范（2011年）
  11. 通过一个握手的机制，客户端（如浏览器）和服务器（WebServer）之间能建立一个类似Tcp的连接，从而方便客户端和服务器端之间的通信。
  13. WebSocket协议的特点
  14. 1. 建立在 TCP 协议之上，它需要通过握手连接之后才能通信，服务器端的实现比较容易。
  15. 2. 与 HTTP 协议有着良好的兼容性。默认端口也是80或443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
  16. 3. 数据格式比较轻量，性能开销小，通信高效。可以发送文本，也可以发送二进制数据。
  17. 4. 没有同源限制，客户端可以与任意服务器通信。
  18. 5. 协议标识符是ws（如果加密，则为wss），服务器网址就是URL。（例如：ws://www.example.com/chat）
  19. 6. 它是一种双向通信协议，采用异步回调的方式接受消息，当建立通信连接，可以做到持久性的连接，WebSocket服务器和Browser都能主动的向对方发送或接收数据，实质的推送方式是服务器主动推送，只要有数据就推送到请求方
  21. 实际应用中，如果需要Websocke进行双向数据通信，Socket.io是一个非常好的选择。其实github上面也有通过JS封装好的Websocket库，ws可用于client和基于node搭建的服务端使用，但是用起来相对繁琐，star相对Socket.io较少，所以不推荐使用。
  22. Socket.io不是Websocket，它只是将Websocket和轮询 （Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。也就是说，Websocket仅仅是 Socket.io实现实时通信的一个子集。因此Websocket客户端连接不上Socket.io服务端，当然Socket.io客户端也连接不上Websocket服务端。

12. 快速排序思想与实现

13. 说一下 http

  1. HTTP： 超文本传输协议，
  2. 1. WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵循的规则。
  3. 2. 它是TCP/IP 协议集中的一个应用层协议，用于定义WEB浏览器与WEB服务器之间交换数据的过程以及数据本身的格式。
  4. 3.  HTTP协议的版本 HTTP/1.0、HTTP/1.1、HTTP-NG，比较常用的是http/1.1
  6. HTTP的会话方式分为四个过程： 
  7.     1. 建立连接
  8.     2. 发出请求
  9.     3. 接收响应
  10.     4. 断开连接
  11. （此处可以详细的说一下建立连接和断开连接的过程）
  13. 可以说说HTTP 报文结构  contentType不一样的话报文结构是不一样的可以进行加以区分

14. 什么是ajax

  1. 异步的JavaScript和xml（json），主要的用途就是做客户端与服务器端的数据交互。 在js中提供了一个为HTTP请求提供的接口XMLHTTPRequest对象

15. 什么时候开始学的，怎么学的

  1. 一个什么什么机会接触到了前端，那个时候就觉得前端是做网页的，会做一些简单的页面，就觉得前端真简单就一些标签样式事件啥的
  2. 后来又看某个某个网站，就有点好奇某个某个功能的实现，自己就实现了一下，遇到了什么难点，再后来就一点一点的深入（这里可以详细的说怎么深入的）

16. 什么是promise,手写promise

  1. es6中的一种异步处理方案
  1. const MyPromise = (() => {
  2.     const PENDING = "pending",
  3.         RESOLVED = "resolved",
  4.         REJECTED = "rejected",
  5.         PromiveValue = Symbol("PromiseValue"), //状态数据
  6.         PromiseStatus = Symbol("PromiseStatus"),
  7.         thenables = Symbol("thenables"), //thenable
  8.         catchables = Symbol("catchbles"), //catchables
  9.         changeStatus = Symbol("changeStatus"),//当前状态
  10.         settleHandle = Symbol("settleHandle"), //后续处理的通用函数
  11.         linkPromise = Symbol("linkPromise");  //创建串联的Promise
  13.     return class MyPromise {
  15.         /**
  16.          * 改变当前Promise的状态
  17.          * @param {*} newStatus 
  18.          * @param {*} newValue 
  19.          * @param {*} queue 执行的作业队列
  20.          */
  21.         [changeStatus](newStatus, newValue, queue) {
  22.             if (this[PromiseStatus] !== PENDING) {
  23.                 //状态无法变更
  24.                 return;
  25.             }
  26.             this[PromiseStatus] = newStatus;
  27.             this[PromiveValue] = newValue;
  28.             //执行相应队列中的函数
  29.             queue.forEach(handler => handler(newValue));
  30.         }
  32.         /**
  33.          * 
  34.          * @param {*} executor 未决阶段（pending状态）下的处理函数
  35.          */
  36.         constructor(executor) {
  37.             this[PromiseStatus] = PENDING;
  38.             this[PromiveValue] = undefined;
  39.             this[thenables] = []; //后续处理函数的数组 -> resolved
  40.             this[catchables] = []; //后续处理函数的数组 -> rejected
  42.             const resolve = data => {
  43.                 this[changeStatus](RESOLVED, data, this[thenables]);
  44.             }
  46.             const reject = reason => {
  47.                 this[changeStatus](REJECTED, reason, this[catchables]);
  48.             }
  49.             try {
  50.                 executor(resolve, reject)
  51.             }
  52.             catch (err) {
  53.                 reject(err);
  54.             }
  55.         }
  57.         /**
  58.          * 处理 后续处理函数
  59.          * @param {*} handler 后续处理函数
  60.          * @param {*} immediatelyStatus 需要立即执行的状态
  61.          * @param {*} queue 作业队列
  62.          */
  63.         [settleHandle](handler, immediatelyStatus, queue) {
  64.             if (typeof handler !== "function") {
  65.                 return;
  66.             }
  67.             if (this[PromiseStatus] === immediatelyStatus) {
  68.                 //直接运行
  69.                 setTimeout(() => {
  70.                     handler(this[PromiveValue]);
  71.                 }, 0);
  72.             }
  73.             else {
  74.                 queue.push(handler);
  75.             }
  76.         }
  78.         [linkPromise](thenalbe, catchable) {
  79.             function exec(data, handler, resolve, reject) {
  80.                 try {
  81.                     const result = handler(data); //得到当前Promise的处理结果
  82.                     if (result instanceof MyPromise) {
  83.                         result.then(d => {
  84.                             resolve(d)
  85.                         }, err => {
  86.                             reject(err);
  87.                         })
  88.                     }
  89.                     else {
  90.                         resolve(result);
  91.                     }
  92.                 }
  93.                 catch (err) {
  94.                     reject(err);
  95.                 }
  96.             }
  98.             return new MyPromise((resolve, reject) => {
  99.                 this[settleHandle](data => {
  100.                     exec(data, thenalbe, resolve, reject);
  101.                 }, RESOLVED, this[thenables])
  103.                 this[settleHandle](reason => {
  104.                     exec(reason, catchable, resolve, reject);
  105.                 }, REJECTED, this[catchables])
  106.             })
  107.         }
  109.         then(thenable, catchable) {
  110.             return this[linkPromise](thenable, catchable);
  111.         }
  113.         catch(catchable) {
  115.             return this[linkPromise](undefined, catchable);
  116.         }
  119.         static all(proms) {
  120.             return new Promise((resolve, reject) => {
  121.                 const results = proms.map(p => {
  122.                     const obj = {
  123.                         result: undefined,
  124.                         isResolved: false
  125.                     }
  126.                     p.then(data => {
  127.                         obj.result = data;
  128.                         obj.isResolved = true;
  129.                         //判断是否所有的全部完成
  130.                         const unResolved = results.filter(r => !r.isResolved)
  131.                         if (unResolved.length === 0) {
  132.                             //全部完成
  133.                             resolve(results.map(r => r.result));
  134.                         }
  135.                     }, reason => {
  136.                         reject(reason);
  137.                     })
  138.                     return obj;
  139.                 })
  140.             })
  141.         }
  143.         static race(proms) {
  144.             return new Promise((resolve, reject) => {
  145.                 proms.forEach(p => {
  146.                     p.then(data => {
  147.                         resolve(data);
  148.                     }, err => {
  149.                         reject(err);
  150.                     })
  151.                 })
  152.             })
  153.         }
  155.         static resolve(data) {
  156.             if (data instanceof MyPromise) {
  157.                 return data;
  158.             }
  159.             else {
  160.                 return new MyPromise(resolve => {
  161.                     resolve(data);
  162.                 })
  163.             }
  164.         }
  166.         static reject(reason) {
  167.             return new MyPromise((resolve, reject) => {
  168.                 reject(reason);
  169.             })
  170.         }
  171.     }
  172. })();

17. 什么是less和sass，为什么用

  1. less 和sass 都是css的预处理语言
  2. 预处理语言就是对css的一种封装优化，
  3. 主要的目的还是更加方便我们书写css样式。

18. jquery，vue，react，angular区别

  1. jquery是一个js工具库，主要是简化了js的使用以及操作
  2. react，vue，angular是前端框架， 这个框架的出现主要也是简化我们日常的项目开发，这里面简化的是整体项目的开发而不是单纯的js部分，还包含html css等
  3. vue，react，angular 的区别：
  4.     1. 语法的不同
  5.     2. 部分功能思想实现的不同
  6.     3. vue的语法简单，react偏于多端项目的开发，angular每个版本差异比较大
  7.     4. vue继承了react和angular的优点

19. 项目中遇到过什么难题