Codes

核心知识点概览

前端

JavaScript & html

  1. function 创建(2),作用(3),子类型(3)
  2. object 创建(3),属性(3),创建属性,属性的描述 2*4
  3. Array of from isArray length prototype
  4. Array.prototype 修改添加 5 ，查找 5，遍历 4，排序 2，合并，其他
  5. Object 创建 2，获得对象的属性 5，修改对象的属性 2，其他 3
  6. Object.prototype constructor, hasOwnProperty, isPrototypeOf,propertyIsEnumerable,toString,valueOf
  7. String length, name, ptototype, fromCharCode, fromCodePoint, raw
  8. String.prototype 查找 11 ，拼接，截取 3，替换，转换 5，分割，填充，重复
  9. RegExp 属性 source，flags，global，ignoreCase，multiline，lastIndex
  10. RegExp 方法 exec，test，toString
  11. Promise 状态 pending, fulfilled，rejected ；方法 all race
  12. 方法统计
    • 正则相关 match，matchAll，replace，search，split ，includes，startsWith 和 endsWith
    • 回参新数组 4
    • 修改原数组 8
  13. 闭包 嵌套函数，内部函数可以引用外部函数的参数和变量。参数和变量不会被垃圾回收机制收回 js闭包
  14. 原型链 原型链是 JavaScript 中实现继承的主要方式之一。在 JavaScript 中，每个对象都有一个内部属性，称为 Prototype，这个属性引用了另一个对象。这个被引用的对象被称为原对象的“原型”。通过这种方式，对象可以继承和共享属性和方法。原型链
    1. 原型对象 每个 JavaScript 对象都有一个原型对象，除了 Object.prototype，它是所有对象的最终原型。
    2. 对象的原型访问 可以通过对象的 __proto__ 属性或者 Object.getPrototypeOf(obj) 方法访问一个对象的原型。
    3. 继承 当尝试访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端
    4. constructor 在 JavaScript 中，constructor 属性是每个对象都具有的一个属性，它指向创建该对象的构造函数。这个属性在对象的原型上定义，因此所有通过同一个构造函数创建的对象都会共享同一个 constructor 属性。
    5. prototype
    6. Prototype __proto__
    7. 四个等式
  15. 运算符js运算符
    • instanceof object instanceof constructor
    • typeof（9）typeof obj 回参 string
    • ++前置后置
    • delete object['property'] 回参布尔
    • ?? ??=
  16. 运算顺序js运算顺序 括号，一元，算数，关系，相等，逻辑，赋值，逗号
  17. 类型转换 js类型转换
  18. js 选择器 5
    • getElementById
    • getElementsByClassName
    • getElementsByTagName
    • querySelector
    • querySelectorAll
  19. 事件循环 （Event Loop）16 多线程
    • 事件循环：如果调用栈为空，事件循环会从微任务队列中取出任务执行，直到微任务队列为空。微任务执行完成后，事件循环会检查调用栈是否为空。如果调用栈为空且微任务队列为空，事件循环会从任务队列中取出任务执行。
    • 调用顺序 调用栈 (后进先出 )->任务队列(先进先出) 不等于执行顺序
      • 同步任务 调用栈
      • 微任务 微任务队列 Promise 回调 MutationObserver
      • 宏任务 任务队列 setTimeout setInterval I/O UI 渲染
      • requestAnimationFrame
      • 重绘
  20. es6 （5）98 es6新内容
    1. 类
    2. 模块
    3. 新增语法 6
    4. 新增对象 5/7
    5. 原有对象新增属性
  21. this （6）
    • 全局
    • 普通函数
    • 对象的属性
    • 构造函数
    • 箭头函数
    • call，apply，bind 逆向调用
  22. 正则正则表达式
    • 表达式 3 [abc] [0-9] (x|y)
    • 元字符 \d \s \b \uxxxx ^ $ . \w
    • 量词 6 n+ n* n? {n} {n,} {n, m}
  23. HTML5 html5新功能
    1. 语义化标签
    2. 多媒体 2 多媒体
    3. canvas 和 svg canvas
    4. 表单增强 3
    5. Web 存储 3
    6. 地理位置Geolocation API地理位置
    7. WebSocket 15 WebSocket
    8. 拖放 API Drag and Drop API 拖拽
    9. 异步脚本加载
      • <script async> 下载完成后立即执行 多个 async 脚本的执行顺序不确定
      • <script defer> 延迟到 HTML 解析完成后执行 多个 defer 脚本会按顺序执行
  24. Cookie 属性cookie
    1. Expires < Max-Age
    2. Domain
    3. Path
    4. Secure
    5. HttpOnly
    6. SameSite
  25. 严格模式 5 js严格模式
    1. with
    2. arguments.callee
    3. 删除不可删除的属性会报错
    4. eval
    5. this 指向全局对象
  26. DOM 事件09 DOM事件
    1. 事件：用户界面，鼠标事件，键盘，表单
    2. 事件流：捕获阶段，目标阶段，冒泡阶段
    3. 事件冒泡（Event Bubbling）是浏览器中事件传播的一种机制，指的是当一个事件在 DOM 树中发生时，该事件会从事件的目标元素（事件的起始点）开始，逐级向上传播到根元素的过程。
    4. 阻止 e.stopPropagation()，e.cancelBubble = true (IE)
    5. 阻止默认 e.preventDefault()，e.returnValue = false  (IE)
  27. canvas
    1. 初始化
    2. 方法
      1. 绘制矩形
      2. 绘制路径
  28. 内部函数
  29. ie
  30. observer
    1. Event Observers
    2. Mutation Observers（DOM 变化监听器）
    3. Intersection Observers（视口监听器）
    4. Resize Observers（尺寸监听器）
    5. Performance
  31. Performance API

