前端基础知识总结

归纳，总结，理解

基础(http,html,es6,js,css,scss,less)

1.HTTP和HTTPS

概念

• HTTP:

  HTTP协议是hype text transfer protocol(超文本传输协议)的缩写。
  是用于从万维网（www.world wide web）服务器传输超文本到本地浏览器的传送协议。

  HTTP是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。（html文件，图片文件，查询，结果等）

• HTTPS:

  是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

区别及优缺点

1. 安全角度：

• HTTP协议 属于明文传输协议，是以明文的方式在网络中传输数据的；

• 而 HTTPS协议 属于加密传输协议，HTTPS协议中传输的数据是需要经过TLS/SSL加密后才进行传输的，因此HTTPS在传输数据方面具有较高的安全性。

2. 端口角度：

• HTTP协议的端口是：80

• HTTP协议的端口是：443

3. 加密与证书角度：

• HTTP协议 使用明文传输数据，不进行加密处理，不需要向服务端申请证书；

• HTTPS协议 在TCP三次握手阶段之后，需要进行SSL的handshake,协商加密使用的对称加密密钥，还需要向服务端申请证书，浏览器端安装对应的根证书。

• HTTP优点： 简单、灵活、易扩展、应用广；

• HTTP缺点： 以明文的方式在网络中传输数据，通信内容容易被窃听、篡改、劫持，无法保证数据的完整性和准确性，因此使用HTTP协议传输数据不安全。

• HTTPS的优点：

1. HTTPS协议在传输数据过程中，使用密钥对传输的数据进行加密，安全性较高。

2. HTTPS协议可以对用户和服务器进行认证，确保了数据传送的完整性和准确性。

• HTTPS 的缺点：

1. HTTPS协议握手阶段延时较高： 由于在进行HTTP会话前，还需要进行SSL握手，所以HTTPS协议握手阶段延时会适当增加。

2. HTTPS协议部署成本高： 首先，HTTPS协议需要购买CA证书，通过证书来验证自身的安全性；其次，HTTPS属于加密传输协议，需要进行加密、解密的计算与操作，会占用一定数量的CPU资源，因此，需要的服务器配置、数目相对较高。

HTTPS的工作原理

• 要实现网站的https访问，就必须使用SSL证书。

• SSL证书的主要作用就是身份认证和传输加密，https工作原理主要如下：

  客户端在使用https方式与Web服务器通信时有以下几个步骤：

1. 客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。

2. Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。

3. 客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。

4. 客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。

5. Web服务器利用自己的私钥解密出会话密钥。

6. Web服务器利用会话密钥加密与客户端之间的通信。

HTTP请求方式

GET：用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器。
POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
PUT：传输文件，报文主体中包含文件内容，保存到对应URI位置。
HEAD：获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
OPTIONS：查询相应URI支持的HTTP方法。

HTTP各个版本区别

• HTTP1.1的缺点：安全性不足和性能不高；
• HTTP2.0完全兼容HTTTP1.0，是“更安全的HTTP，更快的HTTPS”，头部压缩，多路复用等技术充分利用了带宽，降低了延迟。
• HTTP3.0的底层支撑协议QUIC基于UDP实现，又含TCP的特点，实现了又快又可靠的协议。

HTTP常见状态码

100：继续，客户端应继请求；  
200：请求成功；  
301：资源（网页等）被永久转移到其他 URL；  
302：暂时重定向；  
403: Forbidden —禁止访问；  
404：请求的资源（网页等）不存在；  
500：内部服务器错误。

TCP三次握手

• 结论：三次握手，建立连接，开始传输数据

• 为了对每次发送的数据量进行跟踪与协商，确保数据段的发送和接收同步，根据所接收到的数据量而确认数据发送、接收完毕后何时撤消联系，并建立虚连接。

• TCP协议位于传输层，作用是提供可靠的字节流服务，为了准确无误地将数据送达目的地，TCP协议采纳三次握手策略。

• 三次握手原理：(简述,无状态)

  第1次握手：客户端发送syn包给服务端
  第2次握手：服务端接收成功后，发送一个自己的syn+ack包到客户端
  第3次握手：客户端收到syn+ack包，向服务器发送确认包ack，发完后完成三次握手
  

TCP四次挥手

• 结论：四次挥手，关闭连接

