Byte青训营笔记

Day 1

html

语义化标签

如下图，优点：便于开发者阅读、可维护性高、机器更好的解析

语义化标签具体使用如下

img标签的 alt属性

做无障碍阅读，还有图片异常时显示文字。

css

宽高包含整个元素，可以通配 所有元素都会延用，很常用

Day2

JS 月影

高阶函数法实现信号灯

Day3

debug

开发者工具——console面板

• console.dir
  查看dom对象及其属性，处理dom节点时使用
• console.table
  
• console.log用console.warn info error来替换方便查找
• “1”与数字1颜色不同，数字1为蓝色
• 占位符
  
  %c表示样式，突出后面的内容。%o对象 %s字符串

element面板

开发者工具中调整样式：.cls控制类名， 右击检查选中元素

source面板

所有前端代码都能在这里看到源码

*watch可以添加监控变量
*breakpoints可以控制断点的选择
*scope当前作用域中有哪些变量
*call stack执行栈，通过这个可以看到当前程序执行到了哪个函数内

压缩混淆代码避免暴露源码：UglifyJS，变量替换 a b c 且压缩成一行；webpack.pro.js中devtool:"source-map"开启，可以在压缩后调试

• 该面板还可以对修改的地方保存避免刷新消失；在Overrides下打开保存，不点刷新，点右侧更多工具中点Changes，就能看到所有改动

performance面板

优化白屏，查看具体每一毫秒 每一线程执行的情况，来优化
FPS: 每秒帧数；CPU: 处理各个任务花费时间；NET：各个请求花费时间

Frames帧线程，Main主线程 负责执行JS 解析HTML\CSS 完成绘制， Raster线程负责某个layer的绘制

network面板

资源和网络请求情况
选择网速 模拟弱网

Application面板

处理存储数据，修改本地存储的数据
快速情况数据：Storage clear all

浏览器长截图

其他调试工具

charles, progress

Day4

TS

工具网站：https://www.typescriptlang.org/play 测试写TS代码
教程：Codecademy
type-challage包中的equal判断两个类型是否一样

类型和集合的对应关系

类型收窄：提高类型确定性，方法有null check. as const. instanceof. typeof

Number类型的范围到2^53-1

Day5

react(待听)

Day6

前端动画

笔记：

优化：

Day7

NodeJS

nodeJS定位类似java的JVM
单线程优缺点：

模块化：

默认缓存加载过的模块，解决模块查找耗时：

模块化规范发展：
CommonJS => AMD => UMD => CMD(seaJS) => ESModules

ES6导入导出规范：

*注：
Tree Shaking: 导入的方法不使用时不加载，CommonJS不可用

Promise解决函数嵌套，回调地狱：

Callback回调转Promise的封装：

Event模块实现发布订阅：

Koa框架:

执行过程：

中间件：（下图右中间件3）

常用中间件：

基于koa的二次开发框架：
（可以对方法进行拓展，…）

断点调式：
node自带：configure之后开inspect；
开源工具：npm install ndb -g ndb node bootstrap.js
IDE调试：开launch.json

线上调试：
打log日志
merge日志文件

NodeJS部署：
os模块利用多核cpu（多进程，三倍+速度）

进程守护：cluster

进程管理工具：多进程，自动重启，负载均衡，日志查看，性能监控。。（pm2）

复杂计算，CPU卡住时：多进程解决，把复杂计算 fork到子进程，监听子进程

前端开发和服务端开发的关注区别：

Day8

web安全

攻击者——XSS攻击

定义：Cross-Site Scripting跨站脚本攻击
（攻击者将恶意脚本插入到页面中）
原因（触发xss漏洞）：1. 盲目信任用户提交的内容 2. 将String直接生成dom (docunment.write(), element.innnerHTML, SSR(user_data) 伪代码)
后果：1. 难以UI察觉 2. 窃取用户信息cookie,token 3. 绘制UI如弹窗，诱骗用户泄露隐私信息。

