学习计划

注：

• 早(7:00-11:00)
• 午(13:30-16:00)
• 晚(19:00-23:00)

第一周

知识整理：

• mousedown: mouseover + mouseup

• oninput&onpropertychange：只要在输入框中填写或删除内容，里面显示内容

• onchange：获得输入框失去焦点后的文本内容，若不更改值，失去焦点不会变化

• 滑入滑出onmouseover&onmouseout：存在冒泡现象，影响子元素

• mouseenter&mouseleave：只对被绑定元素进行事件触发，存在类似冒泡现象，也影响子元素

• keydown&keypress区别：

  • keydown没有charCode但有keyCode
  • keypress有charCode和keyCode

• JSON.parse()将JSON字符串转换成JSON对象

• JSON.stringify()将JSON数据转为字符

• 缓存池：请求过的数据不再去请求，只要请求过一次就会缓存到前端，以便于减轻服务器的压力

• 前端做数据缓存有以下方法：

  • localStroge
  • sessionStroge
  • cookies
  • JS脚本(适用于更新不太频繁的情况)

• 特殊的转义字符：

  • \n：换行
  • \r：回车
  • \t：制表符

• 修饰符

  • i：igore case 忽略大小写
  • g：global 全局匹配
  • m：multi-line 多行匹配

• 表达式

  • []：区间
  • ^：非
  • |：或

• 元字符：即正则使用的转义符号

  • \w：[0-9A-z_]
  • \W：[^\w] 非\w区间的所有字符
  • \d：[0-9] digit 数字
  • \D：[^\d] 非数字
  • \s：[\r\n\t\v\f] -> [回车\换行\制表\垂直\换页]
  • \S：[^\s]
  • \b： 单词边界
  • \B： 非单词边界
  • .： 可以匹配除了回车和换行的所有字符

• 量词

  • n+：{1, 正无穷} 出现1次到正无穷
  • n*：{0, 正无穷} 出现0次到正无穷
  • n?：{0, 1} 出现0次到1次

• 正则对象属性

  • reg.global：判断是否用g
  • reg.ignoreCase：判断是否用忽略大小写i
  • reg.multiline：判断是否用换行m
  • reg.resource：正则本体，如/(\w)/
  • reg.lastIndex：查到跟exec()执行后类数组里面的index一样的值，可更改值，还能调整下标

• 正则对象方法

  • reg.test(str)：判断是否能匹配出来
  • reg.exec()：执行

• 正向预查：匹配一个字符串，但有条件，字符串后面指定一个特定的字符或者字符串

• 子表达式/反向引用：子表达式有记忆匹配内容，反向引用第几位子表达式

• 贪婪/非贪婪模式：

  • 能匹配多，不匹配少(贪婪)
  • 能匹配少就不匹配多(非贪婪)

重难点：

• 如何在事件代理的情况下获取下标?

  • indexOf
  • 事件源对象的tagName筛选冒泡对象

• 也可以通过for循环拿到下标

• 事件流的三个阶段：

  • 事件捕获阶段(默认不执行)
  • 处于目标阶段(触发时候) -> 执行事件处理函数
  • 事件冒泡阶段

第二周

知识整理：

• Client客户端 -DNS解析> IP地址 -TCP/IP三次握手> Sever服务端

• 三次握手：请求连接时需要三次握手

• 四次挥手：中断连接请求都需要4次往返的数据传输

• URI：同一资源标识符，用来唯一的标识一个资源

• URL：统一资源定位符，URL可以用来标识一个资源，而且还指明了如何定位这个资源用地址定义一个资源

• URN：统一资源命名，通过名字来表示资源的，用名称定位一个资源

• URL 和 URN 是 URI 的子级

• DNS解析：域名与对应ip转换的服务器

• DNS解析顺序：根 > .comjspp > 域名 > 二级域名

• TCP标志位：数据包

  • SYN：Sychronize Sequence Numbers 同步序列编号
  • ACK：Acknowledgement 确认字符

• 状态：

  • LISTEN：侦听TCP端口的连接请求
  • SYN-SENT：在发送连接请求后等待匹配的连接请求
  • SYN-RECEIVED：在收到和发送一个连接请求后等待对连接请求的确认
  • ESTABLISHED：代表一个打开的连接，数据可以传送给用户

