2020.4.8
一、HTML与前端
二、了解CSS
1. CSS工作机制
QS: CSS加载或者解析过程会产生阻塞吗？JS呢？
2. 页面中使用css的三种方法：
- 外联
<link> - 嵌入
<style> - 内联
<p style = "">
PS: link 与@import的区别？
link是HTML方式，@import是CSS方式link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)link可以通过rel="alternate stylesheet"指定候选样式- 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式 @import必须在样式规则之前，可以在css文件中引用其他文件
3. CSS选择器
- 通配选择器
* - 标签选择器
a p input - id选择器
#logo - 类选择器
.container - 属性选择器
[disable] - 属性值
input[type="password"] a[href^="#"] a[href$=".jpg"] - 伪类选择器
a:link li:forst-child - 组合器
- 直接组合
AB - 后代组合
A B - 亲子组合
A>B
- 直接组合
- 选择器组
h1,h2,h3
4. 颜色
rgb（red, green,blue)
rgba（red, green,blue,1)
5. font字体
-family
html{
font-family:Optima,serif;
}
- 字体列表最后写上通用字体族
- 英文字体放中文前
style weight size/heighth family
三、深入CSS
1. 样式优先级
！important >内联> id > 类 | 伪类 > 元素选择器 > 继承 | *
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 元素（标签选择器） | 0,0,0,1 |
| 类，伪类 | 0,0,1,0 |
| ID | 0,1,0,0 |
| 行内样式 style="" | 1,0,0,0 |
| !important | ∞ 无穷大 |
2. 布局
布局基础技术
盒模型
四条边框颜色不同时
块级和行级
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
- 行内元素有：
a b span img input select strong - 空元素：
<br> <hr> <img> <input> <link> <meta>
3. 常规流
根元素、浮动、绝对定位会脱离常规流
行级上下文IFC
- 只包含行级盒子的容器回创建IFC
- IFC内排版规则
- 盒子在一行内水平摆放
- 一行放不下时换行
- text-align决定水平方向
- vertical-align决定行内垂直对齐
- 避开float元素
块级上下文BFC
-
会产生BFC的情况：根元素、浮动、绝对定位、inline-block、Flex和Grid子项、overflow不是visible的块盒
-
BFC内排版规则
- 盒子从上往下
- 垂直margin合并
- BFC内的margin不会和外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 新型排版上下文
- 可以控制盒子的摆放方向、顺序、宽高、水平垂直对齐、换行
Grid
- 划分网格布局
四、CSS进阶
1. 变形
Transform
translate 平移 rotate 旋转
scale 缩放 skew 倾斜
- 本身占有的空间仍然保留，不会对其他元素的布局产生影响
- 属性值的前后顺序不一样，展现的效果不同
- 3D变换：
perspective属性设置视角，设置人眼与屏幕的距离
2. 动画
Transition
transition-property 元素的变化的CSS属性
transition-duration 持续时间
transition-timing-function 快慢速度
transition-delay 延迟时间
Animation
通过对元素进行定义关键帧的方式，实现更加复杂的动画效果。
animation-name 名字
animation-duration 持续时间
animation-timing-function 快慢速度
animation-delay 延迟时间
animation-iteration-count 播放次数
animation-direction 动画播放方向（正向、逆向、正反交替）
@keyframes down{
from{
margin-top:0;
ocpacity:1;
}
50%{
margin-top:0.5em;
ocpacity:0.3;
}
to{
margin-top:0;
ocpacity:1;
}
}
.dom{
animation:down 1.5s ease infinite;
}
3. 响应式设计
设置视口vieport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
图片尺寸设置
img{
max-width:100%;
}
background-size
cover 背景图片把容器覆盖，图片比例会变（装饰性）
contain 缩放到容器内，保证图片完整显示（商品类）
media query
@media screen and(min-width:480px){
.dom{
}
}
// width/height,
rem
计算的时候总是根据html的font-size来计算大小。配合媒体查询使用。
2020.4.9
一、JavaScript入门到放弃
1. 注重js、css的使用场景区别，各司其职
2. 复杂UI组件的设计
- 步骤一：结构设计
- 步骤二：API设计
- 步骤三：具体实现
3. 插件、模版化，抽象出组件模型
4. 运用过程抽象的技巧来抽象并优化局部API
二、WEB标准：前端的原力
Web标准是Web基础、运行和发展的一系列标准总称
1. Web标准介绍
| HTTP | 相关内容 |
|---|---|
| HTTP/0.9 | 草稿版 |
| HTTP/1.0 | 标准版 |
| HTTP/1.1 | 对http1.0的改进 |
| HTTP/2.0 | 目前主流的协议 |
BOM：浏览器对象模型
- window对象：网页中所有的
- location对象：浏览器导航系统
- navigator对象：浏览器信息
- screen对象
- history对象
三、前端常用的HTTP知识
1.请求类型
| 方法 | 作用 |
|---|---|
GET |
发送一个请求来取得服务器上的某一资源 |
POST |
向URL指定的资源提交数据或附加新的数据 |
PUT |
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有 |
HEAD |
只请求页面的首部 |
DELETE |
删除服务器上的某资源 |
OPTIONS |
它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息 |
PATCH |
更新部分内容 |
2. 常见状态码
| 状态码 | 描述 |
|---|---|
| 101 | 切换协议 |
| 200 | 成功 |
| 206 | 返回部分内容 |
| 301 | 请求的网页已永久移动到新位置，如：资源更换路径或改名 |
| 302 | 临时性重定向，如：当前请求需要登录，临时跳转到登录页面 |
| 304 | 自从上次请求后，请求的网页未修改过。 |
| 400 | 错误请求 |
| 403 | 拒绝执行，如：无对应访问权限 |
| 404 | 资源找不到 |
| 413 | 请求实体过大 |
| 500 | 服务端内部错误 |
| 502 | 作为网关或代理服务器时，上游服务器异常 |
| 504 | 作为网关或代理服务器时，上游服务器处理超时 |
3. URL
http://<host>:<port>/<path>?<query>#<frag>
HEADER
- 通用
- 请求
- 响应
- 实体
- 扩展（自定义）
- X-cache
4. COOKIE与SESSION
HTTP协议是无状态协议，每一次请求结束即断开连接，下一次请求时候服务器又不知道是谁了。所以就出现了cookie的第一个特点：随请求发送，服务器通过解析请求当中的cookie，便能直到请求源相关的信息。
又因为随请求发送，便出现第二个特点：容量有限，过大的数据量会为传输造成不必要的开销，所以cookie的容量必须进行限制。
产生
-
在浏览器访问服务器时由服务器返回一个
Set-Cookie响应头，当浏览器解析这个响应头时设置cookie -
浏览器设置
document.cookie ='',在浏览器端的cookie截图中可以看到cookie的不同属性值，所以js具体操作cookie的格式如下：
document.cookie="[key=value]; [expires=date]; [domain=domain]; [path=path]; [secure]"
key设置的是cookie的键，value设置的是cookie的值。expires设置cookie的生存时间，默认为当前浏览器会话(Session)。当设置一个时间时，每次访问浏览器会用当前时间和cookie的expries做比对，如果过期cookie则会被删除。设置格式为GMT时间格式。domain在浏览器读取cookie的时候只有当cookie的domain和浏览器当前 的域名匹配才能读取到。pathpath路径和domain功能类似，只是path的范围更小。path控制cookie在当前域名的路径，只有路径相匹配cookie才能被读取到HttpOnly安全属性。防止客户端脚本通过 document.cookie 等方式访问 Cookie，从而防止XSS攻击。Secure只有在HTTPS时候才会发送。SameSite可以让 Cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。- Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
- Lax 允许部分第三方请求携带 Cookie
- None 无论是否跨站都会发送 Cookie
- 之前默认是 None 的，Chrome80 后默认是 Lax。
关于samesite属性，推荐一篇写的很好的文章：传送门
关键词
| 特点 | 备注 |
|---|---|
| 有效期 | 默认浏览器关闭就消失，可以设置HTTP头信息中的cache-control属性的max-age值，或者修改HTTP头信息中的expires属性的值来延长有效期。 |
| 作用域 | 通过文档源和文档路径来确定的。该作用域可以通过cookie的path和domain属性配置。 |
| 数目和大小的限制 | 每个web服务器(域名)保存的cookie数不能超过50个，每个cookie保存的数据不能超过4KB。 |
| 过期设置 | cookie快要过期时，可以重新设置而不是删除 |
| 缺陷 | 随请求发送，增加网络流量；容量小；只能储存字符串；有潜在的安全问题。 |
XSS漏洞盗取cookie，设置http only
CSRF漏洞，设置token/samesite
SESSION为服务端对应cookie的概念，在实际应用当中基于cookie存放用户信息。
5. 性能优化
keep-alive
- http1.0原本不支持，后面扩充了
Connection：Keep-Alive - http1.1默认支持
减小传输大小
- 对传输过程中的内容进行压缩
- 主要针对文本资源
缓存
- 首次请求无缓存，都返回200，对能缓存的资源进行缓存
- 第二次请求部分能能命中缓存的内容返回304，不返回实体
- ETag是根据类似于编码的一个对比，Last-Modified是对比时间
6.http2/3
HTTP2
以下总结转自链接
- 二进制传输
加强性能的核心点在于此。在之前的 HTTP 版本中通过文本的方式传输数据。在 HTTP/2 中引入了新的编码机制，所有传输的数据都会被分割，并采用二进制格式编码。
- 多路复用
在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。 帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。 多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。
- 头部压缩
在 HTTP/1 中，我们使用文本的形式传输 header，在 header 携带 cookie 的情况下，可能每次都需要重复传输几百到几千的字节。 在 HTTP / 2中，使用了 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值。
- server push
在 HTTP/2 中，服务端可以在客户端某个请求后，主动推送其他资源。 可以想象以下情况，某些资源客户端是一定会请求的，这时就可以采取服务端 push 的技术，提前给客户端推送必要的资源，这样就可以相对减少一点延迟时间。当然在浏览器兼容的情况下你也可以使用 prefetch
HTTP3
- 基于QUIC协议
7. http抓包工具
- Wireshark
- Fiddler
- Firebug for FireFox
- Chrome开发者工具
- IE8+ 自带工具
8. 推荐书籍
《图解HTTP》 《HTTP权威指南》 《Web性能权威指南》
2020.4.10
一、正则表达式的三个应用场景
1. 创建
- 使用字面量创建
- 简单方便、不需考虑二次转义
- 子内容无法重用、过长
- 使用RegExp构造函数
- 子内容可以重复使用
- 二次转义会产生bug
2. 用法
RegExp.prototype.test()
- 输入字符串类型
- 输出true或false
RegExp.prototype.source:返回正则表达式模式文本的字符串RegExp.prototype.flags：返回修饰符字符串，按字母升序排序
RegExp.prototype.exec()、String.prototype.match()
- exec每次只返回一个结果
- match返回所有结果
- match返回的数据格式不固定，建议使用exec
RegExp.prototype.lastIndex()
- 最后一次匹配成功的位置
- 自己不会重置，上一次匹配失败之后才会重置为0
可以结合字符串的
replace()、search()、split()方法使用。其中replace（）方法正则修饰符不加g表示只匹配一个。
3. 场景一：数值判断
[]字符集+限定，匹配一个或多个^开始$结束()子表达式？0-1个.换行符之外的任意字符(?:)非捕获组*限定，0个或多个|创建分支i修饰符，忽略大小写{n}限定，重复n次可为{n,m}$n表示第N个捕获组
4. 场景二：颜色
5. 场景三：URL
二、NODE基础
1. 与JavaScript的区别
- 基于异步I/O接口
- 基于node_modules和require模块依赖
- 提供C++C++addon API 与系统交互
2. 模块
- 内置模块
http,fs,path等 - 文件模块
var test = require('./test.js')
3. NPM
// 依赖的键值对信息
"dependencies": {
"axios": "^0.19.2", // ^ 表示运行中版本和小版本的更新
"cookies":"~0.7.0" // ~ 接受小版本的更新
},
存在问题：速度方面、安全方面
4. NODE 开发
简单的原理
const http = require('http');
const server = http.createServer((req, res) => {
res.send('ok')
})
server.listen(8080)
使用框架
const Koa = require('koa')
const app = new Koa()
// response
app.use(() => {
//...
})
app.listen(8080)
|--- development.js //开发环境下的入口文件
|--- nginx.conf //nginx 配置文件
|--- package.json
|--- pm2.json //pm2 配置文件
|--- production.js //生产环境下的入口文件
|--- README.md
|--- src
| |--- bootstrap //启动自动执行目录
| | |--- master.js //Master 进程下自动执行
| | |--- worker.js //Worker 进程下自动执行
| |--- config //配置文件目录
| | |--- adapter.js // adapter 配置文件
| | |--- config.js // 默认配置文件
| | |--- config.production.js //生产环境下的默认配置文件，和 config.js 合并
| | |--- extend.js //extend 配置文件
| | |--- middleware.js //middleware 配置文件
| | |--- router.js //自定义路由配置文件
| |--- controller //控制器目录
| | |--- base.js
| | |--- index.js
| |--- logic //logic 目录
| | |--- index.js
| |--- model //模型目录
| | |--- index.js
|--- view //模板目录
| |--- index_index.html
5. API 开发
RESTful API
- 每个API对应一种资源或资源集合
- 使用HTTP method来表示对资源的动作
- 使用HTTP status code表示对资源操作的结果
2020.4.11
一、前端工程化浅析
前端工程化的目标是为了提效。
规范化
- 版本管理器开发流程规范
- 编写规范
模块化
- 只需关注逻辑问题，无需关注变量相互污染的问题
组件化
- 组件化和模块化的思想都在于分治
自动化
- 前端工程化的核心
- 自动化构建
二、前端动画
1. JS动画优缺点
- 优点：灵活、可控、性能
- 缺点：易用性
三、前端性能优化
1. RAIL模型
以用户为中心的性能模型，每个网络应用都有与其生命周期有关的是四个方面，而且这些方面以不同的方式影响性能。
延迟与用户反映
响应100ms内响应用户输入动画10ms一帧空闲时间空闲时间最大化加载5s呈现交互内容
2. 评估性能工具
- lighthouse
- WebPageTest
- Chrome DevTools
3. 浏览器渲染场景
4. 浏览器渲染流程
- JavaScript 实现动画 操作DOM
- Style （Render Tree）
- Layout （盒模型，确切位置和大小）
- Paint （珊格化）
- Composite （渲染层合并）
5. 性能优化方向
- 加载
- 资源效率优化
- 图片优化
- 字体优化
- 关键渲染路径优化
- 渲染
- JavaScript执行优化
- 避免大型复杂的布局
- 渲染层合并
2020.4.12
css优化方向
- 选择器优化，匹配过程从后往前。推荐不要写太多的层级。BEM命名方式。
- 页面渲染方式，渲染性能。
一、小程序
1. 简介
小程序解决了什么问题？
在H5和APP之间找到了相对平衡点。
小程序技术栈?
- HTML/CSS/JavaScript
- NodeJs
- 移动适配
- HTTP协议/Https
- OAuth2
- GIT
主流的小程序平台
类似小程序的平台
2. 小程序技术架构
WXML
- 本质是html模版
- 有特定的标签
- 接管一些简单的逻辑判断
wx:if - js不直接操作DOM，只负责数据
WXSS
- 提供rpx单位
屏幕宽度和750的比值 - 精简的css
- 提供全局和局部的css
JS
- 负责逻辑交互
- APP、Page、Component三个构造函数
- 可调用系统API
双线程渲染模型
小程序生命周期
3. 小程序发布
4. 小程序发展
二、WEB点播直播
-
文件扩展名 ≈ 媒体封装格式(媒体容器类型)
-
媒体封装格式 ≠ 音视频编码格式(使用了谁家的编码器)
-
文件内容：
- 头信息(格式、时长、帧率、码率、分辨率...)
- 索引信息
- 视频数据
- 音频数据
- 附加增强数据...
-
播放器原理
- 解协议(加载数据)
- 解封装(解复用)
- 解码
- 渲染
三、代码
1. 代码规范
ESlint规范：yarn global add eslint