CSS

  1. CSS 选择器 CSS 选择器
    1. 基本选择器 #.tag ，
    2. 组合选择器 后代 ，子代 >，相邻兄弟 +，通用兄弟 ~
    3. 伪类选择器 链接，结构 :nth-child(n)，动态 :focus
    4. 伪元素选择器 ::before
  2. CSS 选择器权重! important 10000，内联 1000，id100，类属性伪类 10，元素伪元素 1，通用，子，兄弟，后代 0
  3. CSS 动画 CSS 动画
    1. 渲染过程 样式计算、布局、绘制和合成
    2. 关键帧动画 @keyframes+animation
    3. GPU 加速 transform，opacity ;will-change
    4. 重排
      1. DOM 结构变化
      2. 元素尺寸变化
      3. 内容变化
      4. 样式计算
      5. 其他滚动条，元素聚焦
    5. 重绘 是指在元素的几何属性没有变化，但是元素的外观（如颜色、阴影、边框颜色等）发生变化时，浏览器需要重新绘制元素的过程 CSS滤镜效果
  4. CSS 居中居中
    1. 居中 水平 3，垂直 2
    2. 水平垂直 flex，grid，绝对定位+transform，table-cell，margin
  5. CSS3 CSS3 新内容
    1. 布局相关 2
    2. 动画与效果 3
    3. 视觉效果 3
    4. 字体与文本 2
    5. 其他特性 3
  6. flex 布局flex
    1. 容器 flex container
      • flex-direction：定义主轴的方向（是水平还是垂直）。
      • flex-wrap：定义项目是否应该在必要时换行。
      • flex-flow：flex-direction和flex-wrap的简写形式。
      • justify-content：定义项目在主轴上的对齐方式。
      • align-items：定义项目在交叉轴上的对齐方式。
      • align-content：定义多行项目在交叉轴上的对齐方式。
    2. 项目 flex items
      • order：定义项目的排序顺序。数值越小，越靠前。
      • flex-grow：定义项目的放大比例。如果容器有多余的空间，项目可以放大。
      • flex-shrink：定义项目的缩小比例。如果容器空间不足，项目可以缩小。
      • flex-basis：定义项目在主轴上的初始大小。
      • align-self：允许单个项目有与其他项目不同的对齐方式。
      • flex：flex-grow、flex-shrink和flex-basis的简写形式，默认值为0 1 auto。
    • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
  7. 盒模型盒模型
    1. content 内容区域
    2. padding 内边距
    3. border 边框
    4. margin外边距 ：上2. 流布局 Flow Layoutyout
    • 块级元素（Block-level Elements）
      • 独占一行
      • 高度宽度
      • 内边距和外边距
    • 行内元素（Inline Elements）
      • 同一行显示
      • 高度宽度由内容决定
      • 内边距和外边距左右
    • 行内块元素（Inline-block Elements）
      • 同一行显示
      • 高度宽度
      • 内边距和外边距
    • display
    • float浮动元素会脱离文档流，可能导致父元素高度塌陷。
    • clear需要通过清除浮动（clear: both;）来解决
  8. 高度塌陷
    • 原因
      • 浮动元素：当父元素只包含浮动的子元素时，父元素的高度会塌陷，因为浮动元素脱离了文档流
      • 绝对定位：如果子元素使用绝对定位 (position: absolute)，它将脱离文档流，这也会导致父元素的高度不能正确计算
      • 行内元素：父元素仅包含行内元素（如 <span> 等），这些元素的高度会很小，从而导致父元素高度塌陷。
      • flexbox 特殊情况：在使用 Flexbox 但没有适当地设置子元素的 Flex 属性时，可能导致子元素无法正确占据父元素的高度
    • 解决方案
      • 清除浮动：可以通过在父元素上添加一个 .clearfix 类，并在CSS中定义相应的样式来清除浮动元素对父容器的影响
      • 使用伪元素：在父元素的 ::after 伪元素中添加 content: ""; display: table; clear: both; 样式，以清除浮动
      • 设置父元素高度：
      • 使用 min-height
  9. 主题切换
  10. CSS 变量
  11. 相对绝对

