前端笔记合集｜ 青训营笔记

kiri
155 阅读26分钟

青训营课程笔记

计算机网络概论

蟹堡王案例：客户端和服务器连接的演化

网络的的基本组成：城域网，局域网，广域网

常用的交换方法：电路交换->分组交换

通信的基础：协议，表头和载荷

http1.0:需要建立多个tcp连接

http2.0:拆分到多个帧进行连接,多路复用，解决队头堵塞

http3.0：QUIC UDP 1RTT

CDN：分布式服务器 拉策略（用户决定要什么资源） ， 推策略（服务端推送到cdn服务器）

WebSocket: 有状态的持久连接

网络安全：三要素--机密性，完整性，身份验证

如何加密：加密方式，对称加密，非对称加密

Linnux 基础

操作系统启动流程 bios 或者 UEFI 固化在主板上的一段程序

UEFI->BootLoader->os

Linux: 分为内核版本，发行版本(封装内核版本)

linnux 系统分为 ;内核，shell，文件系统，应用程序

Linux 指令：

查看Linux 指令 内核版本 uname -a 或者是 cat/proc/version

发行版本：cat/stc/os-release

df-T 命令报告文件系统的磁盘利用率

mount 命令 是挂载文件系统用的

查看文件夹下的内容 ls

创建文件夹 mkdir demo

移动文件 mv demo/home

删除文件 rm -r demo 删除demo文件夹

touch file.txt 创建空文件

cp file.txt file_bak.txt 复制文件

文件读取流程：分为硬件空间，内核空间，用户空间

查看启动的nginx 进程

ps -ef|grep nginx

应用：服务器，用户操作系统，硬件嵌入式

linux 体系 结构： 分为用户空间（应用程序使用）和内核空间（操作系统使用）

进程管理：进程是一个真正执行的程序或者是命令，有自己的地址空间占用一定的系统资源，一个cpu同时只能运行一个进程，进程由他的进程ID和父进程 的进程ID唯一识别。

Linux 中一切皆文件，通过 VFS 虚拟文件系统来提供一个标准文件操作接口（来操作不同的文件）

用户账号：

用户账号，组账号（可以容纳多个用户），私有组（只有用户自己）

文件权限：就是通过用户账号+文件权限来限制文件的修改权限

软件包管理：

软件包可以是应用程序，GUI 应用程序，命令行工具或者是软件库

软件包管理分为

底层工具：安装和删除包文件等 任务DPKG，RPM

上层：主要用于数据的搜索和 依赖解析任务 APT YUM DNF

Shell 脚本与编程

shell 的作用

1.Linnux 服务器的基本操作

2.Node.js 服务的进程管理，问题排查，资源监控

3.shell 编写TCE,SCM.Docker 脚本，完成服务编译和部署

课程准备：

linux 的主机，可运行shell脚本

本地vscode 安装 Bash Debug 插件并且升级到4.x

Npm全局安装 zx依赖

Shell 的基本概念，

终端，获取用户输入展示运算结果的硬件设备

tty，teletypeWrite的简称和终端等价，在linux 里面是输入输出 环境

终端模拟器，mac Terminal iTerm2 等，关联tty的输入输出软件

shell （类似于编程语言）command interpreter ，将处理来自终端的输入，解释之后输出给终端

Bash，一种具体的shell 变体

shell 的vs code插件

shellman 代码提示和自动补全

shellcheck 代码语法校验

shell-format 代码格式化

Bash Debug 支持单步调试

编程范式

编程语言分为：机器语言，汇编语言，中级语言，高级语言

面向对象：c++ ，函数式：lisp 多范式：js

编程范式 命令式和声明式-> 命令式： 面向过程/面对对象 |声明式： 函数式和响应式

面向过程：数据和算法关联比较弱，不利于修改和扩展，不利于代码重用

面向对象：继承，封装，多态

面向对象的五大原则：

1.单一职责的原则（功能单一）

2.开发封闭原则 （可以扩展不可以更改）

3.里式替换原则（子类可以替换父类）

4.依赖导致原则

5.接口分离原则

面向对象的问题：它总是要附带所有它需要的潜在在环境

函数式编程：

函数优先级较高、纯粹的函数没有副作用、高阶函数,闭包

响应式编程的compose

合并，过滤，转化，异常处理，多播

特定领域的语言：

HTML,SQL 设计思路：lexer->parser->tools->visitor

web 浏览器

浏览器的进化

1.单进程 架构

2.多进程架构：主进程，网络进程，渲染进程，GPU进程，插件进程

3.面向服务端架构将原来的UI 数据库、文件、设备

渲染进程：多线程架构，分为js引擎，GUI引擎，定时器触发，网络线程，事件触发

JS引擎的流程 JS源码-js解析器-> AST->字节码->操作系统

渲染引擎->生成Dom树， 和cssom 树 合成渲染树 ->布局->构建图层->光栅化->展示

浏览器优化：

1首屏优化：压缩、分包、删除无用代码、静态资源的分离、JS脚本非阻塞加载、缓存策略、SSR 、预制loading、骨架屏

2渲染加速： GPU 加速，transform动画 减少回流重绘 离屏加速 懒加载

3JS优化：防止内存泄漏，循环尽可能break，合理使用闭包，减少Dom访问，防抖节流，webworker

跨端方案：

webview，小程序，RN/weex lynx Flutter

webview 实现原理

webview 即网页视图用于加载Url，可以嵌入在移动端app 里面

JS环境中提供通信的 JSBridge，Native 端提供SDK 响应 JSBridge 发出调用

前端和 客户端分别实现对应功能能模块

React Native/weex

1.原生组件的渲染

2.React/Vue框架

3.virtual dom

4 JSbirdge

跨端容器的基本原理

1.UI组件

2.渲染引擎

3.逻辑控制引擎

4.通信桥梁

5.底层Native api磨平差异

前端语言串讲

前端 三件套：HTML ， CSS ,JS

JS 8种基本类型 String，Number，Boolean，Null，Undefined，Symbol bigInt Object

浏览器进行渲染的过程 ： 构建dom树->构建css树->构建渲染树->排版分图层->分块->光栅化->渲染

CSS 的引入 inline （写在标签里面），internalcss（使用style标签进行引入），External （link标签）外部文件

JavaScipt in HTML 使用 script 标签

HTML in JavaScript :jsx

CSS in JavaScript ：使用jss

前端三件套的冷门知识：

HTML 是一种非图灵完备的语言（是不能解决计算逻辑类问题），是一种标签 语言

HTML基本元素：Element 标签元素，文本Text ，注释 Comment，DTD

HTML 标签分类：

文档类：

闭合类：闭合标签

空标签 < br > img input

换行类：块级标签： div 行内元素 span a

H5新元素：语义化标签 ，媒体标签 video audio embed，表单标签 input，功能标签 canvas progress

head 里面常用的标签 ：title （设置页标名字）base meta link script 进行 aria 标签使用标签

H5 常用功能

语义化标签，表单增强，Cookies ,Local Storage Seession Storage IndexedDB

H5 PWA 和 AMP

PWA 渐进式的网页应用程序

  • Service Worker （可以理解为服务工厂）
  • Manifest （应用清单）
  • Push Notification（推送通知）

AMP

Accelerated Mobile Pages AMP HTML 本质上是使用自定义 AMP 属性扩展的 HTML。最简单的 AMP HTML 文件如下

<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

html5 Audio/html video和audio

H5 的 Drag 和 Drop API 进行拖拽

H5 web worker 实现多线程

H5 web socket 进行 全双工

web component 的使用 Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上，

将一个隐藏 Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。Shadow tree：Shadow DOM 内部的 DOM 树。Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。Shadow root: Shadow tree 的根节点。

H5 SVG 和 Canvas

SVG 是 使用向量，使用xml 实现，无损变化，支持事件处理，不用于游戏，

Canvas 是使用位图，是html 标签，有损变化，不支持事件处理，用于游戏，

webGL 使用 API进行绘制

大前端： 跨端的web

班会内容

什么是前端？开发用户交换应用的开发人员 如 web ，小程序，app

web1->看 web2-> 参与提供内容

为什么有前端？chatgpt的出现的影响？

短期不会有大变化，gpt 功能复杂度不行，可视化效果不佳，与业务的沟通，兼容性，安全性的问题 ，工作的复杂性依然存在

前端的入门简单，天花板低？

1.工程化的思维的提升（如何降本增效 框架的设计）

2.平台运营活动，低代码的平台的开发

3.代码开发的优化，性能提升

4.前端在业务链中的协作提升，前后端的协同的优化

5.treejs webGL等方面应用

6.web的视频业务的优化