典型的XSS例子：


分类：1. 存储型XSS（如上）：脚本存于数据库，访问页面就会读数据库，对全部用户可见（例如：爱奇艺共享账户。。）2.反射型：不涉及数据库，直接从URL读参数渲染到页面（下图一） 3.基于dom的XSS攻击：无需服务器参与，发起加执行全在服务器（下图二）。（2与3对比：注入脚本的地方不同，Reflect在服务器，Dom在浏览器）。4. Mutation-base XSS: 利用浏览器渲染dom的特性（独特优化），按浏览器进行攻击（下图三）

攻击者——CSRF攻击

定义：Cross-site request forgery跨站伪造请求。用户不知情下，利用用户权限（cookie），构造指定Http请求窃取用户信息。
例子如下：用户收到邮件，点击链接，跳转到域名B，域名B携带cookie去访问服务器，请求成功窃取信息

几种方式：1. 构造GET请求(下图一) （a标签，访问页面）2. beyond Get（下图二）（构造POST请求）

攻击者——Injection注入

SQL注入

页面上恶意注入SQL参数，服务器接收后 拼接参数，运行SQL代码，获取其他数据，修改删除数据

例子：

攻击构造一个请求，内容是any字符串，跟语句。执行时就变成了SQL删除语句。

其他Injection攻击

攻击者——DoS攻击

定义：Denial of Service服务拒绝。攻击者构造特定请求，导致服务器资源被显著消耗，来不及响应更多请求，导致请求挤压，发生雪崩效应。
*注：正则表达式——贪婪模式。

ReDoS 基于正则表达式的DoS

DDoS Distributed DoS

短时间内大量僵尸设备请求，请求堆积，雪崩
特点：访问IP(非域名)，任意API，耗尽带宽。
例：SYN Flood洪水攻击。攻击者发送海量SYN给服务器，服务器返回ACK+SYN，此时攻击者不再返回ACK 完成三次握手，耗着。很快最大连接数满了。

攻击者——中间人攻击（针对传输层）

定义：浏览器和服务器以为在互相传输，其实中间插了一个中间人（如：恶意APP，路由器，ISP运营商）

特点：1. 明文传输 2. 信息篡改不可知 3. 对方身份未验证

防御者——XSS

永远不相信用户！
不将用户提交的内容直接渲染dom。、

前端：主流框架默认防御XSS，避免直接操作dom；谷歌浏览器也提供了API（google-closure-library）
服务端（NodeJS）：DOMPurify(第三方库，过滤HTML代码)

但是如果一定要动态渲染，解决：注意一定要对字符串String进行过滤；上传svg，svg可以内嵌html标签；自定义跳转链接，可以写js；自定义样式（如下）

防御者——CSP

定义：Content Security Policy内容安全策略。哪些域名被认为安全，来自安全源的脚本可以执行，否则报错，对eval+inline script禁止。
配置：如下（服务端响应头部中加同源，前端在meta标签中写）

防御者——CSRF

定义：如果攻击者伪造请求，那么其来源异常。我们可以限制请求来源。
解决（判断合法来源）：
1.加请求头部，origin(GET, HEAD不发送origin，要特殊处理), referer
2.token, 服务器对合法页面标识，验证token (token与用户绑定，且有过期时间)

但攻击者若使用同源请求：（解决：加响应头部X-Frame-Options）

另外，很多代码偷懒，将GET当作GET+POST，接口即能获取数据又能更新数据。 但是有安全问题，一次攻击既可以获取数据又可以修改数据。

其他方法：避免用户信息携带Cookie => SameSite Cookie(Lax模式) 只有同源时才允许携带Cookie。

正确防御CSRF：写中间件统一处理（SameSite Cookie，验证token）

防御者——Injection