网络

  1. TCP/IP 协议
    1. 链路层 以太网、Wi-Fi、PPP
    2. 网络层 IP
    3. 传输层 TCP、UDP
    4. 应用层 HTTP、FTP、DNS、SSH
  2. OSI（开放系统互连）七层模型：物理层，数据链路层，网络层，传输层，回话层，表示层，应用层
  3. 协议
    1. tcp（传输控制协议）提供可靠的、面向连接的、有序的字节流服务，适用于对数据可靠性要求较高的场景
    2. udp 提供无连接的、不可靠的、基于数据报的服务，适用于对实时性要求较高的场景
    3. ip为网络中的设备提供唯一的地址标识（IP 地址），并负责将数据包从源主机传输到目标主机
    4. http 客户端和服务器之间的通信
    5. dns 互联网中用于将域名转换为IP地址的服务
  4. http HyperText Transfer Protocol，超文本传输协议
    • http 请求 请求头，请求体；
    • http 响应 状态行，相应头，响应体
    • 特点 无状态，无连接，媒体独立，简单快速
    • http2/3 二进制分帧、多路复用、服务器推送、头部压缩，性能和可靠性
    • https Secure
  5. WebSocket 在单个 TCP 连接上进行全双工通信的方式
    • 特点
      • 长连接 持久连接
      • 全双工通信 服务器和客户端之间同时进行数据的发送和接收
      • 基于 HTTP 的握手->WebSocket 握手-> WebSocket 连接
      • 支持二进制数据传输Blob 或 ArrayBuffer
    • WebSocket API
      • 属性
        • readyState 0,1,2,3
        • bufferedAmount表示已发送但尚未被浏览器传输的数据量（以字节为单位）
        • extensions表示服务器选择的 WebSocket 扩展
        • protocol
        • url
      • 方法
        • constructor(url, [protocols])
        • send(data) 向服务器发送数据
        • close([code], [reason])
      • 事件 socket.addEventListener('open',(e)=>{}) 等价 ws.onopen
        • open：当 WebSocket 连接成功建立时触发。
        • error：当 WebSocket 连接发生错误时触发。
        • message：当从服务器接收到数据时触发。
        • close：当 WebSocket 连接关闭时触发。
    • 工作流握手, 数据传输，关闭
    • 心跳用于维持客户端与服务器之间长连接的一种保活机制
      • 客户端建立连接
      • 客户端定时发送心跳数据包
      • 服务器在设定时间内没有收到心跳，会发送关闭连接请求
      • 服务器定时发送心跳数据包，客户端接收并返回响应
      • 客户端在设定时间内没有收到心跳，会重新连接

Vue

  1. 基础 01 Vue 基础
    1. 初始化
    2. 常用模板语法
    3. 生命周期函数
    4. 数据和方法 data() & methods
    5. 计算属性和侦听器 computed & watcher
  2. 组件 02 Vue 组件
    1. 组件 component
      1. 全局，局部
      2. 命名方式
    2. 组件传值
    3. 插槽 slot 和具名插槽
    4. 动态组件和异步组件
  3. 动画
  4. 高级语法 04 Vue 高级语法
    1. 混入 mixin
    2. 自定义指令directive
    3. 传送门 teleport
    4. render
    5. plugin
  5. composition api 05 Vue3 Composition API
    1. setup
    2. ref 和 reactive
    3. toRef 和 toRefs
    4. context 参数
    5. 计算属性 computed
    6. watch 和 watchEffectect
    7. provide, inject
    8. 模版 ref
  6. Vue 特点
    1. 数据绑定
    2. 虚拟 DOM
    3. 事件
    4. 计算属性和侦听器
    5. 指令系统
    6. keep-alive
    7. $属性 6，$ 方法 8 vue的$
  7. Vue 组件通信
    • props 和 $emit
    • none-props 和 $attrs
    • 插槽 slot
    • Vuex/Pinia
    • provide/inject
  8. Vue 生命周期函数
    1. Vue2
      • 创建 beforeCreate，created
      • 挂载 beforeMount，mounted
      • 更新 beforeUpdate，updated
      • 销毁 beforeDestroy，destroyed
      • keep-alive activated，deactivated
    2. Vue3
      • setup 在 created，移除创建 2 个
      • 挂载beforeMount，mounted
      • 更新 beforeUpdate，updated
      • 销毁 beforeUnmount，unmounted
      • keep-alive activated，deactivated
      • 渲染onRenderTracked，onRenderTriggered
  9. Vuex
    • state 存储应用的状态
    • mutations 用于同步修改状态的方法
    • actions 用于异步操作，最终通过调用 mutations 修改状态
    • getters 类似于 Vue 的计算属性，用于派生状态
    • 顺序
      1. dispatch 方法，派发一个 action，名字叫做change
      2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法
      3. commit 提交一个叫做 change 的数据改变
      4. mutation 感知到提交的change改变，执行 change 方法改变数据
  10. pinia State（状态）：存储需要共享的数据。Getters（计算属性）：基于状态的派生值。Actions（操作方法）：用于修改状态的函数
  11. Vue 插件 Vue-devtools，router，Vuelidate，Axios，状态管理，lazyload