• UDP：User Data Protocol 用户数据报协议

• UDP应用场景：无需确保通讯质量且要求速度快，无需确保信息完整

• HTTP是不安全的(监听和中间人攻击等手段，获取网站账户信息和敏感信息)

• HTTP协议的传输内容都是明文，直接在TCP连接上运行，客户端和服务器都无法验证对方身份

• HTTPS协议的传输内容是被SSL/TLS加密， 且运行在SSL/TLS上，SSL/TLS运行在TPC连接上，所以数据传输是安全的

• 报文组成

  • 对报文进行描述的起始行
  • 包含属性的首部/头部(header)
  • 包含数据的主体(body)(可选项)

• 报文请求方式：

  • GET/POST
  • OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法
  • HEAD：返回与GET请求相一致的响应，响应体被返回
  • PUT：向指定资源位置上传其最新内容(form表单不支持)
  • DELETE：请求服务器删除request-URI所标识的资源(form表单不支持)
  • TRACE：回显服务器收到请求，主要用于测试或诊断
  • CONNECT：连接改为管道方式的代理服务器

• GET主要用来获取数据

• GET的数据在请求体中是查询字符串参数(Query String Parameters)

• POST主要用于传输数据到后端进行增加，删除，更新数据，提交表单

• POST的数据在请求体中是表单数据(Form Data)

• GET过程：

  • 第三次握手，浏览器确认并发送请求头和数据
  • 服务器返回200 OK响应
  • GET会进行数据缓缓，POST不会

• Etag：服务端资源唯一标识符(优先级高于Last Modified)

• Last-modified：资源在服务器最后修改的时间(精确到秒) -> 所以需要唯一标识符

  • 第一次访问index.html(响应头) - 200 OK
  • 第二次访问 index.html(请求头) - 304 Not Modified
  • 第三次访问index.html(响应头) - 200 OK

• Pragma：no-cache(http1.0) 指示浏览器忽略资源缓存副本，每次访问需要到服务器获取

• Cache-Control缓存控制(响应头)

  • no-cache：指示浏览器忽略资源缓存副本，强制到服务器获取资源(浏览器依旧缓存)
  • no-store：强制缓存再任何情况下都不要保留任何副本
  • max-age=31536000：指示缓存副本的有效时长，从请求时间开始到过期事件之间的秒数
  • public：表明响应可以被任何对象(包括：发送请求的客户端，代理服务器等)缓存
  • private：表面响应只能被单个用户缓存，不能作为共享缓存(即代理服务器不能缓存它)

• HTTP短连接与长连接

  • 默认开启：Connection: keep-alive
  • 如需关闭：Connection: close

• 四次挥手：

  • FIN：finish关闭连接 数据包
  • FIN-WAIT-1：等待原创TCP的连接中断请求，或先前的连接中断请求的确认
  • FIN-WAIT-2：从远程TCP等待连接中断请求
  • CLOSE-WAIT：等待从本地用户发来的连接中断请求
  • LAST-ACK：等待原来发向远程TCP的连接中断请求的确认
  • TIME-WAIT：等待足够的时间以确保远程TCP接收到连接中断请求的确认
  • CLOSED：没有任何连接状态

重难点：

四次挥手过程：

• 连接建立状态

• 一次挥手：

  • 客户端 -> 服务器：发送连接关闭报文
  • 报文首部：FIN-1
  • 序列号 seq = u
  • 客户端状态为FIN-WAIT-1

• 二次挥手：

  • 服务器 -> 客户端：收到连接关闭报文，并发送确认报文
  • 报文首部：ACK = 1 ack = u + 1(确认FIN)
  • 序列号 seq = v
  • 服务器状态为CLOSE-WAIT(连接半关闭状态)
  • 客户端进入等待2状态FIN-WAIT-2

• 三次挥手：

  • 服务器 -> 客户端：确认数据已发送完毕后，继续发送连接关闭报文
  • 报文首部：FIN = 1 ACK = 1 ack = u + 1(确认上一次数据包)
  • 序列号 seq = w
  • 服务器进入最后确认状态LAST-ACK