• 四次挥手原理：(简述,无状态)

  第一次挥手：客户端发送一个FIN，用来关闭客户端到服务端的数据传送
  第二次挥手：服务端收到FIN后，发送一个ACK给客户端
  第三次挥手：服务端发送一个FIN，用来关闭服务端到客户端的数据传送
  第四次挥手：客户端收到FIN后，接着发送一个ACK给服务端，完成四次挥手
  

TCP和UDP的区别

• UDP是什么： UDP是一个无连接协议传输数据之前源端和终端不建立连接，当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、计算机的能力和传输带宽的限制；在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段。

1. TCP 是面向连接的传输控制协议，而UDP 提供了无连接的数据报服务
2. TCP 具有高可靠性，确保传输数据的正确性，不出现丢失或乱序；UDP 在传输数据前不建立连接，不对数据报进行检查与修改，无须等待对方的应答，所以会出现分组丢失、重复、乱序，应用程序需要负责传输可靠性方面的所有工作；
3. UDP 具有较好的实时性，工作效率较 TCP 协议高；
4. UDP 段结构比 TCP 的段结构简单，因此网络开销也小。
5. TCP 协议可以保证接收端毫无差错地接收到发送端发出的字节流，为应用程序提供可靠的通信服务。对可靠性要求高的通信系统往往使用 TCP 传输数据。

• 使用场景： 在选择UDP作为传输协议时必须要谨慎。在网络质量令人十分不满意的环境下，UDP协议数据包丢失会比较严重。但是由于UDP的特性：它不属于连接型协议，因而具有资源消耗小，处理速度快的优点，所以通常音频、视频和普通数据在传送时使用UDP较多，因为它们即使偶尔丢失一两个数据包，也不会对接收结果产生太大影响。比如我们聊天用的QQ就是使用的UDP协议。

HTTP请求跨域

• 为什么出现跨域问题： 出于浏览器同源策略限制。

• 同源策略： 同源策略是一种约定，是浏览器最核心也最基本的安全功能。是浏览器对于JavaScript实施的安全限制，只要协议 端口 域名有任何的不同，都是不同的域（跨项目执行接口）

• 如何跨域： 通过各种方式绕过安全限制

• 跨域方案：

  1、 通过jsonp跨域
  2、 document.domain + iframe跨域
  3、 location.hash + iframe
  4、 window.name + iframe跨域
  5、 postMessage跨域
  6、 跨域资源共享（CORS）
  7、 nginx代理跨域
  8、 nodejs中间件代理跨域
  vue.config.js中的proxy配置跨域
  9、 WebSocket协议跨域

2.浏览器

浏览器加载过程

1. 首先在浏览器中输入URL

2. 查找缓存，如果有就现实该页，没有就进行下一步

3. DNS域名解析：浏览器想DNS服务器发起请求，解析URL中的域名对应的IP地址

4. 建立TCP链接：解析出IP地址后，根据IP地址和默认80端口和服务器建立起TCP链接

5. 发起HTTP请求：浏览器发起读取文件的HTTP请求，该请求报文作为TCP三次握手的第三次数据发送给服务器

6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

7. 关闭TCP连接：通过四次挥手释放TCP连接

8. 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：

    构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
    构建CSS规则树：生成CSS规则树（CSS Rule Tree）
    构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
    布局（Layout）：计算出每个节点在屏幕中的位置
   

9. JS引擎解析过程：调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

• 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
• 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
• 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为’undefined’；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
• 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

浏览器重排和重绘的区别

结论：

重排：当DOM的变化影响了语速集合，重新布局，重排元素 例如：width或hight的变化

重绘：当元素的外观发生了变化 例如：color或background的变化

重排一定会引起重绘的操作，而重绘却不一定会引起重排的操作

在了解什么是重排之前，我们需要知道的一个重要知识点是：浏览器渲染页面默认采用的是流式布局模型

• 因为浏览器渲染页面是基于流式布局的，对某一个DOM节点信息进行修改时，就需要对该DOM结构进行重新计算。
• 该DOM结构的修改会决定周边DOM结构的更改范围，主要分为全局范围和局部范围。
• 全局范围就是从页面的根节点html标签开始，对整个渲染树进行重新计算。
• 例如，当我们改变窗口的尺寸或者修改了根元素的字体大小时，局部范围只会对渲染树的某部分进行重新计算。例如要改变页面中某个div的宽度，只需要重新计算渲染树中与该div相关的部分即可。
• 而重排的过程就发生在DOM节点信息修改的时候，重排实际是根据渲染树中每个渲染对象的信息，计算出各自渲染对象的几何信息，例如DOM元素的位置、尺寸、大小等，然后将其安置在界面中正确的位置。