其他

  1. 兼容性 兼容性解决方案 前端兼容性
    • CSS 解析差异 3
    • JavaScript API
    • 响应式布局
    • 图片兼容性
    • 字体兼容性性
  2. 安全 https，数据加密，安全储存，权限控制，输入验证
  3. 跨域 CORS 域名、协议或端口不同
    1. CORS 头部
    2. jsonp 淘汰
    3. 文档域
    4. PostMessage
    5. WebSocket
    6. 代理服务器
  4. 登录鉴权
    1. cookie 自动携带，服务器存储；安全风险，太小，
    2. token（JWT JSON Web Token）无状态，安全，支持跨域；需要手动携带，有存储风险
    3. Session 安全，服务控制；服务器负担，跨域限制
    4. OAuth2.0 标准化，安全；复杂
  5. electron00 electron
    1. 常见 API
      1. app 生命周期事件，Electron 应用的入口模块
      2. BrowserWindow创建和管理应用中的窗口 webPreferences
    2. 通信 ipcMain 和 ipcRenderer
    3. 开发流程
    4. 其他模块
      1. dialog
      2. menu 和 MenuItem 模块
      3. shell 模块用于在系统中打开外部链接、文件管理器等
      4. clipboard 模块用于读写系统剪贴板的内容
      5. powerMonitor 模块用于监听系统电源状态，如系统唤醒、待机
      6. systemPreferences 模块用于访问系统偏好设置，如颜色模式
      7. globalShortcut 模块用于注册全局快捷键，即使应用不活跃时也能捕获键盘输入
      8. fs
      9. chokidar 监听文件变化
    5. 缓存
    6. 打包
  6. D3 Data-Driven Documents d3
    1. 选择元素select,selectAll
    2. 数据绑定data
    3. 设置属性和样式styleattr
    4. 事件监听on
    5. 动画和过渡transition()
    6. 加载外部数据
  7. SVG（可缩放矢量图形）setAttribute
    1. 特点
      1. 矢量图形
      2. 可交互性
      3. 可嵌入性
  8. 性能
    1. 网络
      1. 减少 HTTP 请求次数
        1. 合并文件
        2. 内链资源：小图片或 cssjs 代码内链或 data URI
        3. 按需加载代码分割Code Splitting，懒加载Lazy Loading
      2. 缓存优化
        1. 合理的缓存策略：静态资源 Cache-Control 强缓存
        2. CDN？
        3. 预加载 link preload&prefetch
      3. 减少资源大小
        1. 图片优化：现代图片格式，压缩图片大小，雪碧图
        2. 代码压缩：代码压缩，移除注释，空格，tree sharing
    2. 开发
      1. 优化 html 和 css
        1. 重排重绘减少，尽量使用 GPU 加速友好的 transform 和 opacity
        2. CSS 预处理器
        3. 避免选择器过深，3-4 作用
      2. 优化 JavaScript
        1. 减少全局变量
        2. 优化 DOM 操作，减少操作 DOM 次数
        3. web workers 来计算耗时任务
        4. 避免内存泄露
          1. 定时器
          2. 事件监听器
          3. DOMNODE
        5. 防抖截流
        6. SSR 服务端渲染
        7. 虚拟滚动
        8. 真分页
      3. 使用现代化工具
        1. 渲染优化
          1. 计算属性和监听器可以减少组件渲染
          2. v-if 和 v-show
          3. 虚拟滚动
          4. 虚拟 DOM，diff 算法
        2. 加载优化
          1. 路由懒加载
          2. 异步组件
          3. 代码分割
        3. 状态管理
          1. 缓存计算结果
        4. 响应式优化
          1. 使用 shallowReactive 和 shallowRef
        5. 组件优化
          1. keep-alive 组件或路由
          2. 减少过于复杂的组件
        6. 工具和策略
          1. vue devtools
            1. 组件加载时间
            2. 录制动作：滚动，按钮
          2. SSR
          3. PWA
          4. Performance API
  10. TS
  11. 浏览器渲染流程
  12. 命名规范