• 四次挥手：

  • 客户端 -> 服务器：发送接收确认报文
  • 报文首部：ACK = 1 ack = w + 1(确认上一次数据包)
  • 序列号 seq = u + 1
  • 进入时间等待状态TIME-WAIT
  • 服务器进入TCP关闭状态CLOSE

第三周

知识整理：

页面渲染机制：

• domTree解析 ：

  • domTree 树型结构 ，解析引擎将html结构转为树形结构
  • DOM树满足一个深度优先解析的原则
  • DOM树构建是html元素节点的解析
  • DOM树不管内部资源的问题

• domTree加载：

  • 解析的过程伴随着加载的开始
  • 先有了解析才会有加载
  • 解析和加载异步完成的

• CSS树:

  • 也满足深度优先
  • 会忽略浏览器不能识别的样式

• 渲染树:

  • 渲染树每个节点都有自己的样式
  • 不包含隐藏节点(display: none, head之类不需要绘制的节点)
  • 包含影响布局的样式都要绘制(visibility: hidden)
  • 渲染树上的每一个节点都会被当作一个具有内容填充，边距，边框，位置，大小等其他样式的盒子

• 回流时，浏览器会重新构建受影响部分的渲染树，渲染树一旦被改变或重新构建一定会引起重绘。

• 引起回流的因素：

  • DOM节点增加，删除
  • DOM节点位置变化
  • 元素的尺寸，边距，填充文字/图片，边框，宽高
  • DOM节点display显示或隐藏
  • 页面的渲染初始化
  • 浏览器窗口变化
  • 向浏览器请求某些样式信息offset/scroll/client/width/height/getComputeStyle()/currentStyle

• 优化：要考虑回流次数的问题

• 优化：要考虑涉及节点数量

• 时间线:在浏览器加载页面开始的那一刻到页面加载完全结束的这个过程中，按顺序发送的每一件事情的总流程

• 页面加载三个阶段

  • document.readyState = 'loading'
  • document.readyState = 'interactive'
  • document.readyState = 'complete'

• window.onload与DOMContentLoaded的区别:文档解析完成后立马触发DOMContentLoaded事件，而window.onload是等到页面加载完成时才触发，所以不用window.onload是因为浪费时间

• 渲染引擎: 内容具备一套绘制图像方法集合，渲染引擎可以让特定的方法执行，把HTML/CSS代码解析成图像显示再浏览器窗口中

• 浏览器渲染引擎进程(浏览器内核)是多线程的：

  1. JS引擎线程(单线程)DOM冲突
  2. GUI线程(互斥)
  3. http网络请求程序 webAPIs
  4. 定时器触发线程
  5. 浏览器事件处理线程

• 数据量大会怎样？

  • 方法一：SSR服务端计算，前端渲染
  • 方法二：webworker
• JS运行原理：JS引擎线程(单线程)，同时执行异步执行(事件驱动)

重难点：

时间线：

1. 生成document对象(JS起作用)
2. 解析文档，构建DOM树，document.readyState = 'loading'，页面加载第一阶段：加载中
3. 遇到link标签会新开线程异步加载css外部资源文件，style开始构建CSS树
4. 没有设置异步加载的script标签，阻塞文档解析，等待JS脚本加载并执行完成后，继续解析文档
5. 异步加载script，异步加载JS脚本并执行，不阻塞解析文档，不能使用document.write()
6. 解析文档遇到img先解析这个节点 ，创建加载线程，异步加载图片资源，不阻塞解析文档
7. 文档解析完成且可以交互，document.readyState = 'interactive'，页面加载第二阶段：解析完成
8. 文档解析完成后立马defer script JS脚本开始按照顺序执行
9. 文档解析完成后立马触发DOMContentLoaded事件，可以监控文档解析完成(不等于文档加载完成)时间，同步程序的脚本执行阶段往事件驱动阶段
10. async script加载并执行完毕，img等资源加载完毕，window对象中的onload事件才触发，document.readyState = 'complete'，页面加载第三阶段：页面加载完成