会引起重排的操作：

• 页面首次渲染。

  在页面首次渲染时，HTML页面的各个元素位置、尺寸、大小等信息均是未知的，需要通过与CSS样式规则集才能确定各个元素的几何信息。这个过程中会产生很多元素几何信息计算的过程，所以会产生重排操作。

• 浏览器窗口大小发生改变。

  页面渲染完成后，就会得到一个固定的渲染树。如果此时对浏览器窗口进行缩放或者拉伸操作，渲染树中从根元素html标签开始的所有元素，都会重新计算其几何信息，从而产生重排操作。

• 元素尺寸或位置发生改变。

• 元素内容发生变化。

• 元素字体发生变化。

  上述3种情况，均是直观地表述DOM元素几何属性的变化。这些操作均会导致渲染树中相关的节点失效，浏览器会根据DOM元素的变化，重新构建渲染树中失效的节点，从而产生重排操作。

• 添加或删除可见的DOM元素。

  因为浏览器采用的是流式布局模型，实际为从上到下、从左到右依次遍历元素的过程。通常情况下，如果添加或者删除可见的DOM元素，则当前元素之前的元素不会受到影响；而当前元素之后的元素均会重新计算几何信息，渲染树也需要重新构建修改后的节点，从而产生重排操作。

• 获取某些特定的属性。

  也许几行简单的JavaScript代码就会引起很多重排的操作，而频繁的重排操作会对浏览器引擎产生很大的消耗。所以浏览器不会针对每个JS操作都进行一次重排，而是维护一个会引起重排操作的队列，等队列中的操作达到了一定的数量或者到了一定的时间间隔时，浏览器才会去flush一次队列，进行真正的重排操作。

  当我们请求一些属性时，浏览器为了返回最精准的信息，需要flush队列，因为队列中的某些操作可能会影响到某些值的获取。因此，即使你获取的样式信息与队列中的操作无关，浏览器仍然会强制flush队列，从而引起浏览器重排的操作。

  //调用会引发重排的元素
  · width：宽度。
  · height：高度。
  · margin：外边距。
  · padding：内边距。
  · display：元素显示方式。
  · border：边框。
  · position：元素定位方式。
  · overflow：元素溢出处理方式。
  · clientWidth：元素可视区宽度。
  · clientHeight：元素可视区高度。
  · clientLeft：元素边框宽度。
  · clientTop：元素边框高度。
  · offsetWidth：元素水平方向占据的宽度。
  · offsetHeight：元素水平方向占据的高度。
  · offsetLeft：元素左外边框至父元素左内边框的距离。
  · offsetTop：元素上外边框至父元素上内边框的距离。
  · scrollWidth：元素内容占据的宽度。
  · scrollHeight：元素内容占据的高度。
  · scrollLeft：元素横向滚动的距离。
  · scrollTop：元素纵向滚动的距离。
  · scrollIntoView()：元素滚动至可视区的函数。
  · scrollTo()：元素滚动至指定坐标的函数。
  · getComputedStyle()：获取元素的CSS样式的函数。
  · getBoundingClientRect()：获取元素相对于视窗的位置集合的函数。
  · scrollIntoViewIfNeeded()：元素滚动至浏览器窗口可视区的函数。（非标准特性，谨慎使用）
  

会引起重绘的操作：

相比于重排，重绘简单很多。重绘只是改变元素在页面中的展现样式，而不会引起元素在文档流中位置的改变。例如更改了元素的字体颜色、背景色、透明度等，浏览器均会将这些新样式赋予元素并重新绘制。

在修改某些常见的属性时，会引发重绘的操作，接下来列举出了一部分。

· color：颜色。  
· border-style：边框样式。  
· visibility：元素是否可见。  
· background：元素背景样式，包括背景色、背景图、背景图尺寸、背景图位置等。  
· text-decoration：文本装饰，包括文本加下画线、上划线、贯穿线等。  
· outline：元素的外轮廓的样式，在边框外的位置。  
· border-radius：边框圆角。  
· box-shadow：元素的阴影。

性能优化，尽量避免重排和重绘：

