前端面试题(2020- 2021 年持续更新)

一. 得物 app

1. css 控制显隐方式及区别：

display：none; 隐藏，不占位置，dom存在
opacity：0；透明度为0，事件有效果
visible：hidden；隐藏，位置存在，但实体消失，事件自然也无效果。

2. 手写bind

    Function.prototype.newBind = function (target) {
      let self = this 
      let args = Array.prototype.slice.call(arguments, 1)
      let Temp = function () {
      }
      return function Fn() {
        let _args = Array.prototype.slice.call(arguments, 0);
        Temp.prototype = self.prototype;
        Fn.prototype = new Temp();
        return self.apply(target || window, args.concat(_args))
      }
    }
    // --------------------------------------------------------------
    function show() {
      console.log(this);
      console.log(arguments);
    }
    let A = {
      x: 'x'
    }
    show.bind(A,'aa')('bb')
    show.newBind(A,'00')(1,2,3,4)

3. Object.prototype.toString 为什么不能写成 Object.toString

Object 改写了 toString 方法，所以会调用自己的。

4. 判断普通函数和构造函数

通过 fn.constructor 判断

    function show() {
    }
    let c = show
    let d = new show()
    console.log(c.constructor === Function); // true
    console.log(d.constructor === Function); // false
    console.log(c.constructor === show); // false
    console.log(d.constructor === show); // true

5. es6 的 import 导入和 commonjs 的 requre 导入区别

（引 www.cnblogs.com/bagexiaowen… ）

1. import是ES6标准中的模块化解决方案（因为浏览器支持情况不同，项目中本质是使用node中的babel将es6转码为es5再执行，import会被转码为require）。 require是node中遵循CommonJS规范的模块化解决方案。
1. ES6模块是编译时输出接口，CommonJS模块是运行时加载。
1. ES6模块是动态引用，即导入和导出的值都指向同一个内存地址，所以导入的值会随着导出值变化。CommonJs的模块是对象。导出时是指拷贝，就算导出的值变化了，导入的值也不会变化，如果想要更新值就要重新导入。
1. import语句导入同一个模块如果加载多次只执行一次，require语句导入次数和实际执行次数相同。
1. import必须用在当前模块的顶层，如果在局部作用域内，会报错，es6这样的设计可以提高编译器效率，但没法实现运行时加载。 require可以用在代码的任何地方。
1. 前者是关键词，后者不是
1. require支持动态引入，也就是require(${path}/xx.js)，import目前不支持，但是已有提案
1. ES6模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的。利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中。const isNotModuleScript = this !== undefined。require的模块中this指向window,this === window.

6. Vue 路由区别

（引 www.jianshu.com/p/81ccd1124… ）

深拷贝

    function deepClone(origin, target) {
      var target = target || {}
      for(var prop in origin) {
        if (origin.hasOwnProperty(prop)) {
          if (origin[prop] !== null && typeof origin[prop] == 'object') {
            target[prop] = Array.prototype.toString.call(origin[prop] === '[object Array]' ? [] : {})
            deepClone(origin[prop], target[prop])
          } else {
            target[prop] = origin[prop]
          }
        }
      }
      return target
    }

二. 天壤智能

1. react 的 React useEffect,useCallback,useMemo 区别

useEffect是执行在渲染完成后，而useMemo则是在渲染期间执行的，所以useMemo中不要执行一些有副作用的操作。

（引： segmentfault.com/a/119000002… blog.csdn.net/weixin_4613… ）

2. react 的 setState 之后发生了什么

(引： segmentfault.com/a/119000001… )

3. react 的多事件共同绑定

4. js 的强缓存和协商缓存有哪些

强缓存：
- Expires
- Cacha-Control
协商缓存：
- Last-Modified
- ETag

(引： www.cnblogs.com/garfieldzho… )

5. js 的继承几种方式

1. 原型链继承
1. 借用构造函数继承
1. 组合继承（组合原型链继承和借用构造函数继承）
1. 原型式继承
1. 寄生式继承
1. 寄生组合式继承
1. es6继承 (引： www.cnblogs.com/ranyonsue/p… )

6. webpack4 的 optimization 理解

7. webpack 的 js 怎么打包的

HtmlWebpackPlugin

三. 第一财经

1. js 事件流

捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

2. 判断数组方法

1、通过Object.prototype.toString.call()做判断

function isArray(obj){
　　return Object.prototype.toString.call().slice(8,-1) === 'Array';
};

2、通过原型链来判断

function isArray(obj){
　　return obj.__proto__ === Array.prototype;
};

3、通过es6 Array.isArray()做判断

function isArray(obj){
　　return  Array.isArrray(obj);
};

4、通过instanceof做判断

function isArray(obj){
　　return obj instanceof Array
};

5、通过Array.prototype.isPrototypeOf

function isArray(obj){
　　return Array.prototype.isPrototypeOf(obj)
}

3. 解决跨域

JSONP
- 它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
- 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题
- JSONP从其他域中加载代码执行，如果该域不安全并且夹带一些恶意代码，会存在安全隐患
- 要确定JSONP请求是否失败并不容易
CORS
- 使用简单方便，更为安全
- 支持 POST 请求方式
- CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上
postmessage ifreame

（引 blog.csdn.net/u012501054/… ）

4. http1 http2 区别

Http1.x
- 缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞。
Http1.1
- 持久连接（与Http1其它版本的最大区别）
  - 引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive(对于同一个域名，大多数浏览器允许同时建立6个持久连接)
- 管道机制
  - 即在同一个TCP连接里面，客户端可以同时发送多个请求。
- 分块传输编码
  - 即服务端每产生一块数据，就发送一块，采用”流模式”而取代”缓存模式”。
