纪录一下近来碰上的面试题

js篇

1. 引见一下Array的API/要领，详细到返回值和参数
   join / slice / splice / sort / push一类 / reverse
   经验总结：要讲出来能够拓展的API，拓展话题；要能够切记差别API的返回值，比方reverse是不是返回数组？pop返回值是什么？
2. Array的map与forEach的辨别？可用代码完成辅佐诠释
   辨别在于map返回一个新的数组，而forEach则时在原数组的基础上举行修正（许可对原数组举行修正）。
   forEach合适你不须要转变数据的时刻，如打印、存入数据库，而map合适于你须要对数据举行修正等操纵，还能够连系filter、reduce举行操纵
3. 引见一下事宜绑定
   事宜绑定是指将子元素上的事宜绑定到父元素上，运用事宜冒泡将子元素事宜冒泡到父元素举行处置惩罚，当有多个子元素同时绑定时，能够运用e.target举行辨别

4. 怎样检测对象中是不是存在某个属性

   1. 运用in关键字，该要领会拿到原型链上的属性
   2. 运用对象的hasOwnProperty要领，该要领只能剖断自有属性
   3. 用undefined推断

5. 页面机能优化

   1. 削减Http请求数
   2. 异步加载js文件（动态建立script标签、async、defer），主张async和defer辨别
   3. 浏览器缓存（强缓存、协商缓存）
   4. 运用CDN

   5. DNS预剖析

      预剖析相干标签
      ```
      <!--第一个标签是强迫开启一切a标签的预剖析（包括https）-->
      <meta http-equiv="x-dns-prefetch-control" content="on">
      <!--开启DNS预剖析-->
      <link rel="dns-prefetch" href="//somewhere.com">
      ```
      

6. 写出以下递次输出内容

   var n = 1;
   var a = {
       n: 10,
       fn: function () {
           var n = 100;
           return n + this.n;
       }
   }
   var fn = a.fn;
   
   console.log(a.fn()); // 110
   console.log(fn()); // 101
   console.log(a.fn.call(this)); // 101
   console.log(a.fn.call(a)); // 110

7. 写出递次输出内容

   var a = {n: 10, m: 20};
   var b = a;
   var c = b;
   var d = {...b};
   
   b.n = 30;
   c = {n: 40};
   
   console.log(a.n); // 30
   console.log(b); // {n: 30, m: 20}
   console.log(c); // {n: 40}
   console.log(d); // {n: 10, m: 20}
   console.log(a === b); // true
   console.log(a === d); // false
   console.log(b === c); // false
   console.log(a === c); // false

8. 怎样猎取一个页面上的一切元素
9. 图片懒加载/预加载，同时有10000张图片怎么办？

   现在思绪：运用onscroll+scrollTop

   诘问：onscroll在什么情况下触发？

   相干链接

10. ES5和ES6的继续有什么辨别
11. Web动画的几种罕见体式格局？
12. POST提交数据的几种罕见Content-Type
13. 怎样定义一个要领，经由过程挪用把视频的一帧天生预览图？（能够斟酌Canvas相干）
14. 什么是重放进击，枚举几种罕见的防备手腕？

CSS篇

1. 引见一下position: sticky和fixed的辨别
   定位范例：相对定位（relative）、相对定位（absolute、fixed）、粘性定位（sticky）
   该属性还在试验阶段
   position: sticky（此段援用MDN）

   MDN中position相干内容

   粘性定位能够被认为是相对定位和牢固定位的夹杂。元素在逾越特定阈值前为相对定位，以后为牢固定位。

2. 引见一下Flex规划

   Flex规划即Flexible Box，弹性规划，现在重要运用场景在挪动端，也有部份PC端场景运用，Flex能够很好处理规划的题目，有用处理了以往垂直居中难的题目，能够轻便、完全、相应式的完成种种规划。

   任何一个容器都能够设置为flex规划，设置了以后，子元素的float、clear和vertical-align属性将会失效。

3. Reflow和Repaint
   简朴引见Reflow和Repaint，哪一个会触发哪一个？（触发递次），哪一个能够防止，哪一个时只管削减而不可能防止，css哪些操纵会触发Reflow/Repaint

   Flex by 阮一峰

4. CSS3动画/CSS动画与js动画辨别？（机能辨别？）/CSS机能优化/CSS动画机能优化/js动画引见

后续还会继续举行面试题的积聚~