前端面试题库

原文地址

简介

这段时间在一个创业公司实习，公司里比较缺前端，身为后端的我不得已扛起了公司里前端的大旗。成功的给公司作出几个前端项目之后，感觉我已经成了公司里前端的顶梁柱了= =，就连前端面试的任务都交给了我。

本篇博文就是记录一下我前端面试时喜欢问的一些问题，我毕竟年轻，并且不是专业前端，还请大神们轻喷Orz。

前端算法

感觉来面试的前端童鞋们算法水平真是不忍直视，很多在后端同学看来简单的不能再简单的算法，我面过的许多人都没能顺利的答出。

能顺利刷过Leetcode里Easy题的童鞋可以忽视这一节了。

正文开始。

1. 求斐波那契数列第N项。

   // 递归版本
   function fib(n) {
       if (n <= 2) return 1;
       return fib(n - 1) + fib(n - 2);
   }
   // 非递归
   function fib(n) {
       var a1 = 1, a2 = 1;
       while (n-- > 2) {
           var tmp = a1 + a2;
           a1 = a2;
           a2 = tmp;
       }
       return a2;
   }
   
   // 此外还有矩阵求法，复杂度O(lgn)

2. 数组去重，去除数组中重复的元素。

   function unique(arr) {
       var set = {}, res = [];
       for (var i in arr) {
           if (!set[arr[i]]) {
               res.push(arr[i]);
               set[arr[i]] = true;
           }
       }
       return res;
   }

3. 3sum，求出数组中和为0的3个数。

4. 求出1,2,3,…,n这n个数的所有排列。

   比如1,2,3的所有排列是
   1,2,3
   1,3,2
   2,1,3
   2,3,1
   3,1,2
   3,2,1
   考虑1-n的排列和1-n-1的排列的关系可以很容易得到递归解法。

   function permutation(n) {
       if (n == 1) {
           return [[1]];
       } else {
           var result = [];
           var prev = permutation(n - 1);
           for (var idx in prev) {
               for (var i = 0; i < n; i++) {
                   var copy = prev[idx].concat();
                   copy.splice(i, 0, n);
                   result.push(copy);
               }
           }
           return result;
       }
   }

5. 生成长度为n的随机字符串

   function randomString(n) {
       var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
       var tmp = '';
       for(var i=0;i<n;i++)
           tmp += str.charAt(Math.round(Math.random()*str.length));
       return tmp;
   }

6. 二分查找有序数组

7. 找出一个数组中出现次数最多的数字

前端基础

1. HTML语义化有什么作用

2. HTML5离线缓存有什么作用 （APP Cache和Manifest文件)

3. cookie, sessionStorage, localStorage

4. 浏览器多个标签页该如何通信

   WebSocket、SharedWorker；
   也可以调用localstorge、cookies等本地存储方式；

   localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
   我们通过监听事件，控制它的值来进行页面信息通信；
   注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

5. webSocket如何兼容低浏览器

   Adobe Flash Socket 、
   ActiveX HTMLFile (IE) 、
   基于 multipart 编码发送 XHR 、
   基于长轮询的 XHR

6. 如何在页面上实现一个圆形的可点击区域？

7. 如何垂直居中

8. 输入URL到页面展示的全过程

9. BFC是啥，如何触发BFC

10. 行内元素间的空白怎么去除

11. ES6新特性，箭头函数有啥用

12. 跨域以及跨域的解决方案

13. CORS的原理，如何配置。POST跨域的流程

14. ETag与Last-Modified, Expire头信息用途上的区别

    Last-Modified 是 HttpHeader 中的资源的最后修改时间，如果带有 Last-Modified ，下一次发送 Http 请求时，将会发生带 If-modified-since 的 HttpHeader 。如果没有过期，将会收到 304 的响应，从缓存中读取。

    Etag 是 HttpHeader 中代表资源的标签，在服务器端生成。如果带有 Etag ，下一次发送带 Etag 的请求，如果 Etag 没有变化将收到 304 的响应，从缓存中读取。

    Etag 在使用时要注意相同资源多台 Web 服务器的 Etag 的一致性。

    Expire 是 HttpHeader 中代表资源的过期时间，由服务器段设置。如果带有 Expire ，则在 Expire 过期前不会发生 Http 请求，直接从缓存中读取。用户强制 F5 例外。

15. HTTP的方法有哪些（HEAD POST GET PATCH POST DELETE PUT），哪些是幂等的

16. settimeout(fn, 0)的作用，什么时候执行

17. Promise如何实现分支。

实现题

1. 实现一个树形控件（考察递归，Vue可用组件递归实现）

2. 实现一个可编辑的文本框，并可高亮文本框中的关键字。

扩展问题

1. 根据简历中的项目问很多问题，并逐步深入。

2. Babel和Typescript的区别。

3. 如何判断Runtime是Node.js还是浏览器。

4. Express的应用。

5. 使用webpack时，如何使得调试环境和生产环境使用不同的API URL地址。

待续

离职后不知道以后还有没有机会面试前端哈哈哈