余弦の博客

# 本节课重点内容 # 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...

# 前端 Debug 的特点 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用…… 多环境 本地开发环境、线上环境 多工具 Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole…… 多技巧 Console、BreakPoint、sourceMap、代理…… # Chorme devTools Chorme devTools 谷歌浏览器自带的调试工具，功能非常之强大，包括现在很多浏览器也采用了这个调试工具，它既可以动态的添加 / 删除样式并实时的显示出来 # 强制状态显示 可以将一些特定状态下显示的元素显示出来（比如...

# 关于前端开发 # 起源、架构、变迁 "Suppose all the information stored on computers everywhere were linked. Suppose l could program my computer to create a space in which everything could be linked to everything." ——Tim Berners-Lee, inventor of the World Wide...

这节课是由月影老师讲的，干货满满，包括了面向对象的设计、组件封装、高阶函数（节流、防抖、批处理、可迭代化） # 本堂课重点内容 # 写好 js 的原则 # 各司其责 举个栗子：写一段 JS，控制一个网页，让他支持浅色 / 深色两种模式。你会怎么做呢？ 我的第一反应：写一个深色类，在切换按钮事件进行切换。这也是课件里讲的第二版。 第一版 直接切换样式，不妥，但能用 const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => {...