前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）

文章目录

• 前言
• 第一回合
• 一、知识点：cookie（21/09/06）
• 二、知识点：节流和防抖（21/09/07）
• 三、知识点：var和let以及const（21/09/08）
• 四：知识点：深拷贝和浅拷贝（21/09/09）
• 五、知识点：作用域和作用域链（21/09/10）
• 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11）
• 七、知识点：重排和重绘（21/09/12）
• 八、知识点：TCP和UDP（21/09/13）
• 九、知识点：三次握手（21/09/15）
• 十、知识点：绝对定位和相对定位（21/09/16）
• 十一、知识点:浏览器内核和浏览器的作用（21/09/17）
• 十二、知识点：线程和进程（21/09/21）
• 十三、知识点：CSRF和XSS攻击以及如何预防（21/09/21）
• 十四、知识点：DOM 事件流（21/09/22）
• 十五、知识点：为什么JavaScript是单线程（21/09/23）
• 十六、知识点：MVVM和MVC（21/09/24）
• 十七、知识点：vue的生命周期（21/09/26）
• 十八、知识点：事件循环解决非堵塞问题（21/09/27）
• 十九、知识点：什么是HTTP（21/09/28）
• 二十、知识点：BFC（21/09/29）
• 第二回合
• 一、知识点：伪元素和伪类（2021/11/23）
• 二、知识点：关于const的进一步认识（2021/11/24）
• 三、知识点：vue中的ref（2021/11/25）
• 四、知识点：$nextTick的使用（2021/11/26）
• 五、知识点：defer和async（2021/11/27）
• 六、知识点：函数声明和函数表达式（2021/11/27）
• 七、知识点：Canvas和SVG的区别（2021/11/28）
• 八、知识点：基本数据类型（2021/11/29）
• 九、知识点：computed和watch的区别（2021/11/30）
• 十、知识点：v-show和v-if的区别（2021/11/31）
• 十一、知识点：iframe有那些缺点？（2021/12/01）
• 十二、知识点：vue 的 Scoped 原理（2021/12/02）
• 十三、知识点：CSS选择器及其优先级（2021/12/03）
• 十四、知识点：简单请求和复杂请求（2021/12/04）
• 十五、知识点：箭头函数和普通函数什么区别？（2021/12/05）
• 十六、知识点：文档声明（Doctype）和（!Doctype html）有何作用？严格模式与混杂模式如何区分？（2021/12/06）
• 十七、知识点：改变this的指向的函数的三个方法（bind / call / apply）（2021/12/07）
• 十八、知识点：图片格式的有缺点（2021/12/08）
• 十九、知识点：typeof NaN的结果是什么？（2021/12/09）
• 二十、知识点：link与@import的区别（2021/12/10）
• 二十一、知识点：隐藏元素的方法有哪些（2021/12/11）
• 二十二、知识点：window.onload和DOMContentLoaded的区别（2021/12/12）
• 二十三、知识点：display: none与visibility: hidden的区别（2021/12/13）
• 二十四、知识点：前端解决跨域的几种方法（2021/12/14）
• 二十五、知识点：为什么基本数据类型保存在栈中，而引用数据类型保存在堆中（2021/12/15）
• 二十六、知识点：git bash和windows里的cmd区别？（2021/12/16）
• 二十七、知识点：CSS position 有哪些？（2021/12/17）
• 二十八、知识点：HTML页面中id和class有什么区别（2021/12/18）
• 二十九、知识点：px、em、rem的区别及使用场景（2021/12/19）
• 三十、知识点：语言类型（2021/12/20）
• 三十一、知识点：如何实现字体小于12px（2021/12/21）
• 三十二、知识点：堆的实现（2021/12/22）
• 三十三、知识点：div居中的几种方式（2021/12/23）
• 三十四、知识点：样式穿透（2021/12/24）
• 三十五、知识点：强缓存和协商缓存（2021/12/25）
• 三十六、知识点：前端js日期时间格式转换（2021/12/26）
• 三十七、知识点：src 和 href 的区别（2021/12/27）
• 三十八、知识点：前端命名方式特点建议（2021/12/28）
• 三十九、知识点：关于vue中的插槽使用（2021/12/29）
• 四十、知识点：判断数据类型的方法（2021/12/30）
• 四十一、知识点：git pull 和 git fetch 有什么区别？（2021/01/01）
• 四十二、知识点：vuex的简单回顾（2022/01/02）
• 四十三、知识点：GET和POST的区别（2022/01/03）
• 四十四、知识点：VUE过滤器（2022/01/04）
• 四十五、知识点：Vue事件总线（EventBus）使用详细介绍（2022/01/05）
• 四十六、知识点：vue路由传参（2022/01/06）
• 四十七、知识点：解构多层对象嵌套（2022/01/04）
• 四十八、知识点：简单认识Vue中hash模式和history模式的区别（2022/01/08）
• 四十九、知识点：CSS属性选择器（2022/01/09）
• 五十、知识点：Set和Map（2022/01/10）
• 五十一、知识点：一道宏任务和微任务的测试题（2022/01/11）
• 五十二、知识点：函数的length是多少？（2022/01/12）
• 五十三、知识点：关于一段代码执行前的“编译”（2022/01/13）
• 五十四、知识点：LHS和RHS（2022/01/14）
• 五十五、知识点：关于二分法的两个需要注意到的地方（2022/01/15）
• 第三回合
• 一、知识点：VUE中 keep-alive的学习（2022/02/15）
• 二、知识点：VUE的双向绑定（2022/02/16）
• 三、知识点：v-if和v-for为什么不建议一起使用呢?（2022/02/17）
• 四、知识点：HTML5 离线存储（2022/02/18）
• 五、知识点：实现一个三角形几种简单方式（2022/02/19）
• 六、知识点：TCP 如何保证有效传输及拥塞控制原理（2022/02/20）
• 七、知识点：AST抽象语法树（2022/02/21）
• 八、知识点：虚拟DOM树的实现（2022/02/21）

---

前言

第一回： 要坚持一件事，除非出于爱好，本就枯乏无味的。但是，一个人或许很难坚持下去，两个人的话就能互相扶持，坚持下去了。本文简单记录，我和我的小伙伴，每天分享学习的知识点。（2021/09/06）

第二回：上面的大概两个人就坚持了一个月不到吧，其实群里每天就只是我在说而已，另外个小伙伴老是各种问题吧，当然我也没有在意，学习本就是一个人的事，再到后面这次，和之前一个阿里前端训练营的五个小伙伴的，结业之后我又提议每日分享，开始是很积极的，大概就一个月吧~~~就不在见大家写了，现在回头补上每次的分享吧，坚持学习真的很有意思的事，你不会一下子见到效果，但是某一天回顾，你会发现这个点，你了解的更多，更深入了~（2021/11/23）

第三回：我呢，一直觉得自己不算很自律吧~~（谦虚点哈，哈哈哈哈）所以我喜欢找伴一起学习，这回我加了一个社群般的学习组织，哈哈哈，真的不错，一堆学习的人，学习有氛围多舒服呀。这一回合继续每天的学习和分享。（2022/01/12）

备注说明：关于分享我也会尽量从为什么，是什么，怎么做来说，现在的排版的话是没有对内容分类的，每天是想到啥就说啥，后面会对他们分类整理的，我也会尽量对每个知识点去深入，所以有些点下面会有相关文章的链接~同时第二回合的内容有部分是一起每日分享的小伙伴分享的噢，感谢他们的付出！

---

第一回合

一、知识点：cookie（21/09/06）

因为什么而诞生的：

首先http是无状态的，那么就没办法记录用户的状态，比如是否登录。举个例子我们登录淘宝网页后，当我们打开商品的详细页，我们也还是登录的，而不会是变为未登录。这里就用到了cookie

如何实现，解决了什么：

当我们第一次向服务端请求时，服务端就会创建cookie，该cookie会包含用户信息等，并且返回给客户端。客户端存储在本地，当客户端再次访问该服务端时，就会把该cookie一起添加到http请求中，发送到服务器，就可以识别当前用户是否登录

同类的存在，区别

类似的浏览器存储还有session,localStorage,sessionStorage需要了解的。比较多，这里就不做深入了，但是是需要明白他们的区别的和使用场景的。

一篇介绍的文章：浏览器存储中的存储 cookie, session, localStorage, sessionStorage