第四周

知识整理：

• let特点：同一作用域下，let不允许重复声明

• let特点：不会声明提升，会产生一个暂时性死区

• let特点：只能再当前的块级作用域下生效

• 块级作用域：是没有返回值的

• const特点：定义的常量必要要赋值

• const特点：一旦定义必须赋值，值不能被更改

• const特点：有块级作用域，存在暂时性死区

• const特点：常量不能重复声明

• const只保证指针地址没错，但不保证地址里数据内容不被更改

• 形参默认值会影响函数内声明造成重复声明报错

• 里层声明时拿不到父级作用域的变量会报错

• 惰性求值：当函数的参数为表达式的时候，会重新计算表达式的值

• 解构赋值依然是一个赋值的过程

• 变量多，值少的情况以undefined填充

• 对象的解构是不存在顺序的

• 箭头函数this指向 由外层函数的作用域来决定的

• 箭头函数不能作为构造函数来使用

• 箭头函数没有arguments对象，用rest(拓展运算符替代)

• 箭头函数yield 命令不能生效，在generator 函数中

• 箭头函数没有this机制，指向是固定的

• 箭头函数在定时器内部可以通过闭包访问父级作用域的属性

• 适合箭头表达式的情况：

  • 返回值单一，只有唯一的表达式，函数内部没有this引用
  • 递归
  • 事件处理函数绑定/解绑
  • 内层的函数表达式需要调用this，用var _self = this; bind(this)确保适当的this指向时
  • var args = Array.prototype.slice.call(arguments) 用箭头函数比较好

• 不适合箭头表达式的情况：

  • 函数声明，执行语句比较多的
  • 还需要用到递归
  • 还需要引用函数名
  • 事件绑定，解绑定

• 展开运算符：收集实参得到的是数组而不是类数组

• 展开运算符：展开实参得到的是单独的值

• 展开运算符不能通过length属性访问,只能访问实际实参的长度

• 属性描述符可以检测属性特征的方法

• getter/setter：获取属性赋值操作

• symbol值解决对象属性名重名

• for in：遍历自身和继承的可枚举属性(不包括含Symbol类型的值)

• Object.key()：遍历自身不包含Symbol类型的值

• Object.getOwnPropertySymbols()：遍历自身的Symbol类型的值

• Object.assign()：遍历自身可枚举的，包含Symbol类型的值

• JSON.stringify()：遍历自身可枚举的属性

• 迭代器是一种有序的，连续的，基于拉取的一种消耗数据的组织方式

• 具有部署迭代器接口的数据结构有：Array/Map/Set/weekMap/weekSet/arguments/nodeList

• for of为了解决迭代器iterator().next()调用繁琐而新增的API

• Array.from()将数组/类数组/部署迭代器接口的对象转化成真正的数组

• Array.of()使用指定的参数作为定义数组里的数组元素

• Object.keys()：遍历出自身的可枚举的键名(不含继承属性)

• Object.values()：遍历出自身的可枚举的键值(不含继承属性)

• Object.entries()：遍历出自身的可枚举的键值对(不含继承属性)

• super指向的是对象的原型对象

• Map()存放的是对象，有键名和键值，且键名不限于字符串，也可以是对象，也可实现一一对应的关系

• Set成员唯一的数组

• extends关键字：实现继承关系

重难点：

• Promise异步操作的特征

  • 特征一：具有共有的状态，且状态不受外界影响

    • 进行中 - pending
    • 已成功 - fullfilled(resolve)
    • 已失败 - reject

  • 特征二：状态的不可逆性

    • promise固化以后，再对promise对象添加回调，是可以直接拿到结果的
    • 如果是事件的话，一旦错过就错过了

• 宏任务队列/微任务队列：在JS异步代码中，存在宏任务队列和微任务队列

  • 宏任务：定时器
  • 微任务：resolve/reject()的回调函数then()

• 同步任务 -> 事件轮巡 -> 主线程全部任务完成 -> 调用任务队列当中的回调函数推入到执行栈中，存在优先权的问题：

  1. 微任务/微任务中的回调函数先执行(then())
  2. 再执行宏任务

第五周