入门前端应该要知道的理论50道题

666666郎
191 阅读21分钟

好吧，现在你是一名大二或者大三的学生，你决定选择前端作为以后的方向，这时候你大概会干些什么呢？我想大概率你不会去买一本《JavaScript高级程序设计》或者《前端性能优化原理与实践》，然后一页一页看。比较真实的情况是你会打开BiliBili，然后跟着里面一个叫Pink老师的人一直做到做完一个静态网页，这时候你很开心自己已经上手前端了！其实这样的想法无可厚非，毕竟前端的职位就是和用户交互嘛，而你已经做到了，虽然是复刻了前端发展历程？但是既然已经有了一些工程能力，该知道的要知道一点，理论也要跟上你的工程能力啊。所以，这是我准备的一个新手入门前端的要知道的50道题，大概是切图仔水平，期望薪资大概是5K.
题目：JavaScript（25题）+ 计算机网络（20题） + css&html (5题）

Js

数据类型

1.JavaScript有哪些数据类型，它们的区别

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

  • Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
  • BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型：

  • 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
  • 堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

  • 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
  • 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
2.数据类型检测的方式有哪些

（1）typeof 其中数组、对象、null都会被判断为object，其他判断都正确。
（2）instanceof instanceof可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。 可以看到，instanceof只能正确判断引用数据类型，而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
（3） constructor

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

（4）Object.prototype.toString.call() Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型

3.判断数组的方式有哪些
  • 通过Object.prototype.toString.call()做判断
Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
  • 通过原型链做判断
obj.__proto__ === Array.prototype;
  • 通过ES6的Array.isArray()做判断
Array.isArrray(obj);
  • 通过instanceof做判断
obj instanceof Array
  • 通过Array.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(obj)
4.null和undefined区别

undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

5.为什么0.1+0.2 ! == 0.3

计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。0.1的二进制是0.0001100110011001100...（1100循环），0.2的二进制是：0.00110011001100...（1100循环），这两个数的二进制都是无限循环的数。那JavaScript是如何处理无限循环的二进制小数呢？

一般我们认为数字包括整数和小数，但是在 JavaScript 中只有一种数字类型：Number，它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的需要舍去，遵从“0舍1入”的原则。

6.== 操作符的强制类型转换规则？

对于 == 来说，如果对比双方的类型不一样，就会进行类型转换。假如对比 x 和 y 是否相同，就会进行如下判断流程：

  1. 首先会判断两者类型是否**相同，**相同的话就比较两者的大小；
  2. 类型不相同的话，就会进行类型转换；
  3. 会先判断是否在对比 null 和 undefined，是的话就会返回 true
  4. 判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number
  5. 判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断
  6. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断

JS方法

1.数组有哪些原生方法

  • 数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。

  • 数组尾部操作的方法 pop() 和 push()，push 方法可以传入多个参数。

  • 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较，传入前后两个值，如果返回值为正数，则交换两个参数的位置。

  • 数组连接的方法 concat() ，返回的是拼接好的数组，不影响原数组。

  • 数组截取办法 slice()，用于截取数组中的一部分返回，不影响原数组。

  • 数组插入方法 splice()，影响原数组查找特定项的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法

  • 数组归并方法 reduce() 和 reduceRight() 方法

2.map和Object的区别

意外的键：Map默认情况不包含任何键，只包含显式插入的键。Object 有一个原型, 原型链上的键名有可能和自己在对象上的设置的键名产生冲突。
键的类型：Map的键可以是任意值，包括函数、对象或任意基本类型。Object 的键必须是 String 或是Symbol。 键的顺寻：Map 中的 key是有序的。因此，当迭代的时候，Map 对象以插入的顺序返回键值。Object 的键是无序的
size:Map 的键值对个数可以轻易地通过size 属性获取.Object 的键值对个数只能手动计算
迭代:Map 是 iterable 的，所以可以直接被迭代。迭代Object需要以某种方式获取它的键然后才能迭代。
性能:在频繁增删键值对的场景下表现更好。在频繁添加和删除键值对的场景下未作出优化

3. JavaScript有哪些内置对象

（1）值属性，这些全局属性返回一个简单值，这些值没有自己的属性和方法。例如 Infinity、NaN、undefined、null 字面量

（2）函数属性，全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。例如 eval()、parseFloat()、parseInt() 等

（3）基本对象，基本对象是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。例如 Object、Function、Boolean、Symbol、Error 等

（4）数字和日期对象，用来表示数字、日期和执行数学计算的对象。例如 Number、Math、Date

（5）字符串，用来表示和操作字符串的对象。例如 String、RegExp

（6）可索引的集合对象，这些对象表示按照索引值来排序的数据集合，包括数组和类型数组，以及类数组结构的对象。例如 Array

（7）使用键的集合对象，这些集合对象在存储数据时会使用到键，支持按照插入顺序来迭代元素。 例如 Map、Set、WeakMap、WeakSet

（8）矢量集合，SIMD 矢量集合中的数据会被组织为一个数据序列。 例如 SIMD 等

（9）结构化数据，这些对象用来表示和操作结构化的缓冲区数据，或使用 JSON 编码的数据。例如 JSON 等

（10）控制抽象对象 例如 Promise、Generator 等

（11）反射。例如 Reflect、Proxy

（12）国际化，为了支持多语言处理而加入 ECMAScript 的对象。例如 Intl、Intl.Collator 等

（13）WebAssembly

4.JavaScript 类数组对象的定义？

一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果

5.什么是 DOM 和 BOM？

  • DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。

  • BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

6.for...in和for...of的区别

for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下

  • for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
  • for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
  • 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结： for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

计算机网络

HTTP

1.HTTP状态码

1.200 表示客户端发来的请求被服务器端正常处理了。
2.301 永久重定向。该状态码表示请求的资源已经被分配了新的 URI，以后应使用资源指定的 URI。
3.302 暂时重定向。该状态码表示请求的资源被分配到了新的 URI，希望用户（本次）能使用新的 URI 访问资源。
4.304 缓存重定向。该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件情况。
5.400 该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
6.403 该状态码表明请求资源的访问被服务器拒绝了，服务器端没有必要给出详细理由，但是可以在响应报文实体的主体中进行说明。
7.404 该状态码表明服务器上无法找到请求的资源。除此之外，也可以在服务器端拒绝请求且不想说明理由时使用。
8.500 该状态码表明服务器端在执行请求时发生了错误。也有可能是 Web 应用存在的 bug 或某些临时的故障。
9.502 该状态码表明扮演网关或代理角色的服务器，从上游服务器中接收到的响应是无效的。
10.503 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。如果事先得知解除以上状况需要的时间，最好写入 RetryAfter 首部字段再返回给客户端。
11.504 该状态码表示网关或者代理的服务器无法在规定的时间内获得想要的响应。

2.常见的HTTP请求方法

  • GET: 向服务器获取数据；

  • POST：将实体提交到指定的资源，通常会造成服务器资源的修改；

  • PUT：上传文件，更新数据；

  • DELETE：删除服务器上的对象；

  • HEAD：获取报文首部，与GET相比，不返回报文主体部分；

  • OPTIONS：询问支持的请求方法，用来跨域请求；

  • CONNECT：要求在与代理服务器通信时建立隧道，使用隧道进行TCP通信；

  • TRACE: 回显服务器收到的请求，主要⽤于测试或诊断。

3. HTTP和HTTPS协议的区别

HTTP和HTTPS协议的主要区别如下：

  • HTTPS协议需要CA证书，费用较高；而HTTP协议不需要；
  • HTTP协议是超文本传输协议，信息是明文传输的，HTTPS则是具有安全性的SSL加密传输协议；
  • 使用不同的连接方式，端口也不同，HTTP协议端口是80，HTTPS协议端口是443；
  • HTTP协议连接很简单，是无状态的；HTTPS协议是有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议，比HTTP更加安全。
4.GET和POST的请求的区别

  • 应用场景： GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源。而 Post 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景，比如注册用户这一类的操作。

  • 是否缓存： 因为两者应用场景不同，浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。

  • 发送的报文格式： Get 请求的报文中实体部分为空，Post 请求的报文中实体部分一般为向服务器发送的数据。

  • 安全性： Get 请求可以将请求的参数放入 url 中向服务器发送，这样的做法相对于 Post 请求来说是不太安全的，因为请求的 url 会被保留在历史记录中。

  • 请求长度： 浏览器由于对 url 长度的限制，所以会影响 get 请求发送数据时的长度。这个限制是浏览器规定的，并不是 RFC 规定的。

  • 参数类型： post 的参数传递支持更多的数据类型。

5.POST和PUT请求的区别

  • PUT请求是向服务器端发送数据，从而修改数据的内容，但是不会增加数据的种类等，也就是说无论进行多少次PUT操作，其结果并没有不同。（可以理解为时更新数据）

  • POST请求是向服务器端发送数据，该请求会改变数据的种类等资源，它会创建新的内容。（可以理解为是创建数据）

6.常见的HTTP请求头

  • Accept:浏览器能够处理的内容类型

  • Accept-Charset:浏览器能够显示的字符集

  • Accept-Encoding：浏览器能够处理的压缩编码

  • Accept-Language：浏览器当前设置的语言

  • Connection：浏览器与服务器之间连接的类型

  • Cookie：当前页面设置的任何Cookie

  • Host：发出请求的页面所在的域

  • Referer：发出请求的页面的URL

  • User-Agent：浏览器的用户代理字符串

7.常见的HTTP响应头
  • Date：表示消息发送的时间，时间的描述格式由rfc822定义
  • server:服务器名称
  • Connection：浏览器与服务器之间连接的类型
  • Cache-Control：控制HTTP缓存
  • content-type:表示后面的文档属于什么MIME类型
8.常见的 Content-Type 属性值有以下四种：

（1）application/x-www-form-urlencoded：浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。该种方式提交的数据放在 body 里面，数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL转码。

（2）multipart/form-data：该种方式也是一个常见的 POST 提交方式，通常表单上传文件时使用该种方式。

（3）application/json：服务器消息主体是序列化后的 JSON 字符串。

（4）text/xml：该种方式主要用来提交 XML 格式的数据。

9.HTTP请求报文的是什么样的？

请求报⽂有4部分组成:

  • 请求⾏

  • 请求头部

  • 空⾏

  • 请求体 （1）请求⾏包括：请求⽅法字段、URL字段、HTTP协议版本字段。它们⽤空格分隔。例如，GET /index.html HTTP/1.1。 （2）请求头部:请求头部由关键字/值对组成，每⾏⼀对，关键字和值⽤英⽂冒号“:”分隔

  • User-Agent：产⽣请求的浏览器类型。

  • Accept：客户端可识别的内容类型列表。

  • Host：请求的主机名，允许多个域名同处⼀个IP地址，即虚拟主机。

（3）请求体: post put等请求携带的数据

10.HTTP响应报文的是什么样的？

请求报⽂有4部分组成:

  • 响应⾏
  • 响应头
  • 空⾏
  • 响应体
  • 响应⾏：由网络协议版本，状态码和状态码的原因短语组成，例如 HTTP/1.1 200 OK 。
  • 响应头：响应部⾸组成
  • 响应体：服务器响应的数据

TCP

1.TCP三次握手的过程
  • 第一次握手：客户端给服务端发一个 SYN 报文，并指明客户端的初始化序列号 ISN，此时客户端处于 SYN_SEND 状态。
  • 第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，并且也是指定了自己的初始化序列号 ISN。同时会把客户端的 ISN + 1 作为ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态。
  • 第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，当然，也是一样把服务器的 ISN + 1 作为 ACK 的值，表示已经收到了服务端的 SYN 报文，此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于 ESTABLISHED 状态，此时，双方已建立起了连接。
2.为什么是三次握手？

TCP 三次握手的建立连接的过程就是相互确认初始序号的过程，告诉对方，什么样序号的报文段能够被正确接收。 第三次握手的作用是客户端对服务器端的初始序号的确认。如果只使用两次握手，那么服务器就没有办法知道自己的序号是否 已被确认。同时这样也是为了防止失效的请求报文段被服务器接收，而出现错误的情况。

3.四次挥手
  • 第一次挥手： 客户端会发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
  • 第二次挥手：服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。
  • 第三次挥手：如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服务端处于 LAST_ACK 的状态。 第四次挥手：客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态，服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。
4.为什么是四次挥手呢？

TCP 使用四次挥手的原因是因为 TCP 的连接是全双工的，所以需要双方分别释放到对方的连接，单独一方的连接释放，只代 表不能再向对方发送数据，连接处于的是半释放的状态。 最后一次挥手中，客户端会等待一段时间再关闭的原因，是为了防止发送给服务器的确认报文段丢失或者出错，从而导致服务器 端不能正常关闭。

5.TCP和UDP的区别

1.UDP无连接，TCP面向连接
2.UDP不可靠传输，TCP可靠传输（数据顺序和正确性），使用流量控制和拥塞控制
3.UDP支持一对一，一对多，多对一和多对多交互通信,TCP只能是一对一通信
4.UDP面向报文，TCP面向字节流
5.UDP首部开销小，仅8字节，TCP首部最小20字节，最大60字节

6.TCP和UDP的使用场景

  • TCP应用场景： 效率要求相对低，但对准确性要求相对高的场景。因为传输中需要对数据确认、重发、排序等操作，相比之下效率没有UDP高。例如：文件传输（准确高要求高、但是速度可以相对慢）、接受邮件、远程登录。

  • UDP应用场景： 效率要求相对高，对准确性要求相对低的场景。例如：QQ聊天、在线视频、网络语音电话（即时通讯，速度要求高，但是出现偶尔断续不是太大问题，并且此处完全不可以使用重发机制）、广播通信（广播、多播）。

7.TCP的重传机制

由于TCP的下层网络（网络层）可能出现丢失、重复或失序的情况，TCP协议提供可靠数据传输服务。为保证数据传输的正确性，TCP会重传其认为已丢失（包括报文中的比特错误）的包。TCP使用两套独立的机制来完成重传，一是基于时间，二是基于确认信息。

TCP在发送一个数据之后，就开启一个定时器，若是在这个时间内没有收到发送数据的ACK确认报文，则对该报文进行重传，在达到一定次数还没有成功时放弃并发送一个复位信号。

8.TCP的拥塞控制机制

TCP的拥塞控制机制主要是以下四种机制：

  • 慢启动（慢开始）
  • 拥塞避免
  • 快速重传
  • 快速恢复
9.TCP的流量控制机制

一般来说，流量控制就是为了让发送方发送数据的速度不要太快，要让接收方来得及接收。TCP采用大小可变的滑动窗口进行流量控制，窗口大小的单位是字节。这里说的窗口大小其实就是每次传输的数据大小。

10.TCP的可靠运输机制

TCP 的可靠传输机制是基于连续 ARQ 协议和滑动窗口协议的。

css&html

html

1.行内元素有哪些，块级元素有哪些？

行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

盒模型

1.什么是盒模型?

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

  • 标准盒模型的width和height属性的范围只包含了content
  • IE盒模型的width和height属性的范围包含了border、padding和content。

可以设置box-sizing 为content-box 或者border-box 来控制。

2.选择器的权重

id选择器 > 类选择器=属性选择器=伪类选择器 > 标签选择器=伪元素选择器 > 通配符选择器=后代选择器=子代选择器=相邻兄弟选择器

3.选择器的规则
  1. ！importent 的权重最高
  2. 优先级相同的话，最后出现的样式生效
  3. 继承得到的样式优先级最低
  4. 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

浮动

4.为什么要清除浮动？
  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素会跟随其后
  • 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构
5.清除浮动的方法
  • 给父级div定义height属性
  • 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
  • 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
  • 使用 :after 伪元素
avatar
文章
阅读
粉丝