---

二、知识点：节流和防抖（21/09/07）

因为什么而诞生的：

可以说是经常会在面试中问到的一个知识点，并且在实际业务中也会频繁用到

防抖：，比如我们的输入框中，表单验证，按键提交等。当我们打开淘宝的输入框搜索时，每输入完下面就会出现相关的提示，这里就用到了防抖。

具体是什么呢？防抖就是当持续触发事件时，会等到停止后一段时间才开始执行。为什么需要这样呢？比如，要是我们点击一个按键，我们是不是只需要提交一次，要是我们疯狂点击，是不是就会疯狂触发。还有输入搜索，我们是不是应该输入结束才开始调用接口搜索，而不是每输入一个字就调用一次。使用防抖函数后，就使得只会触发一次，避免了无意义的触发。

节流：和防抖相比，节流是持续触发事件，会每隔一段时间，才执行执行一次，比如在DOM元素的拖拽功能中，射击游戏，计算鼠标移动距离中。当我们计算鼠标的移动距离，要是没有使用节流函数，那么每移动1px，就会调用计算。我们可想而知，当我们轻轻滑动。就会调用触发无数次了，会给服务器带来极大的压力。但我们使用后，比如设置间隔时间，持续触发那么他就会每隔这个时间段触发一次。大大减少服务端压力。

如何实现，解决了什么：
具体掌握程度，不仅要了解两者区别和作用，同时还需要能手写实现,

看该篇文章：节流和防抖函数 以及如何解决请求有防抖但是需要马上响应或获取防抖状态的情况

---

三、知识点：var和let以及const（21/09/08）

var是最开始的js关键词之一，首先一个变量在js中，分为声明和初始化。

var变量提升可以说是他的缺点了，美其名曰 js特性。但实际上这个特性带来很多问题。变量提升会把无论声明在哪里，都会提升到顶部，你在任何地方都会访问的到。另外他是函数作用域，而且可以多次声明，就会造成你自己啥时候覆盖了都不知道

console.log(a)  //undefien

var a = 1

console.log(a)  //1

var a = 2

console.log(a)  //2

另外

var a = 1 等价于  var  a = undefined ，a = 1 两条语句合成，所以上面两行代码等价于下面

var  a = undefined 
console.log(a)  //undefien
var a = 1

let和const就是为了解决var的问题

具有块级作用域
当遇到变量提升的情况，会有暂时性锁区。
不可重复声明，会报错

const的最大区别是不可重新赋值，其他类似let，但有个地方，当const的值为引用类型时，是可以重新赋值的，因为在栈空间报存的是地址，真正的值在堆空间（那么如何让他不可更改呢？）这个问题看第二回里面的第二点吧~~

整理文章：JavaScript基础知识-变量

---

四：知识点：深拷贝和浅拷贝（21/09/09）

因为什么而诞生的：

首先我们应该知道，除了引用型数据是存储在堆中的，其他类型都是存储在栈中的，而引用型的数据会在栈中保留一个指针，指向在堆中的位置

所以前拷贝只是复制，指向某个对象的指针，也就是它的引用地址，浅拷贝的结果，是指向同一内存的，修改会影响

深拷贝的话会将其完全复制，不会指向共同的内存，修改不会互相影响

实现的方法

浅拷贝

1. object.assigin() //该方法在只有一层时，进行的是深拷贝
2. Array.prototye.concat
3. Array.prototye.slice

深拷贝

// 我的深拷贝

//数据
 const obj1 = {
  age : 20,
  name : 'aasfa',
  address : {
   city : 'beijing',
   county : 'china'
  },
  arr: ['s','g' , 'f']
 }
//我的深拷贝

 function myDeepCope (obj = []) {
   //判断是否为对象或null，
  if (typeof obj !== 'object' || obj == null ) {
   return obj
   }
   // 用来开辟新的地址,保存复制过来得到值
   let result;
   // 判断类型
   if(obj instanceof Array) {
    result = []
   } else {
    result = {}
   }
   for (let key in obj) {
    // 避免继承以外的属性,只能当前的
    if ( obj.hasOwnProperty(key)) {
     result[key] = myDeepCope(obj[key])
     
    }
    
   }
   return result
 }
