小滴课堂22年新版互联网大厂前端高频面试题（5）~持续更新中

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。 随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、你知道JS中的作用域和作用域链是什么吗？

回答

（一）思路

1、作用域

• 可访问变量，对象，函数的集合

2、分类

（1）全局作用域

• 全局变量定义在函数外部，具有全局作⽤域

（2）函数作用域（局部作用域）

• 局部变量定义在函数内部，具有局部作⽤域

（3）块级作域（ES6的let、const）

• 在 {} 中使⽤ES6的let、const⽅式声明，具有块级作用域

3、代码示例

function A() {
 var a = 'a函数变量';
 function B() {
 var b = 'b函数变量';
 }
 B();
}
var c = '全局变量'; A();

4、图解

5、连环问

执行上下文和作用域有什么区别？

函数定义时，作用域就已经确认了，每次函数调用时与变量的访问有关， 并且每次调用都是独立的而执⾏上下文主要是关键字this的值，这个是由函数运⾏时决定的，简单来说就是谁调用此函数，this就指向谁

二、你知道setState是同步还是异步吗？

回答

（一）思路

1、setState既可以是异步也可以是同步的，在不同的场景下表现不同

（1）异步

• 合成事件（onClick、onChange）

import React, { Component } from 'react';
class Test extends Component {
 state = { xd: 0 };
 handleClick = () => {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 };
 render() {
 return <div onClick={this.handleClick}>{`点击次数:
${this.state.xd}`}</div>;
 } }
export default Test;

• 生命周期函数

componentDidMount() {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
}

2、同步

（1）原生事件

handleClick = () => {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
};
componentDidMount() {
 document.body.addEventListener('click', this.handleClick);
}

（2）setTimeout函数

componentDidMount() {
 setTimeout(() => {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 }, 1000);
}

3、setState的批量更新（异步）

class Test extends Component {
 state = { xd: 0 };
 componentDidMount() {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 setTimeout(() => {
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 this.setState({ xd: this.state.xd + 1 });
 console.log(this.state.xd);
 }, 1000);
 }
 render() {
 return <div>{this.state.xd}</div>;
 }
}

三、你知道浏览器输入url后经历了哪些流程吗？

回答

（一）思路

1、浏览器输入⼀个url到用户看到结果，中间经过哪些流程

 1、浏览器输入url, 解析url地址是否合法
　　2、浏览器检查是否有缓存, 如果有直接显示。如果没有跳到第三步
　　3、在发送http请求前，需要域名解析（DNS解析），解析获取对应过的ip地址
　　4、浏览器向服务器发起tcp链接，完成tcp三次握手
　　5、握手成功后，浏览器向服务器发送http请求
　　6、服务器收到处理的请求，将数据返回至浏览器
　　7、浏览器收到http响应
　　
　　8、四次挥手（TCP）
　　9、浏览器解析响应。如果响应可以缓存，则存入缓存
　　10、浏览器进行页面渲染

2、浏览器页面渲染

浏览器获取HTML⽂件，然后对文件进⾏解析，形成DOM Tree

与此同时，进行CSS解析，⽣成CSS Tree

接着将DOM Tree与CSS Tree合成为 Render Tree

接着进入布局（Layout）阶段，也就是为每个节点分配⼀个应出现在屏幕上的确切坐标

随后调⽤GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来

四、你知道如何进行CSS移动端的适配吗？

回答

（一）思路

1、实现

• 第⼀步设置页面视口

<meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">

2、第⼆步配置rem单位

（1）安装postcss-pxtorem，⾃动将 px 转换成 rem 单位的插件

cnpm install postcss-pxtorem@5.1.1 -S

• 安装amfe-flexible，自动检测当前设备屏幕宽度serveWidth，设置html里面的font-szie为serveWidth/10

  cnpm install amfe-flexible -S
  

• 文件配置

// vue.config.js
module.exports = {
 css: {
 loaderOptions: {
 postcss: {
 plugins: [
 require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'] }),
 ],
 },
 },
 },
};

// main.js
import 'amfe-flexible';

五、前端高级面试题讲述你对于函数柯里化的理解

回答

⼀般面试官的考察函数柯里化的套路基本⼀致，首先问你是否熟悉ES6的箭头函数，然后套路就开始了，先出⼀个箭头函数的题目给你转换会普通函数如下

请把这个箭头函数转换回普通函数 var A=(a)=>(b)=>{return a+b}

转换后的结果：

var A = function (a) {
 return function (b) {
return a+ b
 }
 }

如果这个转换都不会，那这道题基本结束了，证明你ES6箭头函数不过关

如果转换成功之后会继续考察见过这种写法吗？

没错，这个就是⾼阶函数的⼀种特殊写法，函数柯里化

调用时这样条用A(参数⼀)(参数二)

接下来继续问这种函数柯里化的写法跟我们平时传两个参数A(参数⼀，参数⼆)有什么不同，这样写的好处是什么

好处有：参数复用，提前预支接下来要做的事情，最大的好处就是解耦逻辑，让逻辑更清晰

注意：这题⼀般是⾼级前端⾯试考察⽐较多，要求你对

ES6熟悉和对解耦的思想有深入的了解，同时还要求你熟悉函数式编程