余弦の博客

# Web 多媒体历史 PC 时代：Flash 等播放插件，富客户端。 移动互联网时代：Flash 等逐渐被淘汰，HTML5 出现了，但其支持视频格式等有限 Media Source Extensions ，支持多种视频格式等 # 基础知识 # 编码格式 # 图像基本概念 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。 例如，彩色图像每个像素用 R,G,B 三个分量表示，每个分量用 8 位，像素深度为 24 位，可以表示的颜色数目为...

# 前端场景下的游戏开发 # 开发角色和链路 游戏开发的团队分工 组建一个最小但最完整的游戏开发团队只需要 3 个人：策划、程序、美术。 当然，能力足够强的话可以作为独立开发者。 基本链路 立项阶段 -> 原型阶段 -> Alpha 版本 -> Beta 阶段 -> 运营阶段 #...

这节课老师讲了 TypeScript 的用处与基本语法、高级类型的应用、类型保护与类型守卫 # 什么是 TypeScript # 发展历史 2012-10：微软发布了 TypeScript 第一个版本 (0.8) 2014-10：Angular 发布了基于 TypeScript 的 2.0 版本 2015-04：微软发布了 Visual Studio Code 2016-05：@ ty pes/react 发布，TypeScript 可开发 React 2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript 2021-11：v4.5 版本发布 # 为什么是...

# 本节课重点内容 # Why WebGL / Why GPU? WebGL 是什么？ GPU ≠ WebGL ≠ 3D WebGL 为什么不像其他前端技术那么简单？ # 现代的图像系统 光栅 (Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。 像素 (Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。 帧缓存 (Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。 CPU (Central Processing Unit)：中央处理单元，负责逻辑计算。 GPU...

# 本节课重点内容 理解前端 "工程化" 概念、工具、目标 一个团队总要有那么几个人熟悉 Webpack, 某种程度上可以成为个人的核心竞争力 高阶前端必经之路 课程目标： 理解 Webpack 的基本用法 通过介绍 Webpack 功能、Loader 与 Plugin 组件设计，建立一个知识体系 不会事无巨细，介绍 Webpack 所有 也不是深入源码，讲解底层实现原理 # 什么是 Webpack 前端项目由什么构成？—— 资源 旧时代手动管理这些资源，但有以下几个对开发效率影响非常大的缺点： 依赖手工，比如有 50 个 JS 文件……...

# 本节课重点内容 安全问题很常见，会危害 用户 公司 程序员（祭天 QAQ） # 两个角度看 web 安全 # 假如你是一个 hacker—— 攻击 # 跨站脚本攻击 XSS (Cross Site Scripting) 注入恶意脚本，完成攻击，后果：泄露用户隐私等 XSS 主要利用了开发者对用户提交内容的盲目信任 特点 通常难以从 UI 上感知（一般都是暗地里执行脚本） 窃取用户信息（cookie/token） 绘制 UI（如弹窗等），诱骗用户点击 / 填写表单 举个栗子 public async submit(ctx) { const...

# 本节课重点内容 # Node.js 的应用场景（why） 前端工程化 早期的 jQuery 等库都是直接在页面中引入，后来模块化逐渐成熟，Node.js 赋予了开发者在浏览器外运行代码的能力，前端逐渐模块化、 Bundle：webpack、Vite、esbuild、Parcel 等 Uglify：UglifyJS Transplie：babeljs、TypeScript 个人理解：Transplie 就是将 ES6 这样最新的语法转译成低版本的写法，实现浏览器兼容 其他语言加入前段工程化的竞争：esbuild、Parcel 、prisma 等 现状：Node.js...

# 初识 HTTP 输入 url -> browser 进程处理输入信息 -> 浏览器内核向服务器发起请求 -> 浏览器内核读取响应 -> 浏览器内核进行渲染 -> browser 进程页面加载完成 Hyper Text Transfer Protocol （HTTP）超文本传输协议 他是应用层协议，基于传输层的 TCP 协议 请求、响应 简单可扩展（可以自定义请求头，只要客户端服务端之间可以理解） 无状态 # 协议分析 # 发展历程 # 报文结构 #...

# 动画的基本原理 # 动画是什么 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 —— 维基百科 快速 连续排列 彼此差异极小 制造 “错觉” 的过程 # 动画发展史 如今的前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类 UI 动画、基于 Web 的游戏动画和动画数据可视化 GIF、Flash 的出现，一度成为主流，也是在 00 年的前后，苹果公司认为 Flash 会导致 CPU 的负载，耗电加快，宣布全面放弃...

# React 的历史与应用 应用 前端应用开发，如 Facebook，Instagram，Netflix 网页版。 移动原生应用开发，如 Instagram，Discord，Oculus。 结合 Electron，进行桌面应用开发。 历史 2010 年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。 2011 年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型: 既可以在客户端渲染也可以在服务端渲染 响应式，当状态变更时，UI...