上次分享的面试总结，因工作原因只整理了一半，这次补上Javascript部分，内容主要分为两部分：面试中遇到的、在复习过程中看到认为值得加深巩固的; 如有理解的错误或不足之处，欢迎留言纠错、斧正，@IT·平头哥联盟?首席填坑官，我是苏南(South·Su) ^_^～
接上一篇的链接：那些年你踩过的坑，都在这里了～Html/CSS
Javascript
1、请将下列b函数进行修改，保证每次调用a都能+1（考闭包）:
2、js有哪些基本数据类型：
ECMAScript 标准定义有7种数据类型：
- Boolean
- Null
- Undefined
- Number
- String
- Symbol :（ECMAScript 6 新定义 ，Symbol 生成一个全局唯一、表示独一无二的值）
- Object :（Array、Function、Object）
3、用js将 386485473.88 转换为 386,485,473.88（千位分割符）：
4、js的 for 跟for in 循环它们之间的区别？
- 遍历数组时的异同： for循环 数组下标的typeof类型:number, for in 循环数组下标的typeof类型:string
- 遍历对象时的异同：for循环 无法用于循环对象，获取不到obj.length; for in 循环遍历对象的属性时，原型链上的所有属性都将被访问，解决方案：使用hasOwnProperty方法过滤或Object.keys会返回自身可枚举属性组成的数组
5、给table表格中的每个td绑定事件，td数量为1000+，写一下你的思路(事件委托题)：
6、js把一串字符串去重(能统计出字符重复次数更佳)，列出你的思路（两种以上）：
7、项目上线前，你们做过哪些性能优化：
- 图片预加载，css样式表放在顶部且link链式引入，javascript放在底部body结束标签前;
- 使用dns-prefetch对项目中用到的域名进行 DNS 预解析，减少 DNS 查询，如： ;
- 减少http请求次数:图片静态资源使用CDN托管;
- API接口数据设置缓存，CSS Sprites/SVG Sprites(如有疑惑：该如何以正确的姿势插入SVG Sprites? 这篇说的很详细), JS、CSS源码压缩、图片大小控制合适，使用iconfont(+ 字体图标)或SVG，它们比图片更小更清晰，网页Gzip压缩;
- 减少DOM操作次数，优化javascript性能;
- 减少 DOM 元素数量，合理利用:after、:before等伪类;
- 避免重定向、图片懒加载;前后端分离开发，资源按需加载，最好能做到首屏直出(即服务端渲染);
- 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性) ;
- 多域名分发划分内容到不同域名，解决浏览器域名请求并发数问题，同时也解决了请求默认携带的cookie问题;
- 尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;
- 只想到这些，欢迎补充……
8、你对重绘、重排的理解？
- 首先网页数次渲染生成时，这个可称为重排;
- 修改DOM、样式表、用户事件或行为（鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）这些都会导致页面重新渲染，那么重新渲染，就需要重新生成布局和重新绘制节点，前者叫做"重排"，后者"重绘";
- 减少或集中对页面的操作，即多次操作集中在一起执行;
- 总之可以简单总结为：重绘不一定会重排，但重排必然为会重绘。
- 更详细的可以看阮老师分析
9、有用过promise吗？请写出下列代码的执行结果，并写出你的理解思路：
- 首先要讲一下，js是单线程执行，那么代码的执行就有先后;
- 有先后，那就要有规则(排队)，不然就乱套了，那么如何分先后呢？大体分两种：同步、异步;
- 同步很好理解，就不用多说了(我就是老大,你们都要给我让路);
- 异步(定时器[setTimeout ，setInterval]、事件、ajax、promise等)，说到异步又要细分宏任务、微任务两种机制，
- 宏任务：js异步执行过程中遇到宏任务，就先执行宏任务，将宏任务加入执行的队列(event queue),然后再去执行微任务;
- 微任务：js异步执行过程中遇到微任务，也会将任务加入执行的队列(event queue)，但是注意这两个queue身份是不一样的，不是你先进来，就你先出去的（就像宫里的皇上选妃侍寝一样，不是你先进宫(或先来排队)就先宠幸的 ），真执行的时候是先微任务里拿对应回调函数，然后才轮到宏任务的队列回调执行的;
- 理解了这个顺序，那上面的结果也就不难懂了。
说细步骤如下：
1、setTimeout 是异步，不会立即执行，加入执行队列;
2、new Promise 会立即执行 输出 2、3，而在2、3之间执行了resolve 也就是微任务;
3、再到console.log(5)了，输出5;
4、然后异步里的微任务先出，那就得到4;
5、最后执行宏任务 setTimeout 输出 1;
6、如有错误欢迎纠正！
10、new SouthSu() 在这个过程中都做了些什么？
11、工作中如果让你使用js实现一个持续的动画，你会怎么做(比如转盘抽奖)？？
- js来实现动画，第一时间想到的就是定时器(setTimeout、setInterval);
- 后面想起来js有个 window.requestAnimationFrame ，当时只是说了记得有这么一个API，具体的细节没能答上，面试官直言想听的就是这个API的使用，好吧是我准备的不够充分，希望其他同学不再犯同样错误;
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用,回调的次数通常是每秒60次，是大多数浏览器通常匹配 W3C 所建议的刷新频率。在大多数浏览器里，当运行在后台标签页或者隐藏的<iframe> 里时，requestAnimationFrame() 会暂停调用以提升性能和电池寿命。
小结：以往项目开发中大数人可能都是第一时间选择JS定时器setInterval 或者setTimeout 来控制的动画每隔一段时间刷新元素的状态，来达到自己所想要的动画效果，但是这种方式并不能准确地控制动画帧率，因为这是开发者主动要求浏览器去绘制，它这可能会因为动画控制的时间、绘制的频率、浏览器的特性等而导致丢帧的问题; requestAnimationFrame 是浏览器什么时候要开始绘制了浏览器它自己知道，通过requestAnimationFrame告诉我们，这样就不会出现重复绘制丢失的问题。
11、如何设置http缓存？
1)、Expires
- Expires的值为服务端返回的到期时间，响应时告诉浏览器可以直接从浏览器缓存中读取无需再次请求。 缺点：返回的是服务端的时间，比较的时间是客户端的时间，如果时间不一致有可能出现错误。
2)、Cache-Control
- Cache-Control可设置的字段有：
- private：客户端可以缓存
- public：客户端和代理服务器都可以缓存
- max-age=xxx：缓存内容在xxx秒后失效
- no-cache：需要用另一种缓存策略来验证缓存(ETag,Last-Modified)
- no-store：不进行缓存
- Last-Modified：浏览器请求获得文件后，服务器返回该文件的最后修改时间Last-Modified，下一次请求会带上If-Modified-Since标识，如果If-Modified-Since等于服务器的文件修改时间，则表示文件没有修改，返回304状态码，浏览器从浏览器缓存中读取文件。如果If-Modified-Since小于服务端的文件修改时间，则浏览器会重新发送请求获取文件，返回状态码200。
- ETag：服务器文件的一个唯一标识，例如对文件内容取md5值作为ETag的字段返回给浏览器。当文件变化时ETag的值也会发生变化。下次请求会带上If-None-Match即浏览器保留的ETag值，如果发送了变化，则文件被修改，需要重新请求，返回200状态码。反之浏览器就从缓存中读取文件，返回304状态码。
总结:——几者之间的关系
- 当Cache-Control设置为max-age=xx并且同事设置Expires时，Cache-Control的优先级更高
- 当ETag和Last-Modified同时存在时，服务器先会检查ETag，然后再检查Last-Modified，最终决定返回304还是200
- 该题由 本文由@IT·平头哥联盟-成员(ZodiacSyndicate )补充
12、随机打乱一个数组
- 思路：从数组的最后一项开始，随机选择前面的一个元素进行交换，然后一步步往前交换
13、用React实现一个显示鼠标位置的高阶组件
文本将持续更新，整理收集自己/群友的面经分享给大家，觉得不错记得 关注我们哦，感谢！
对前端的技术感兴趣/或想入门前端的同学可关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费学习资料，跟我们一起成长，欢迎来撩哦～
作者：苏南 - 首席填坑官
来源：@IT·平头哥联盟
本文原创，著作权归作者所有。商业转载请联系`@IT·平头哥联盟`获得授权，非商业转载请注明原链接及出处。