1. 将多次改变样式的属性操作合并为一次

   该代码会触发多次的重排每修改一个属性都会重排或重绘：
   var changeDiv = document.querySelector('#changeDiv');
   changeDiv.style.width = '100px';
   changeDiv.style.background = '#e3e3e3';
   changeDiv.style.height = '100px';
   changeDiv.style.marginTop = '10px';
   

   可以改成：
   div.changeDiv {
       width: '100px',
       background: #e3e3e3;
       height: 100px;
       margin-top: 10px;
   }
   document.getElementById('changeDiv').className = 'changeDiv';
   

2. 将需要多次重排的元素设置为绝对定位

   • 需要进行重排的元素都是处于正常的文档流中的，如果这个元素不处于文档流中，那么它的变化就不会影响到其他元素的变化，这样就不会引起重排的操作。常见的操作就是设置其position为absolute或者fixed。

   • 假如一个页面有动画元素，如果它会频繁地改变位置、宽高等信息，那么最好将其设置为绝对定位。

3. 在内存中多次操作节点，完成后再添加至文档树中

   • 假如我们需要实现这样一个需求：通过异步请求获取表格的数据后，将其渲染到页面上。
   • 这个需求可以有两种实现方式，一种是每次构造一行数据的HTML片段，分多次添加到文档树中；另一种是先在内存中构建出完整的HTML片段，再一次性添加到文档树中。

4. 将要进行复杂处理的元素处理为display属性为none，处理完成后再进行显示

   • 因为display属性为none的元素不会出现在渲染树中，所以对其进行处理并不会引起其他元素的重排。当我们需要对一个元素做复杂处理时，可以将其display属性设置为none，操作完成后，再将其显示出来，这样就只会在隐藏和显示的时候引发两次重排操作。(在不影响页面布局的情况下)

5. 将频繁获取会引起重排的属性缓存至变量

   • 在获取一些特定属性时，会引发重排或者重绘的操作。因此在获取这些属性时，我们应该通过一个变量去缓存，而不是每次都直接获取特定的属性。

   var ele = document.querySelector('#ele');
   // 先获取width属性
   var width = ele.style.width;
   // 判断条件1
   if(true) {
      width = '200px';
   }
   // 判断条件2
   if(true) {
      width = '300px';
   }
   // 判断条件3
   if(true) {
      width = '400px';
   }
   // 最后执行一次width属性赋值
   ele.style.width = width;
   

6. 尽量减少使用table布局

   • 如果table中任何一个元素触发了重排的操作，那么整个table都会触发重排的操作，尤其是当一个table内容比较庞大时，更加不推荐使用table布局。

   • 如果不得已使用了table，可以设置table-layout:auto或者是table-layout:fixed。这样可以让table一行一行地渲染，这种做法也是为了限制重排的影响范围。

304过程

• a. 浏览器请求资源时首先命中资源的Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，可以通过Cache-control: max-age指定最大生命周期，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。

• b. 强缓存失效，进入协商缓存阶段，首先验证ETagETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据客户端上送的If-None-Match值来判断是否命中缓存。

• c. 协商缓存Last-Modify/If-Modify-Since阶段，客户端第一次请求资源时，服务服返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间。再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

浏览器缓存

1. 浏览器在加载资源时，先根据这个资源的一些 http header判断它是否命中强缓存（服务器通过设置http中hdader的Expires和cache-control字段告诉浏览器缓存的有效期。这种方法会有一个固定时间，所带来的问题是如果服务器数据进行了更新，但是还没有到强缓存的过期时间，则数据无法更新。），不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；
2. 当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存（协商缓存就是通过服务器来判断缓存是否可用），如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；
3. 强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。
4. 当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

• 详细内容：https://www.cnblogs.com/hellocoder2029/p/16897307.html
• 关于强缓存和协商缓存：https://www.jianshu.com/p/7bc3b8983c51

Cookie SessionStonage LocalStorage

1. 关于存储时间区别

• cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效
• sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
• localStorage的有效期是在不进行手动删除的情况下是一直有效的

2. 关于存储大小的不同

• cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息
• localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

3. 与服务端的通信

• cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。
• localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

4. 读写操作

• 1、cookie的相关操作，cookie操作起来较为繁琐，并且部分数据不可以读取操作

  创建：document.cookie = "username=lsh"
  读取：var ck = document.cookie
  删除：//删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
  

• 2、sessionStorage的相关操作

   存储：sessionStorage.setItem('name','value')
   读取：sessionStorage.getItem('name')
   删除：sessionStorage.removeItem('name')
   移除所有：sessionStorage.clear()
  