//测试
let aa = myDeepCope(obj1);
console.log(aa.name);
aa.name = 'fasdgasdag'
console.log(aa.name);
console.log(obj1.name);

---

五、知识点：作用域和作用域链（21/09/10）

说到作用域链，我们不得不先从作用域开始。首先我们得知道在js中有全局作用域和函数作用域。顾名思义：

作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期

全局作用域的变量，函数在整个全局中都能被访问到，它的生命周期和页面的等同

函数作用域的，只能在当前函数内被访问到，生命周期随函数结束而结束销毁。

所以每一个变量或函数都会有自己的作用域范围，而作用域链简单看来说就是当前作用域范围（自身内部）中找不到时，就会往他的上一级寻找有没有，直到全局都没有的，返回 undefined。要小心的是，有些时候，不要相信我们第一眼看到的就以为是他的上一级。如何判断他的上一级需要根据词法作用域来判断。

参考文章：JavaScript基础知识-执行上下文/作用域/this(作用域链/LHS/RHS/实现块作用域/闭包）

---

六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11）

这个是个非常重要的点了，而且涉及到的知识点很多，可扩展性很大，想一棵树的大主干，可以有很多的分支，而认证去分析里面的每一步，可以很好的体系化连接每一个知识。

接下来我们就慢慢分析一波

1. 用户输入
2. 浏览器进程判断是否符合 URL 规则，符合的会加上协议等，进行访问，不符合的会使用默认浏览器引擎搜索，组装为完整的 URL
3. 浏览器进程把 URL请求 通过进程通信发送给网络进程。
4. 网络进程检测是否有缓存
   有缓存：判断是否过期，一般通过 Expires 和 Cache-Control这两个字段
   缓存分为强缓存和协商缓存，强缓存不会向服务器请求验证，通过上面的两个标识，如果上面两个标识过期就会向服务器验证，就是协商缓存，如果没有更新就会返回304，告诉浏览器直接使用
5. 在发送请求前就会查找是否存在主机 ip 地址，这里包含到浏览器缓存，本机缓存，hosts文件，路由器缓存，isp DNS缓存中查找
6. 如果也还是没有就会进行 DNS域名解析，浏览器解析 URL 获取到协议，主机名，端口，path等，接着会组装一个 HTTP 请求报文（带解析的域名会放在这个 DNS 请求报文里，会使用 UDP ）来获取服务器的 ip地址
7. 接着判断是否为 https ，是的话会先建立 TLS 连接
8. 不是 https 或者建立 TLS连接之后就会与服务器通过三次握手建立 TCP连接发送 HTTP请求
9. 服务器接收解析请求头的信息，将请求转发到服务程序
10. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
11. 处理程序读取完整请求并准备HTTP响应
12. 服务器将响应报文通过TCP连接发送回浏览器
13. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，通过四次挥手关闭TCP连接。
14. 网络进程解析响应信息，检测状态码，如果是2XX，就会继续处理请求，如果是其他就会根据响应码做相应的处理。
15. 如果为2XX，就会检测响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
16. 接着到浏览器分配渲染进程，检测当前的 URL 是否和之前打开的渲染进程的根域名相同，是的话会复用进程，不是的话会重新创建个新的渲染进程。
17. 渲染进程准备好后，就到了提交 “文档”。
    提交文档的文档是指网络进程返回的响应数据
    “提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。
18. 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
    浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。
19. 这时候完成页面的显示了

扩展文章：深入了解输入网址到展示网站发生什么

---

七、知识点：重排和重绘（21/09/12）

1. 重排

• 重排就是浏览器在第一次渲染完页面布局以后，后续引起页面各节点位置重新计算或者重新布局的行为
• 因为元素的位置或者尺寸发生了变化，浏览器会重新计算渲染树，导致渲染树的一部分或者全部发生变化，需要重新绘制页面上影响的元素
• 能触发重排的行为有：改变页面尺寸，涉及元素尺寸或位置的操作等

2. 重绘

• 重绘就是布局计算完毕后，页面会重新绘制，这时浏览器会遍历渲染树，绘制每个节点，当元素外观变化但没有改变布局的时候，重新把元素绘制的过程。

• 重绘不一定出发重排，但重排一定会出发重绘

• 如：vidibility、outline、背景色等属性的改变

举个生动的例子来说就是，我们可以理解重排为一个人的身体，而重绘为一个人的外观，显而易见，当你长胖或者长高了，都会引起身体的变化

但是比如你化个妆，涂个口红啥的，就只是改变你的外表，是重绘，不会说因此你的身体就改变了。

我们常常说HTML是网页的结构，CSS是网页的外观，JS是网页的动作，那么一般涉及到网页的HTMl改变的（也即是DOM元素改变）的就是重排，而涉及到CSS的比如改变颜色等就是重绘（对于会影响到DOM的不算，比如使用了display：flex）

3. 如何减少或避免

• 然后避免重排和重绘的话就需要减少或者和合并多次DOM操作为一次DOM操作
• 因为绝对定位可以让元素脱离文档流，只会出发局部重排而不会影响外界
• 样式集中改变

---

八、知识点：TCP和UDP（21/09/13）

1.有无连接

• 假设现在有两台主机，它们是使用 UDP 协议进行通信，那么它们在发送数据之前，可以随机发送数据，而不需要进行连接，因此我们称 UDP 是无连接的（这里的连接是指逻辑连接关系）。
• 而如果两台主机是通过 TCP 协议进行通信的话，那么它们首先要通过“三次握手”进行连接，连接之后才可以发送数据，最后还需要使用“四次挥手”释放连接。

2.通信方式

• UDP 支持单播、多播和广播的方式
• 而 TCP 仅支持单播。这里涉及到了网络中的单播、多播和广播的知识，看下面这张图你就明白了。
• 多播只将用户数据报传输到网络中的部分主机，广播则将用户数据报传输到网络中的 全部 主机。

3.对应用层报文的处理

• 发送方应用进程将应用层报文交付给应用层 UDP，UDP 直接给应用层报文添加一个首部，使之成为应用层用户数据报，然后进行发送。接收方 UDP 接收到该报文以后，只需将首部去掉，然后将报文交付给接收方的应用进程就行了。UDP 不会对报文进行拆分，因此它是面向报文的。

• TCP 则会将发送方的数据块仅仅看作一连串无结构的字节流，将它们编号并存储在缓存中，然后根据自己的发送策略，提取一定量的字节，加上首部构建成 TCP 报文段进行发送。最后接收方的 TCP 一方面将 TCP 报文中提取出数据并存储在缓存，另一方面将接收缓存中的一些字节交付给接收方的应用进程。

4.是否提供可靠传输服务

• 对于 UDP，发送方会一门心思给接收方不断地发送数据报，没有可靠性保证、顺序保证和流量控制字段等，可靠性较差。但是正因为UDP协议的控制选项较少，在数据传输过程中延迟小、数据传输效率高，适合对可靠性要求不高的应用程序如果发送过程中出现了误码、丢包的情况，接收方不会做任何处理，只管接收就行了。保证了实时性，所以网络直播、视频会议等使用 UDP 的传输方式。

• TCP 收到报文准确无误后，会向发送方发送一个确认的报文，这样一来，如果收到了误码或者遇到丢包的情况，由于发送端没有收到确认消息，会进行超时重发，直到收到接收端的确认报文。下载文件、浏览网页时，我们希望数据没有出现丢失，因此它们使用 TCP 协议进行数据传输。

• 通过滑动窗口机制来实现流量控制，通过动态改变窗口的大小进行拥塞控制

• 使用校验和，确认和重传机制来保证可靠传输

• TCP 使用滑动窗口机制来实现流量控制，通过动态改变窗口的大小进行拥塞控制

归纳总结

类别

UDP

TCP

是否连接

无连接

面向连接

是否可靠

不可靠传输，不使用流量控制和拥塞控制

可靠传输（数据顺序和正确性），使用流量控制和拥塞控制

连接对象个数

支持一对一，一对多，多对一，多对多交互通信

只能是一对一通信

传输方式

面向报文

面向字节流

首部开销

首部开销小，仅8字节

首部最小20字节，最大60字节

适用场景

适用于实时应用，如视频会议、直播

适用于要求可靠传输的应用，如文件传输

扩展文章：计算机网络-运输层（UDP/TCP协议）

---

九、知识点：三次握手&#