学习路径推荐？

三件套，web Api react vue webpack ,vite ->性能，图形，编辑器

前端软技能？

基本技术，好奇心，有问题多问

团队协作能力，有效沟通，主动性

结构化思维，数据驱动 ROI 投入产出比

跨端的介绍？

什么项目是好的项目？ 1.后台管理，复杂的数据接口

2.面向用户如 模仿掘金的项目

CSS 的深入

CSS1: 层叠的概念

CSS2：表现和内容分离

CSS3:更加丰富的样式

层叠三大规则：样式表来源，选择器优先级，源码位置

样式表重要来源 ：用户代理样式< 用户样式表<作者演示表（常用的）

选择器的优先级： 内联>id(a)>class=attribute=pseudo-class(b)>type=pseudo-element(c)

​ a b c

ul li .red 0 1 2

源码位置： 根据声明顺序进行判断，后面的声明会覆盖前面的申明 style标签会被后面声明的link标签覆盖

注意： 尽量少使用id，尽量少使用 ！import 自己的样式尽量放在引用库的后面

css 继承的样式继承

大部分的可以继承的样式是和文本相关

color font font-family 之类的

可以使用inherit 的属性选项从父元素继承

css 的值和单位

值： 文字类，关键字，颜色，位置，数组，百分比 ，函数生成 calc（），min（），max（）

单位： px pt cm in 相对长度 em rem ex vw，vh 角度 deg grad turn 时间 s ms 分辨率 dpi dpcm dppx

盒模型：margin border padding content

只有margin 可以进行负移动，负表示向上或者向左

简单案例

向上的三角形

<div id="app"></div>

#app{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent ;
  border-bottom:  50px solid  red;
}

固定比例矩形

<div id="app"></div>
#app{
  background-color: red;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 75%;
}

实现水平居中

<div id="app">
  <div class="son"></div>
</div>

#app{
  background-color: red;
  width: 100px;
  height: 200px;
}
.son{
   background-color: yellow;
   margin: 10px auto;
   width: 50px;
   height: 100px;
}

实现渐变框

<div id="app">
</div>

#app{
  width: 100px;
  height: 200px;
  border-radius: 5px;
  border:8px solid  transparent;
  background-origin: padding-box,border-box;
  background-clip: padding-box,border-box;
  background-image: linear-gradient(to right,pink ,pink),
                      /* 内部的背景图案*/
                     linear-gradient(135deg, #1941ab, #a557ef);
                     /* 边框背景图案*/
}

常规流的布局

外部显示类型：规定盒子如何与同一格式上下文中其他元素的显示

内部显示类型：规定盒子内部的布局方式

常规流里面的盒子，包括块级盒子和内联盒子 内联盒子和块级盒子一布局时 内联盒子会外部包裹一个匿名盒子进行BFC

块级格式布局（BFC---块级元素进行布局） ，内联元素之间会进行 内联格式化布局（IFC--内联元素之间进行布局）

如何触发BFC 特性（不管外面表现是什么，里出现新的块级布局，独立的块级布局）

display：flow-root | inline-block

position：absolute | fixed

float：不为none

overflow：不为visible

BFC 布局的垂直重叠

两个相邻上下边界会融合为更小的边界，这里应该增加padding 和border属性

内联格式上下文

line box 每个内联元素外面有line-box（一个一行大小想盒子），linebox的高是所包裹元素最高的顶部，低是所包裹元素最低的底部 （这两者相减就是line-height）减去内容区就是上下两个half-leading

单行文字进行居中

line-height 和 height 相等

icon和文字垂直对齐

内联元素设置vertical-align：middle 进行对齐

弹性布局

就是flex盒子布局 即使在宽高未的情况下也可以排列和分割一个盒子内部的布局

父盒子包括的属性 先要设置 display：flex；

  • flex-direction：row | row-reverse | column | column-reverse;
  • flex-wrap：nowrap | wrap | wrap-reverse;
  • flex-flow：（合并上面两属性）flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  • justify-content （在横轴上排列）： flex-start | flex-end | center | space-between | space-around;
  • align-items（在纵轴方向上的排列）： flex-start | flex-end | center | baseline | stretch;
  • align-content（二维排列）： flex-start | flex-end | center | space-between | space-around | stretch;

弹性盒子布局案例

文字前缀进行收缩的案例,当缩进文本宽度的时候整个字串只会缩进前缀文字