SQL注入防御：1. 找到项目中使用SQL的地方，使用prepared statement 将SQL语句提前编译
其他注入防御：1. 最小权限原则，2. 建立白名单机制+过滤，禁止rm等语句 3.对URL类型参数进行协议、域名、ip等限制，保证不是内网资源，以防内网资源泄露修改

防御者——DDoS

一般运维做。对流量进行筛选、过滤，将疑似DDoS攻击的给过滤掉，然后用cdn进行抗量，快速自动扩容，非核心服务（评论，用户注册）降级 缓存 不然非核心服务占用CPU或内存。

防御者——中间人

HTTPS，TLS
(最新HTTP3内置了TLS1.3，合并了TLS)
HTTPS特性：可靠性（加密），完整性（MAC验证），不可抵赖性（数字签名）

1. 加密：TSL握手，加密分为对称和非对称加密。（握手分两个过程，首先是非对称加密阶段：浏览器向服务器提供加密套件的选项；服务器选择套件 带上证书；浏览器对证书校验，如果通过，采用协商好的加密算法，算出sessionkey。然后进入对称加密阶段：双方利用sessionkey对传输内容进行加解密）
   
2. 完整性：
   MAC验证（保证信息没有被篡改）：传输时除了传输加密过的信息外，还会传输一个加密信息的hash值。接收方按照协商好的hash计算方式，对传输信息计算hash，然后与发送方的hash值比较，一样说明通过 没有被篡改
   

• 注：数字签名
  

3. 不可抵赖性（数字签名）
   签名算法一定要健壮，不能被暴力破解
   

其他：HSTS 将HTTP主动升级到HTTPS。

补充其他安全策略：设置Policy，一个页面下，限制使用功能，如照相机、麦克风。<iframe allow='xxx'>

Day9

http

Day10

前端工程化

CI/CD

准入检测分：代码测试和UI测试

前端架构

（prettier：格式化，比如缩进 字符串引号 加不加分号等 规范； *lint主要定义的js规范比如常量不能赋值啊 单元测试的配置等, 可以引入plugins 如bytedancerplugins； jest单元测试； husky git hook lint-stage对pre-commit检测 测试）

研发流程和规范：

precommit阶段的githook

Jenkins部署：

配置完webHook，接着配触发器，比如push完触发

写shell，编译可以在webpack里做打包压缩，基于hook进行精简。最后一步打成zip包方便部署，而不是一个文件夹。

远程服务器，访问的账号密码，还有zip包的名字。还可以执行脚本，解压放到对应文件夹，重启nginx就能访问部署的代码

深入——NoBundle

按需加载，不用将所有包引入。且比如不用将ES6先转成ES5，但一定要支持import一个module（IE11,safari…不支持）

解决兼容：（Vite在研发流程中（生产环境）还用Bundle, 避免构建时间过长，改一行代码等半天；右图还是No Bundle）

集群发布——多台机器发布时：

蓝绿发布策略（蓝为旧版本，绿为新；用户用旧的，等绿的全部发布完成，再将蓝绿调换，风险低。缺点：服务器的承载减半）

滚动升级（逐步迭代）

灰度策略（新旧版本同时跑，对架构有要求，必须新旧版本数据不出错）

前端工程化演进路线

CI/CD以后；再做一个可视化平台（只需要一个项目名称和仓库名称，就只要拉代码，然后push之后自动jenkins，不需要感知怎么打包部署；包括物料平台，npm包，组件啊，公共方法等，还有一些demo）,然后就是集群也可以容器化；接着云端化，不用IDE，直接在界面上改代码，不用本地开发，扩容加机器 用serveless可以自动扩容缩容；最后 训练 智能化设计稿转代码，选一些事件等。

Day11

JS设计模式

JS设计模式定义：针对业务需求的实际问题，经验总结可复用，合理运用，解决问题
JS设计模式原则——SOLID五大原则：

使用设计模式的原因：

常见设计模式：

单例模式

用getSingle缓存，result不会被销毁

其他待更新