• 3、sessionStorage的相关操作

  存储：localStorage.setItem('name','value')
  读取：localStorage.getItem('name')
  删除：localStorage.removeItem('name')
  移除所有：sessionStorage.clear()
  

5. 对于浏览器的支持

• 1、cookie出现的时间较早，目前见到的浏览器都支持

• 2、localStorage和sessionStorage出现的时间较晚，对于版本较低的浏览器不支持(比如IE8版本以下的都不支持)

进程，线程，协程

进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。进程是一种抽象的概念，从来没有统一的标准定义。

线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元，是处理器调度和分派的基本单位。一个进程可以有一个或多个线程，各个线程之间共享程序的内存空间(也就是所在进程的内存空间)。一个标准的线程由线程ID、当前指令指针(PC)、寄存器和堆栈组成。而进程由内存空间(代码、数据、进程空间、打开的文件)和一个或多个线程组成。

协程，英文Coroutines，是一种基于线程之上，但又比线程更加轻量级的存在，这种由程序员自己写程序来管理的轻量级线程叫做『用户空间线程』，具有对内核来说不可见的特性。

详细内容文章
CSDN作者Pinker_Q
https://blog.csdn.net/qq_39304851/article/details/119975280

2.HTML5

概念:

HTML5的语义化是指合理正确的使用语义化的标签来创建页面结构正确的标签干正确的事

常用标签:

<header /> //定义文档头部
<footer /> //定义section 或 document 的页脚。
<nar /> //定义导航
<canvas> //绘制
<dialog> //定义对话框
<>

新特性

1. 语义化标签-- 使代码逻辑清晰，方便阅读和开发。方便其他设备解析。有利于搜索引擎优化
2. canvas元素-- 用于在网页上绘制图形，有多重绘制路径、矩形、原型、字符以及添加图像的方法。Canvas通过js绘制2D图形，并逐像素进行渲染，且假若在图片完成后进行修改，整个场景就会重新绘制
3. 表单元素

/**表单元素（新增） */
<datalist> --选项列表
<keygen> --校验用户的可靠方法
<output> --用于不用类型的输出
/**表单属性*/
placehoder --空input提示内容
required --要求填写的输入域不为空
pattern --描述了一个正则表达式用于验证input的值
max/min --最大值最小值
step --为输入域规定合法的数字间隔
height/width --规定img和image标签的图像大小
autofocus 在页面加载时自动获得焦点
multiple imput元素中选择多个值

4. 媒体元素 <audio>音频播放元素 --三种音频播放格式mp3，wax，ogg <video>视频播放元素
5. 地理定位 --使用getCurrentPosition方法获取用户位置，可以基于此实现计算位置距离
6. 拖放api --拖放的源对象（可能发生的移动的）可以触发的事件-3个 dragstart：拖动开始，drag：拖动中，dragend：拖动结束，整个拖动过程的组成：dragstart1 + dragn + dragend*1。
7. webWorker --当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时Web Worker在后台运行
8. webStorage --Web Storage是H5引入的一个帮助解决cookie存储本地缓存的重要功能。早些时候，本地存储使用的是cookies。但是Web存储需要更加的安全与快速，而且Web Storage中有5M容量，cookie只有4k。
9. WebSocket --WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。当你获取Web Socket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。
10. SVG绘图 --SVG是指可伸缩的矢量图形，它是一种使用XML描述2D图形的语言。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

DOCTYPE

Doctype标签是一种标准通用标记语言的文档类型说明，他的目的是要告诉标准通用标记语言解析器，他应该采用什么样的文档类型定义DTD来解析文档。
相当于一种适配方式<!DOCTYPE HTML>定义浏览器解析页面的方式，如果不设置浏览器会用自己的方式解析页面，就需要配置不同浏览器的解析。使用时要注意放在页面的最顶部，并且前面不要有字符

canvas

canvas是用来代替flash等其他用于做动画或游戏的插件的一个标签，能够大大减少页面的结构大小，让页面加载的更快。

1. convas可以理解为一个是一个 div ，只不过div是用来存放元素的，而convas则是提供一个区域来绘制图形。
2. canvas标签习惯在标签内部对其进行设置，而不是用css样式或js脚本
   < canvas width=‘xxx’ height=‘xxx’>您的浏览器不支持canvas标签，请更换支持canvas的浏览器< /canvas>
   在支持canvas标签的浏览器内会显示正常的绘制图形
   而在不支持canvas标签的浏览器内会显示内部的文本