<div id="app">
  <span class="filename-base">
    this-file-has-a-really-long-filename.
  </span>
  <span class="filename-extention">
     pdf
  </span>
</div>

<style>
    #app{
display: flex;
}
.filename-base{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.filename-extention{
  flex-shrink: 0;
}
</style>

色子 一点

<div id="app">
  <div class="dot-one"></div>
</div>
<style>
    #app{
  border-radius: 5px;
  border:2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: flex;
  /* 纵轴居中 */
  align-items: center;
   /* 水平轴居中 */
  justify-content: center;

}
.dot-one{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
</style>

色子 三点

<div id="app">
  <div class="dot-one"></div>
    <div class="dot-middle"></div>
    <div class="dot-end"></div>
</div>
<style>
    #app{
  border-radius: 5px;
  border:2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: flex;
  justify-content: space-around;

}
.dot-one,.dot-middle,.dot-end{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}
.dot-middle{
  align-self: center;
}
.dot-end{
  align-self: flex-end;
}
</style>

层叠上下文

层叠上下文给上下文添加前后坐标z 元素沿着垂直屏幕的z轴进行展开

触发条件如下

postion ：relative 或者是 absolute 同时z-index 不是auto

position：fixed或者是sticky

flex或者grid 并且z-index 不是auto

opacity的值小于1

transform 的值不为none

will-change的值不为通用值

层叠上下文的顺序

根元素的背景和边框 ->z-index<0 -> block元素 -> float 元素 -> inline元素 ->触发条件-> z-index>0的元素->用户的眼睛

注意：z-index 只在一个层叠上下文比较，子元素的z-index无法超越父元素的层叠上下文比较

index 的值最好设置变量进行管理（在less scss），设置区间设置在 10或者 100 之间

css动画

transition：

设置关键帧：

@keyframes: 添加不同进度的动画

animation- 相关属性来添加动画

transform，transition，animation 的性能相关

计算布局（宽高位置等改名）-->文本，着色，边框改变会触发（reflow）GPU加速 --> 所有的图层进行合成

动画的执行顺序：

  1. 例如width 10% ->100% 重新进行布局

  2. 非合成层元素背景色的变化 需要cpu重新绘制主图

  3. 合成层元素文字进行变化 white ->red

  4. 合成层 transform opacity改变（不会影响性能）

优化策略：

1.尽量不要触发 reflow 属性

2.在性能问题时可以触发硬件加速 设置 will-change、设置 transform 3d

3.尽量使用transform 和 opacity 去写动画

响应式设置

媒体查询

在媒体属性满足一定的条件时才会触发一定的样式，可以用在 css 表里面也可以用在link 标签里面

//css
@media screen and （min-width：320px）and（orientation：landscape）{

} 
//符号一定的条件引入相应的样式
<link rel="stylesheet" media="screen and (max-width:600px)" href="smallscreen.css">

使用媒体查询的关键

1.同样遵循 覆盖原则，后面的样式会覆盖前面的（用大屏幕查询去覆盖更小屏幕的查询）

2.由于设备多样化，断点的选择根据内容选择

3.尽快能减少断点

设备像素

像素是显示器上绘制的最小单位，物理像素固定不变

dpi ：每英寸多少点

ppi：每英寸的像素数 分辨率 PPI =x/屏幕宽度=Y/屏幕高度

css 像素 是让人眼通过不同屏幕看到同比例的像素，同一个尺寸具有相同的css像素

设备像素比 DPR ： 设备像素/css 像素

移动端的viewport：

通过meta 标签规定 viewport 里面的属性

常用的设置
<meta name="viewport" content="width=device-width,initial-scale=1">

相对长度：

em字体大小单位，在非font-size属性中使用是相对于自身的字体大小，在font-size上使用是相对于父元素的字体大小（一般不在这个属性上使用，容易引起不必要的故障）

rem根元素字体大小，rem是相对根元素字体大小的值

vw ：视口宽度的1% vh 视口宽度的1%

css预处理语言

预处理器：less scss stlus

1.自定义变量

2.嵌套作用域

3.mixins 继承

4.操作符，条件，循环语句

语言增强 postcss

工程架构：css Module（css工程规范）

BEM 命名规范 ，vue-loader 的scope ，常用 css-loader postcss-module 将css 样式变为全局唯一的名称

css in js（将应用的css 样式写在js文件里面）

