余弦の博客

文章介绍了 React 中事件处理、列表键值（keys）以及表单控件的核心概念。事件处理需传递函数而非字符串，且必须显式调用 preventDefault；列表中的每个元素应有唯一键值以帮助 React识别变化，键值应唯一于同级元素但无需全局唯一；表单使用“受控组件”模式，通过组件状态管理输入值，实现数据的单一来源控制；通过“提升状态”（lifting state up）将共享状态集中到最近的父组件，提升代码可维护性和调试效率。

本文介绍了小程序的发展历程、业务价值与技术原理，重点讲解了小程序的架构特点、开发优势及实际应用。通过实现一个简单的番茄工作法计时器，展示了小程序开发的核心语法和运行机制，并探讨了跨平台框架与运行时解决方案的优劣。

本文系统介绍了Web多媒体技术的核心概念，包括图像与视频的基本属性（分辨率、帧率、码率）、视频帧类型（I帧、P帧、B帧）、时间戳（DTS/PTS）和GOP结构，以及编码过程中的冗余压缩原理。重点讲解了HTML5多媒体元素的局限性，引入Media Source Extensions（MSE）API实现无插件的多格式视频流播放，并介绍HLS等流媒体协议在点播和直播、云游戏等场景中的应用。

文章介绍了前端场景下的游戏开发，强调了前端开发者可以参与游戏开发，尤其是2D游戏，因为主流2D游戏引擎支持JavaScript开发，降低了门槛。文章对比了游戏引擎与前端技术的差异，指出游戏引擎提供完整的开发解决方案，包含渲染、物理、动画、音效等核心功能，能显著提升开发效率，而前端开发者可通过学习如Cocos、Unity等引擎快速进入游戏开发领域。

本文介绍了TypeScript的核心概念与应用场景，包括其静态类型特性、基本语法（如变量声明、函数类型、数组、对象和接口）、高级类型（如联合类型、交集类型、泛型、类型别名和类型断言），以及类型保护和类型守卫的使用方法。通过泛型和映射类型等机制，TypeScript提升了代码的可读性、可维护性和类型安全，尤其在大型团队协作项目中能有效减少运行时错误，提升开发效率。

本文详细介绍了WebGL的基本原理和使用流程，解释了为何需要WebGL以及它与GPU、3D图形的关系，强调了WebGL相较于其他前端技术的复杂性。文章通过绘制三角形的步骤演示了WebGL的完整流程，包括创建着色器、绑定缓冲区、执行渲染，并介绍了Canvas 2D、Mesh.js、Earcut、SpriteJS、Three.js等图形库和工具，展示了WebGL在可视化和图形处理中的广泛应用。

本文介绍了Webpack作为前端工程化工具的核心概念与使用方法，讲解了其构建流程、关键配置项（如入口输出、Loader和Plugin）以及常用功能（如模块化处理、热更新HMR、Tree-Shaking、代码分割等）。通过实际案例演示了如何配置Webpack处理JavaScript、CSS、Babel、HTML生成等场景，并强调了工程化开发中配置管理的重要性。

本文详细介绍了Web安全中的常见漏洞，包括跨站脚本攻击（XSS）和跨站请求伪造（CSRF），并从攻击者和开发者的视角阐述了这些漏洞的原理、类型及防御措施。XSS通过注入恶意脚本窃取用户数据或篡改页面，分为存储型、反射型、DOM型和突变型；CSRF则利用用户身份权限发起未经授权的请求，危害较大且难防御。文章还介绍了SQL注入、拒绝服务（DoS）攻击、中间人攻击等安全问题，并强调开发中应避免信任用户输入、使用安全框架、配置CSP和SameSite策略等防护手段。

本文介绍了Node.js的典型应用场景与核心架构，包括前端工程（如模块化、打包、转译）、Web服务器开发、跨平台桌面应用（如VSCode、Slack）以及Server-Side Rendering（SSR）等。文章详细解释了Node.js的运行时架构（V8、libuv、N-API）、异步I/O机制、单线程模型及其优势与局限，并通过构建HTTP服务器、静态文件服务器和React SSR服务演示了实际开发流程。

本文介绍了HTTP协议的基本原理、请求响应机制、状态码、安全特性及常见应用场景。重点讲解了HTTP/1.1与HTTP/2的区别，包括帧结构、多路复用、持久连接和服务器推送，并详细说明了HTTPS的安全机制、CORS跨域解决方案以及静态资源和登录场景中的实际应用策略。