3. canvas可以认为是一个普通的白纸，除此没有任何功能，内部都是通过javaScript脚本来完成
4. 使用：
   在脚本中canvas标签只是一张画布，而如果想在画布上进行操作，则需要通过canvas标签创建一个“画家”，来帮助我们进行内容的绘制 。
   画家的生成方法为：
   var huajia = document.querySelector(’.canvas’);
   var bicaso = huajia.getContext(‘2d’);
   画家有一个官方称呼：【canvas上下文对象，习惯上命名为ctx】
   特征：上屏即像素化(内部绘制的图形一旦完成，就不能在更改)

表单元素（element-UI,Ant-Desgin）

form元素为表单域

1. input元素根据不同的type属性，可以变化为多种形态。

2. select元素定义下拉列表。

3. option元素定义待选择的选项。

4. textarea元素定义多行输入字段。

5. button元素定义可点击的按钮。

6. datalist元素为input元素规定预定义选项列表。

7. keygen标签规定用于表单的密钥对生成器字段。

8. output元素用于不同类型的输出。

事件属性

/**一般事件 */
onClick ：鼠标点击事件
onMouseDwon ：鼠标上的按钮被按下了
onMouseUp ：鼠标按下后松开的事件

onMouseOver ：鼠标移入到对象上
onMouseOut ：鼠标移出对象

onKeyPress ：当键盘上的某个建被按下并且释放时触发的按键
onKeyDwon ：当键盘上某个按键被按下时触发的事件
onKeyUp ：当键盘上某个按键被按放开时触发的事件

/**页面相关事件 */
onBeforeUnload ：当前页面的内容将要被改变时触发的事件
onError ：抓捕当前页面因为某种原因而出现的错误，如脚本与外部数据引用的错误
onLoad ：页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove :浏览器的窗口被移动时触发的事件
onResize ：当浏览器的窗口大小被改变时触发的事件
onScroll ：浏览器的滚动条位置发生变化时触发的事件
onUnload ：当前页面被改变时触发的事件

/**表单相关事件*/
onFocus ：当某个元素获得焦点时触发
onBlur ：当某个元素失去焦点时触发（鼠标与键盘均可触发）
onChange ：当元素失去焦点并且元素的内容发生改变时触发的事件（鼠标与键盘均可触发）
onReset ：当表单中的reset的属性被触发时
onSubmit ：表单提交触发

/**滚动字幕事件 */
onBounce ：在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish ：当Marquee元素完成需要显示的内容后触发的事件
onStart ：当Marquee元素开始显示内容时触发的事件

/**编辑事件 */
onBeforeCopy HTML ：当页面当前被选中的内容将要复制到浏览者系统的剪切板前触发的事件
onBeforeCut ：当页面中的一部分或者全部内容将被移离当前页面（剪切）并移动到浏览者的系统剪切板时触发的事件

/**触发的事件 */
onBeforeEditFocus ：当前元素将要进入编辑状态
onBeforePaste ：内容将要从浏览者的系统剪切板传送（粘贴）到页面中时触发的事件
onBeforeUpdata ：当浏览者粘贴系统剪贴板中的内容时通知目标对象

onContextMenu ：当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件（在页面中加入onContextMenu=“return false” 就可以禁止使用鼠标右键了）

onSelect ：当文本内容被选择时的事件

/**外部事件 */
onAfterPrint ：当文档被打印后触发的事件；
onBeforePrint ：当文档即将打印时触发的事件；
onFilterChange ：当某个对象的滤镜效果发生变化时触发的事件；

onHelp ：当浏览者按下F1或者浏览器的帮助选择时触发的事件；

onPropertyChange ：当对象的属性之一发生变化时触发的事件；
onReadyStateChange ：当对象的初始化属性值发生变化时触发的事件。

3.JavaScript

简介

JavaScript基础知识（语法，变量，数据类型）

JavaScript对象

JavaScript函数

数据结构（基础）

构造函数

创建之后可以当对象new出来

命名函数

就是正常的函数

匿名函数

1. 常被使用在事件触发执行的函数，直接写在操作里

   sumbit.onclick = function(){
   	console.log('表单提交按钮')
   }
   

2. 也可以直接赋值给一个变量

   let fn = function(){}
   