inline-style 代表 radium， unique classname styleed-component（css变为一个组件）

styleed-component ：

1.生成一classnaem 作为 componentId

2.生成 和唯一名关联的css字符串

3.唯一名对应的css 样式insert 到 head 和 style 中

4.将两个类名写到目标节点的class

原子化css tailwind 规定好了样式类，调用需要的类设置样式

JS 深入

基本知识：

JS 分为Brower 进程，GPU进程，渲染进程，插件进程，网络进程

渲染进程包括 GUI 线程，JS线程，事件触发线程，定时器触发线程，网络线程

JS线程和GUI线程是互斥的，为了保证效率，JS线程不可与GUI 不可同时运行，防止DOM反复进行渲染

JS 是一种动态语言（弱类型语言），java 是静态语言（强类型语言）有固定的类型

JS 函数式编程 ，解释类的语言 JIT, 安全

JS执行： 源代码 -语法分析/词法分析(执行上下文)->AST->字节码-编译执行->机器码

执行上下文：

变量环境,词法环境（放函数的），Outer（指向外部词法环境的指针），this，可执行代码

JS 只有三种上下文，全局执行上下文，函数执行上下文，EVAL执行上下文（不常用）

全局执行上下文，代码执行的时候会进行创建，将他压入栈底，每个生命周期只有一份

函数执行上下文：当一个函数进行执行的时候，这个代码内部的代码会被编译，生成变量环境，词法环境，当函数执行结束的时候该执行栈从栈顶弹出。

执行上下文干了什么事情，绑定this，创建词法环境，创建变量环境

如果在本级的执行上下文里面找不到会到上一级里面找全局上下文

ESP 记录单前执行状态的指针，ESP 移动会进行垃圾回收

闭包：内存不易删除，因为闭包依赖于一个对象 普通函数的this指向的是window，对象里面的 this执行指向对象

在构造函数里面

new 的操作： 创建临时对象，将this的指向临时对象，执行构造函数，返回临时对象

JS 垃圾回收

栈：ESP指针变化，原来的内存被覆盖

堆：分为新生区(对象区和空闲区 不断翻转)和老生区（长期留存的新生，和比较大的对象）

标记->清除-> 整理

事件循环：

主线程—>微任务-->宏任务

TypeScript深入

为什么学习TS？

是JS的超集，强类型，在编译的时候发现并进行纠错，不允许改变变量的数据类型

具有类型安全，下一代JS特性，完整的工具链

推荐学习链接

GitHub - dzharii/awesome-typescript: A collection of awesome TypeScript resources for client-side and server-side development. Write your awesome JavaScript in TypeScript TS开源的教程与应用

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript (typescriptlang.org) TS在线学习

基本 类型

1.boolean number string

2.枚举类型 enum

3.any unknown void

4.never

5.数组[]

6.元组类型

TS 定义函数类型：

定义输入和输出的类型

输入参数：参数支持可选参数和默认参数

输出类型：输出可以自动判断，没有返回值时，默认void 类型

函数重载：函数名称相同参数不同，通过重载支持多种类型

定义接口：

规定一个函数的类型和变量，可选属性以及只读属性

类：

添加了 public private protected 修饰符

抽象类： 只能被继承，不能进行实例化

作为基类，抽象方法必须被子类实现

高级类型：

当一个变量可能出现多种类型的时候可以使用联合类型和交叉类型

1.联合类型 | 类型取并 2.交叉类型 & 3.类型断言手动指定类型 4 as 别名（给类型取名字尤其是高级类型）

interface 是 TS用来定义对象，type是用来定义类型别名

type可以定义基本类型，interface不行

interface可以合并重复声明，type不行

泛型：

灵活的类型规定，临时占位，根据输入的实参的类型进行规定类型

typeof：获取类型 keyof 获取所有的键 in 遍历枚举类型 T[K]:索引访问类型 extends 泛型约束

泛型工具类型：

Partial 将类型变为可选 Required:将类型变为必选 Readonly:将类型属性变为只读 ，pick Record

TS实战：

declare：三方库需要声明文件

.d .ts 声明文件定义

@types： 第三方TS类型包

tsconfig.json 定义TS的配置，约束后端接口的类型

对后端接口的约束

前端Debug

1.使用浏览器 中的检测功能

可以在elements 里的 styles动态进行修改，进行添加数据

点击勾选类名的生效，可以填选更改的属性