- 新增请求方式
  - PUT:请求服务器存储一个资源;
  - DELETE：请求服务器删除标识的资源；
  - OPTIONS：请求查询服务器的性能，或者查询与资源相关的选项和需求；
  - TRACE：请求服务器回送收到的请求信息，主要用于测试或诊断；
  - CONNECT：保留将来使用

缺点：
- 虽然允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的。服务器只有处理完一个请求，才会接着处理下一个请求。如果前面的处理特别慢，后面就会有许多请求排队等着。这将导致“队头堵塞”
- 避免方式：一是减少请求数，二是同时多开持久连接

Http/2.0
- 采用二进制格式而非文本格式；
- 完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行；（解决了线头阻塞的问题，与Http1最重要的区别）
- 使用报头压缩，降低开销
- 服务器推送

（引： blog.csdn.net/JAVA_I_want… ）

5. http 和 https 区别

(引： blog.csdn.net/xiaoming100… )

6. 缓存

Cache-Control
Expires -Last-Modified/If-Modified-Since
Etag/If-None-Match

(引： blog.csdn.net/i1373861245… )

7. css 是否阻止 js执行

8. class 经过 bable 转译后原型是怎么处理的

9. 中断 forEach

try {
    var array = ["first","second","third","fourth"];
    
    // 执行到第3次，结束循环
    array.forEach(function(item,index){
        if (item == "third") {
            throw new Error("EndIterative");
        }
        alert(item);// first,sencond
    });
} catch(e) {
    if(e.message!="EndIterative") throw e;
};
// 下面的代码不影响继续执行
alert(10);

四. 银科控股

1. es6 新特性

2. 箭头函数和普通函数区别

3. js 判断类型方法

4. webpack 问题

5. 小程序openId 等

6. 状态码

7. 输入 url 后发生什么

8. react 高阶组件和自定义hooks 区别

9. 性能优化

10. 其他项目问题

五. 平安好医生

1. 怎样形成 BFC

2. 怎样水平垂直居中

3. 怎么样让元素消失

4. 闭包理解

5. promise 理解

6. 状态码

7. 输入 url 后发生什么

8. 定位几种方式

9. 单位区别

10. clientHeight、offsetHeight、区别

11. 手写克隆

12. 手写快速排序

13. 手写jsonp

14. 一个 dom 绑定多个事件，阻止其中一个执行

15. 性能优化

16. 其他项目问题

六. 食亨

1. 为什么减少http 请求可以性能优化。

2. this 指向笔试题

3. 事件轮询笔试题

4. 算法笔试题

5. Map 手写

6.

7.

8.

9.

10.

七. 今日头条

上来直接问你怎么让你的页面性能更好，通过回答的关键词在详细问。

1. ssr 白频时间为什么短

2. 缓存机制， etag 和 last-modify 原理

3. DNS 原理

4. CDN 原理

5. webpack code slipe 原理

6. this 指向面试题

7. 作用域面试题

var a = 1
(function(){
    console(a)
    a = 2
})()

//----------
var a = 1
(function(){
    console(a)
    var a = 2
})()
//----------
var a = 1
(function(){
    console(a)
    let a = 2
})()

8. 回旋字符串最大长度

'saddsadsaadfdaa'
aadfdaa 是回旋字符串

前端面试题(2020- 2021 年持续更新)

一. 得物 app

1. css 控制显隐方式及区别：

2. 手写bind

3. Object.prototype.toString 为什么不能写成 Object.toString

4. 判断普通函数和构造函数

5. es6 的 import 导入和 commonjs 的 requre 导入区别

6. Vue 路由区别

深拷贝

二. 天壤智能

1. react 的 React useEffect,useCallback,useMemo 区别

2. react 的 setState 之后发生了什么

3. react 的 多事件共同绑定

4. js 的强缓存 和 协商缓存 有哪些

5. js 的继承几种方式

6. webpack4 的 optimization 理解

7. webpack 的 js 怎么打包的

三. 第一财经

1. js 事件流

2. 判断数组方法

3. 解决跨域

4. http1 http2 区别

5. http 和 https 区别

6. 缓存

7. css 是否阻止 js执行

8. class 经过 bable 转译后原型是怎么处理的

9. 中断 forEach

四. 银科控股

1. es6 新特性

2. 箭头函数和普通函数区别

3. js 判断类型方法

4. webpack 问题

5. 小程序openId 等

6. 状态码

7. 输入 url 后发生什么

8. react 高阶组件和自定义hooks 区别

9. 性能优化

10. 其他项目问题

五. 平安好医生

1. 怎样形成 BFC

2. 怎样水平垂直居中

3. 怎么样让元素消失

4. 闭包理解

5. promise 理解

6. 状态码

7. 输入 url 后发生什么

8. 定位几种方式

9. 单位区别

10. clientHeight、offsetHeight、区别

11. 手写克隆

12. 手写快速排序

13. 手写jsonp

14. 一个 dom 绑定多个事件，阻止其中一个执行

15. 性能优化

16. 其他项目问题

六. 食亨

1. 为什么 减少http 请求可以性能优化。

2. this 指向笔试题

3. 事件轮询笔试题

4. 算法笔试题

5. Map 手写

6.

7.

8.

9.

10.

七. 今日头条

1. ssr 白频时间为什么短

2. 缓存机制 ， etag 和 last-modify 原理

3. DNS 原理

4. CDN 原理

5. webpack code slipe 原理

6. this 指向面试题

7. 作用域面试题

8. 回旋字符串最大长度

六.

1.

2.

3.

4.

3. react 的多事件共同绑定

4. js 的强缓存和协商缓存有哪些

1. 为什么减少http 请求可以性能优化。

2. 缓存机制， etag 和 last-modify 原理