3. 回调函数

     setInterval(function(){
     	//定时器 
     	console.log('我是一个定时器')
     },1000)
   

4. 模拟块级作用域-> 通过匿名函数可以实现闭包操作

   function func(){
   	(function(){ //必须用（）包起来
   		var i =1
   	})();
   }
   console.log(i) //会报错 i is not defined
   

   • 模仿块级作用域，减少全局变量。执行完匿名函数，存储在内存中相应的变量会被销毁，从而节省内存
   • 在大型开发中，块级作用域会大大减少变量命名冲突

JavaScript作用域

常用对象->arguments,

动态执行js

eval（）
es6字符串模板 ``

4.ES6

let，const，var区别

1. 变量提升

• var会发生变量提升现象，即变量可以在声明之前使用，值为undefined
• let和const没有变量提升的功能，必须先声明

2. 重复声明

• var能重复声明，后者覆盖前者
• let和const不允许在相同作用域中，重复声明同一个变量

3. 作用域

• var的作用域是以函数为界限
• let和const的作用域是块级作用域，块级作用域值{}内的范围
• var可以定义全局变量和局部变量，let和const只能定义局部变量
• const的声明的常量不能被修改，但对于引用类型来说，堆内存中的值是可以修改的，可以使用常量定义对象，对象的属性可以被修改

4. 变量作为全局属性

• 定义的变量会作为window对象的属性，let不会

暂时性死区

• 如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域，假如尝试在声明前去使用这类变量，就会报错
• 暂时性死区的本质：当进入当前作用域时，let或者const声明的变量就已经存在了-它们只是不允许被获取
  要想获取它们，必须等到代码执行到声明处

var a = 1
{
	a = 2 //报错，因为上面就是暂时性死区
	let a
}

for循环中的作用域问题

• 设置循环变量的部分是父级作用域，而循环体内部是一个单独的子作用域。
• ES6 中引用变量采用就近原则

变量解构

1. 基础解构

/**ES6之前的写法（数组） */
const array = ['数组1','数组2','数组3']
let 组1 = array[0]
console.log(组1) //-> 数组1
/**ES6写法（数组） */
const [组1，组2，组3] = ['数组1','数组2','数组3']
consloe.log(组1) //->数组1
//这种写法属于“模式匹配”，按照对应的位置对变量赋值，只要等号两边相同，左边的变量就会被赋予对应的值

• 解构的源，解构赋值表达式的右边部分

• 解构的目标，解构赋值表达式的左边部分

当解构的目标和解构的源匹配模式相同时，就可以将源中的数据赋值给变量。需要注意的是：数组的解构和顺序有关，顺序的调整会改变变量的值。

/**解构其他操作 */
/**基本操作 */
let [a,b,c] = [1,2,3] ->a=1 b=2 c=3
/**嵌套操作 */
let [a,[[b],c]] = [1,[[2],3]] ->a=1 b=2 c=3
/**可忽略操作 */
let [a,,c] = [1,2,3] ->a=1 c=3
/**扩展运算符 */
let [a,...b] = [1,2,3] ->a=1 b=[2,3]
/**不完全解构 */
let [a=1,b] = [] ->a=1 b=undefined
let [a,b,c] = [1,2] ->a=1 b=2 c=undefined
/**如果解构不成功变量值未undefined */

2. 对象解构
   对象的解构和数组的解构有一个最大的不同，就是数组解构取决于次序，对象解构的取值取决于它的位置。而对象的属性没有次序，解构的对象变量名必须与属性key同名，才能取到正确的。对象解构允许我们使用变量的名字匹配对象的属性，将对象的属性赋给变量。

let obj = {
name : 'lsh',
age : '24'
}
let {name,age} = obj ->name:'lsh',age:'24' //正确的
let {a,b} = obj ->a:undefined,b:undefined //错误的
/**如果变量名与属性名的不一致 */
let {name:a,age:b} = obj ->a:'lsh',b:'24'

3. 特殊解构赋值

/**字符串解构赋值 */
let [a,b,c,d,e] = hello -> a:'h',b:'e',c:'l',d:'l',e:'o'
/**类数组对象解构 */
let {lenght:len} = 'hello' -> len:'5'
/**函数参数解构 */
/**我们常用的函数中的参数也可以用解构赋值，形参可以重复利用数组，对象，字符串等解构的方式，将传入的参数解析并赋值给变量 */
function add([a,b]){
//讲传入的数组的值赋给a和b变量
return a+b；
}
add（[1,2]） -> 3