computed 里面进行搜索和筛选属性类型

选中对应的元素右键就可以进行一些常用的功能

console里面的操作

日志操作, console.log 打印日志，console.warn 打印警告 console.error 打印错误 console.debug(蓝色) console.info

console.log可以使用占位符实现 ' %s' 是字符串 %o 对象占位符 %c 样式占位符 %d数字占位符 可见如下案例

console.log('%s %o,%c%s','你好',{ob1:1,age:23},'color:red;','welcome')

console.table (obj) 可以用表格的形式展现对象

console.dir(obj) 用文件树的形式展示obj，比如说查看dom的结构

source 栏目里面

左侧栏目page展示了资源文件，右侧有debug 工具栏

debug 工具栏里面有以下几个功能按键 从左到右是 暂停，单步跳过，进入函数，单步执行

在源码里面的变量进行调试

在JS代码里面 写入 debugger; 打上断点 进行调试 或者使用在对应代码左侧单击添加断点

鼠标悬浮在对应变量的上面可以看到变量的值，或在右侧的watch 里面添加变量观察 对应变量的值

backpoint 是断点的选择，选择断点进行查看

JS代码进行压缩之后就很难进行调试，通过source map （webpack配置里面 devtool:'source-map'）定位具体源码错误，代码进行

上线的文件里面没有source map，source map在错误监控程序里面

network 栏目

network 会显示请求的资源可以筛选请求资源的类型，看到对应的文件的加载速度

点击错误请求，查看右侧的preview是否符合预期

Apliaction栏目

用于查看存储相关的

local Storage、session Storage、 indexed DB 、webSql、Cookie

Storage 里面 可以选择 clear site data 一键清除存储

performance

用于观察浏览器性能,点击左上的圆点开始测试 测试几秒后暂停

FPS 每秒帧数，cpu处理各个任务的时间，NET每个请求的花费时间

下面是线程面板：Frames()，main Raster 线程

Lightjhouse

可以 分析站点的性能，给出评分

关键衡量指标：LCP 最大内容绘制 FID首次输入延迟，CLS累计布局偏移

移动端的调试

真机调试：

没有iphone 可以在 Mac App 里面安装 Xcode 使用其内置的IOS 模拟器

  1. 手机与电脑连接
  2. ios 设置->safari->高级->开启web 检查器 Android 手机进入 开发者模式，勾选USB 调试允许调试
  3. iphone 使用 Safari 浏览器打开调试界面 Android 在电脑chrome浏览器中输入 chrome:// inspect/#devices 并且进行勾选 Discover USB devices 选项
  4. Mac打开 Safari 浏览器调试菜单栏-->开发-->iphone设备名-->选择调试界面 / android 手机允许远程调试，并且访问调试页面
  5. 在弹出的 safari Developer Toolser 中调试 / android 电脑点击 insepect 按键 进入调试界面

vconsole 插件实现手机端的调试

使用代理工具进行调试，比如使用 charles

1.安装 charles 2.查看电脑IP 和端口 3.将 IP 端口号填入手机HTTP代理 4.Charles 允许授权5 SwitchHosts

React 基础

官方资料：React

拓展资料：React技术揭秘 (iamkasong.com)

react hook： 「react进阶」一文吃透react-hooks原理 - 掘金 (juejin.cn)

字节UI：Arco Design - 企业级产品的完整设计和开发解决方案

基础学习知识

React 是使用 js搭建快速响应的大型web 应用程序的首选方法

等待资源加载和大部分情况下浏览器单线程执行是影响web 性能的两大因素

等待资源的优化：

1.React.lazy React.suspense 组件的懒加载，暂停

2.ErrorBoundary 报错组件，错误兜底

浏览器的线程执行: JS执行和UI 执行是不可能进行同时进行的

浏览器计算样式布局，UI 绘制比较慢

1.异步更新

2.时间切片（切分重要的任务）

3.React Fiber

React 的更新流程

调度器

1.维护时间切片 2.与浏览器调度 3.有效级调度

协调器

1.将jsx 变为 Fiber ，Fiber 进行对比 ，确定本次更新的Fiber

渲染器

渲染器用于管理一颗React 树，使其根据平台进行不同的调用

渲染流程如下所示：

setState--> Reconsileer(UpdataeContainer)->（Scheduler）Task列表-->浏览器调度-->优先级调度--> JSX转化为Fiber -->Fiber 树进行对比，确定本次更新的Fiber-->Render 渲染器

构建新的 Fiber 树之后对 每一个节点进行对比

react优点，快速响应Fiber，组件化 复用性强，声明式编程，只需要修改渲染器就可以跨端

react缺点,学习成本比较高

开发技术

开发技术：JSX 编程，React Router， Redux 多组件共享信息 ，复用组件UI hook

React组件操作：

1.通过state 操作视图 Mounte 获取数据更新 Ref包存组件对象 unMount 清空 Ref

2.通过 Ref 来获取 DOM

3.使用 Props 和 redux context 实现组件通讯

4.函数使用 useCallback，值或者计算使用 useMemo ，组件包裹 memo

JSX 编程

react 函数组件（没有生命周期，借助Hook return jsx），react 类组件（继承react.Coponent,有this，生命周期，render方法）函数式组件相较于class 的优点，代码量骤减没有复杂的生命周期，支持自定义的hook，组件和hook 的关系将UI拆分为多个独立的单元，组件就是独立的单元，hook 贴近 内部运行的各种逻辑 effect，state ，context

Hook 的规则和原理

React Hook是React 16.8版本引入的新功能。它们允许您在无需编写类组件的情况下，在函数组件中使用状态和其他React功能。以前，只有类组件才能使用状态和其他React功能，但是现在，使用Hook，您可以在函数组件中使用这些相同的功能，使得功能组件更加强大和灵活。React Hook提供了一些内置的Hook函数，例如useState和useEffect。useState允许您在函数组件中添加本地状态。useEffect允许您在组件更新时运行副作用代码（例如数据获取或DOM更新）。除了这些基本的Hook之外，React社区也提供了许多自定义Hook，可以为您的应用程序提供其他功能和状态。

hook 只用于外层和顶部声明的时候，只能在React 函数中调用Hook自定义hook 必须用 use开头，Hook中的state 是完全隔离的，hook 的本质是一个函数

如何划分组件？

根据 page 里面的不同布局单元进行拆分

组件里面不同的功能模块继续拆分

组件的共享信息： 1.使用 context 和 reducer进行 信息共享 ， 使用hook中的 useContext 来添加 GloabalContext ，Reducer 使用 useReducer 来处理 Context

2.使用reactredux里面的方法

组件优化

减少函数的重复调用， 用memo ，和useMemo 包裹函数体

react-dom 里面的 使用creatPortal 改变组件挂载真实渲染的位置，而不是代码编写的位置，冒泡问题的解决

逻辑的复用，useRequest

React 的状态管理

问题引入： 状态管理为什么不引入window全局变量实现，新版本可以使用hook 来实现功能

1.全局污染，重复的申明

2.直接取值和赋值，数据变更不清晰

3.渲染粒度不可控

4.react 时间管理回溯

状态管理工具的本质：

管理内存的状态 1.共享内存 2.管理状态 3.页面通讯 4.组件通讯 5.刷新

React 的管理工具： 自带的工具props Context ,单向数据流 Redux，Flux 双向流：Mobox ，原子型：

props 用于简单父子，兄弟的组件通讯 context 相当于全局的变量，难以进行数据的变更情况，内部耦合度较高，出现重复更新，context 会出现层层嵌套， 小型项目中的hook 中的Reducer 更加合适

Redux 是 Flux 的进化版本，用于大型的项目

Mobox 与响应式的写法直接修改就可实现

Recoil 原子化的组件管理，弥补context 的缺点，粒度比较细

Zustand 轻量级，用于移动端比较合适

状态管理工具的原理：

使用发布订阅来实现一个状态管理工具

React 路由

前端的演化 ： 静态网站--> 动态网站 --> 前后端分离 -->单页面应用 --> SSR SSG 微前端

静态网站：更新不便利

动态网站: ASP JSP PHP 和前端交互 -->门户网站

前后端分离：AJax 的使用

单页面的应用：webpack，MVVC, webComponnent reat vue 出现 server +后端路由

React-router:分为 BrowserRouter （基于history接口实现）和 HashRouter （基于hash）

history接口实现，变化监听和路由的操作

主要完成路由的匹配和路由参数传递

单页面的优化，应用开发收缩，切割，微前端的处理 分为多个 SPA 应用 ，lazy+ suspens，next/remix 路由申明

avatar
文章
阅读
粉丝