字节跳动前端青训营学习笔记_230726

230726字节前端基础

内容一览

前端基本能力

html

JavaScript

前生叫ECMAScript
设计初衷
- 借鉴了c语言基本语法
- 借鉴了Java的数据类型和内存管理
- 简介Scheme语言把函数提高到一等公民（first class）的地位
- 借鉴了Self语言，使用基于原型（prototype）的继承机制
基本类型
- String
- Number
- Boolean
- Null
- Undefined
- Symbol
- Object
  - Array
  - Function
- 现代化Bigint

css

选择器
- 伪类选择器
- 元素类型选择器
- 类选择权
- 属性选择器
- 全选择器
- 伪元素选择器
- id选择器
- 后台选择权
- 紧邻的兄弟选择器
- 一般的兄弟选择器

Browser

渲染引擎
- 加载页面根据html生成dom树的结构
- 获取css资源生成cssom树
js引擎
- 根据词法语法解析把js源码转化为AST树
- 通过Ingnition转化位字节码

前端语言协作

CSS in HTML

内部css
在头文件中引入css
在头部编写css

JavaScript in HTML

CSS in JavaScript

HTML

HTML DTO

基本语法

标签元素
文本
注释
OTD
处理信息

分类

文档型
1
2
3
<!DOCTYPE>
<head>
<body>
闭合型
- 闭合标签
1
<p></p>
- 空标签
1
2
3
<br>
<img>
<input>
换行型
- 块级标签
1
2
<div>
<h1>,<h2>...<h6>
行内标签
1
2
<span>
<a>
H5新元素
- 语义化标签
- 媒体标签
  1
  2
  3
  <video>
  <audio>
  <embed>

表单标签

1 2	<input type="data"> <input type="color">

功能标签
1
2
<canvas>
<progress>

head标签

title
- 标题，全局唯一
base
- 面向页面所有URL提供前缀
- 不建议使用
meta
- 通常是约定好的键值对
- 例外：charset、http-equiv
link
- rel决定类型，href决定引入地址
script
- type指定MIME类型
- 可内嵌代码，href决定引用类型

ARIA

HTML5

语义化标签
表单增强

储存
- Clookies
  - 4kb
  - 会被请求的时候被发送
  - 存在过期时间问题
  - 可以存储在Server端
  - HTML4/5
  - 可以通过同window访问
- Web Storage
  - Local Storage
    - 10mb
    - HTML5
    - 可以通过同window访问
  - Session Storage
    - 5mb
    - HTML5
    - 只能通过同Table访问
    - Table被关闭的时候自动清空
- IndexedDB
  - 性能不如SQLite
  - 适用于复杂场景
  - 异步操作
  - 允许任何数据
  - 包含多个objectStore
PWA&AMP
Audio音频能力
HTML5 Video
HTML5 二进制
HTML5 API
- 位置
- 拖拽
- 等
Web Worker
- 采取多线程的方式
Web Socket
- 支持全双工通信的TCP
Shadow DOM
- 一种特殊的节点，在Document下可以挂载很多DOM节点
- 如果选择一个DOM作为Shadow Host 内部可以构建更复杂的Shadow Tree
- 在Shadow Tree内部可以构建像DOM一样的Shadow节点
- Shadow节点是可以无限延伸的
- Shadow DOM可以避免内部元素被外部元素访问到，这样可以让自己作为一个有着内聚功能的HTML元素。
Web Component
- 复用了可以自定义标签的能力
SVG&Canvas
- SVG是基于XML的向量化的图片，可以用来交互
  - SVG实际上是矢量的
  - SVG是可扩展的，尺寸发生变化不会失帧
  - 可以对事件特殊处理
  - 对游戏支持不好，不能绘制复杂图形
  - draw
- Canvas是一个HTML元素，可以用它来画各种各样的图形
  - Canvas使用点阵的方式绘制的
  - 尺寸发生变化的时候会失帧
  - 无法对事件特殊处理
  - 可以绘制复杂图形，很多游戏都用它
  - paint
WebGL&WebGPU
- 可以直接和GPU交互绘制图形
WebAssembly

拓展交流

WEB可以火热的原因

对用户友好
对开发者友好
领域成熟度
未来的方向

大前端

交互方式

MVC
- V代表View
- Mode维护渲染界面所需要的数据层
- Controller处理业务逻辑
MVP
- 对MVC的改进，将所有操作全部内部到Presenter这层，需要同事处理事务层和数据层的相互操作和状态统一
MVVM
- 微软提出，在前端以VUE具有代表性，与MVP类似，但实现了双向绑定的能力。让View Model负担大大减弱，同时View Mode也不需要与View 耦合，具备了可复用性。