rest运算符（…变量名）

在函数调用/数组构造时，将数组表达式或者String在语法层面展开；还可以在构造字面量对象时讲对象表达式按照key-value的方式展开
字面量一般指[1，2，3]或者{name：‘111’}这种简洁的构造方式，如果多层嵌套的数组和对象就无能为力了

• 使用方法

//数组
var array = [1,2,3,4]
console.log(...array) ->1,2,3,4
//对象
var obj = {name:'lsh',age:'24'}
console.log(...obj) -> {name:'lsh',age:'24'}

• 应用场景

//数组的复制
var array1 = [1,2,3,4]
var array2 = [...array1]
console.log(array2) -> 1,2,3,4
//对象的复制
var obj1 = {name:'lsh'}
var obj2 = {...obj1}
console.log(obj2) -> {name:'lsh'}
//数组的合并
var array1 = ['lsh1']
var array2 = ['lsh2']
var arrayJoin = [...array1,...array2]
console.log(arrayJoin) -> ['lsh1','lsh2']
//对象的合并
var obj1 = {name:'lsh'}
var obj2 = {age:'24'}
var objJoin = {...obj1,...obj2}
console.log(objJoin) -> {name:'lsh',age:'24'}
//字符串转数组
var arrayStr = [...'hello']
console.log(arrayStr) -> ['h','e','l','l','o']
//参数传参
function func(a,b,c){}
var array = [1,2,3]
func(...array)

箭头函数

ES6中允许使用 =>来定义函数。箭头函数相当于匿名函数，并简化了函数定义

1. 相比普通函数，箭头函数的语法更加简洁

• 箭头函数只能用赋值写法（匿名函数）不能用声明式写法（命名函数）
• 如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号
  const func = count =>{return count+1}
• 如果函数体只有一句话，可以不加花括号
  const func = (count,num) =>count+num
• 如果函数体没有括号，可以不加return，箭头函数会默认return

/**普通函数*/
function func(count){
 return count+1
}
/**箭头函数 */
const func = count => count + 1

2. 箭头函数中的this指向

• 如果箭头函数是被另一个函数包裹着的，那么this指向的就是包裹着的函数，如果箭头函数没被包裹，那么就是指向上下文的this（全局变量比如：vue对象）

/** 包裹在函数内的this指向，外层是object，所以this指向是object*/
let  object={
	fn:function(){//普通函数
		this === object//true
		return ()=>{
			this === object//true
		}
	}
}
/**如果没有包裹在普通函数内，指向的是全局的this*/
let fn={
	fn:()=>{
		return  console.log(this === vue) //true
	}
}

3. 箭头函数是匿名函数，不能作为构造函数（不能new对象）
4. 箭头函数没有arguments（类似于数组的对象），取而代之用rest（展开对象）解决，同时没有super（调用父类的属性和方法）和new.targer（检测使用new运算符调用了函数或构造函数）
5. 注意事项：

• 箭头函数不适用dom事件
• 箭头函数不适用声明函数
• 箭头函数不能作为构造函数
• 箭头函数不能使用arguments
• 不能使用yield

遍历

1. for循环遍历，效率高(使用let会更快点)

   let str = 'hellow'
   for(let i = 0 ; i < str.length ; i++){
   	console.log(i,str[i]) //i->索引,str[i]值，输出：(0,'h')
   }
   

2. for in (遍历对象用，效率低)

   let obj = {name:'lsh',birthday:'1999-12-05'}
   for(i in obj){
   	console.log(i,obj.i) //i->对象的key，obj.i 对象的值，输出：(name,'lsh')
   }
   

3. for of (ES6新，遍历数组用，能直接拿数组的值)

   let array = [1,2,3,4,5]
   for(i of array){
   	console.log(i) //i直接循环数组的值（value）输出：(1)
   }
   

部分内容来源

作者：稀土掘金博主 Gaby
链接：https://juejin.cn/post/7016593221815910408

作者：CSDN博主「星河梦~」
链接：https://blog.csdn.net/weixin_53186633/article/details/123624445

作者：简书 [zhao_ran]
链接：https://www.jianshu.com/p/34b7f127b74f

作者：CSDN [愚舜]
链接：https://blog.csdn.net/first_shun/article/details/115747681

作者：CSDN 农村小伙！
链接：https://blog.csdn.net/weixin_43786904/article/details/104231292