Web开发

Web开发一、前端工程化核心工具1.1 Vue、Vite、npm 的职责划分Vue前端框架提供组件化与响应式编程模型将页面拆分为可复用的组件管理视图层状态。npm包管理器Node.js 的默认包管理工具托管全球最大的 JavaScript 代码仓库通过npm install下载项目依赖。Vite构建工具利用原生 ES Module 实现开发时秒级启动生产构建时使用 Rollup 打包输出优化后的静态资源。1.2 构建输出npm run build的本质执行npm run build后Vite 会生成dist目录包含.html入口文件合并压缩后的.css样式文件经过代码混淆、压缩的.js文件非二进制仍为 JavaScript 文本构建过程完成代码拆分Code Splitting、Tree Shaking、资源指纹Hash命名、压缩等优化减少网络传输体积。二、部署与 Web 服务器2.1 静态部署与反向代理生产环境通常将dist目录部署到 Web 服务器如 Nginx、Apache。Web 服务器监听公网端口80/443直接响应静态资源请求无需 Node.js 运行时参与。2.2 Nginx 的反向代理与路由分流Nginx 作为反向代理服务器承担以下职责静态资源直接返回请求路径匹配/static/时直接读取本地文件。API 请求转发请求路径匹配/api/时转发给内网后端服务如127.0.0.1:8080。负载均衡可将请求分发到多个后端实例。SSL 终止处理 HTTPS 加密和解密减轻后端服务压力。安全防护支持限流、IP 黑白名单、防 DDoS 等。2.3 浏览器 → Nginx → 后端的完整链路浏览器发起请求 → Nginx公网 IP:443 → 静态资源直接返回 HTML/CSS/JS → API 请求转发至内网后端服务 → 后端处理业务逻辑、操作数据库 → 返回 JSON 响应 → Nginx 将响应返回浏览器 → 浏览器解析 JSON更新界面三、网络基础设施IP、MAC、端口3.1 IP 地址的分配与管理全球 IPv4 地址由 IANA 统一分配由各区域注册机构如 APNIC 负责亚太区管理。中国机构如 CNNIC从 APNIC 申请地址段再分配给国内运营商和云厂商。IP 地址需按年缴纳维护费用并非一次性买断。3.2 MAC 地址的唯一性保证MAC 地址48 位由 IEEE 统一管理。IEEE 将前 24 位OUI组织唯一标识符分配给网络设备制造商后 24 位由厂商自行分配确保同一厂商内部不重复从而实现全球唯一。3.3 端口的作用与范围端口是传输层TCP/UDP的逻辑概念用于区分同一 IP 上的不同服务。端口号范围为 0~6553516 位常见约定80HTTP、443HTTPS、22SSH、3306MySQL等。端口并无物理实体仅由操作系统内核管理数据包分发。四、网络安全防火墙与 SSL/TLS4.1 状态防火墙的工作原理防火墙通过维护连接状态表State Table来决策出站主动连接记录源 IP、目标 IP、端口允许对应回包进入。入站未匹配连接直接丢弃。但传统防火墙不检查数据包内容无法防御“恶意回包”或“伪装攻击”。实际防护需结合HTTPS 证书验证确保通信对端身份深度包检测DPI或下一代防火墙NGFW终端杀毒软件对落地文件进行扫描4.2 SSL/TLS 证书体系SSLSecure Sockets Layer已被TLSTransport Layer Security替代但习惯仍称 SSL 证书。证书颁发机构CA负责签发数字证书中国有 CFCA、GDCA、沃通等具备资质的 CA。操作系统信任链Windows、macOS、Linux 等预置约 100~200 个根证书。新 CA 的根证书通过系统更新补丁如 Windows 月度更新添加而非仅靠编号。4.3 证书验证的性能优化浏览器验证证书时根据证书中的“颁发者Issuer”字段直接查找本地信任列表索引查询极快。进行 RSA/ECC 非对称解密验证签名数学运算较慢但仅 TLS 握手时执行一次。握手完成后会话使用对称加密AES速度快。五、后端服务与 BaaS 平台5.1 后端服务的典型职责暴露 RESTful API 或 GraphQL 接口处理业务逻辑、权限校验操作数据库SQL/NoSQL返回 JSON/XML 数据后端语言可选 Java、Python、Node.js、Go、Rust 等各有适用场景。5.2 Supabase 等 BaaS 平台Supabase 是开源的后端即服务Backend-as-a-Service平台提供PostgreSQL 数据库自动生成 REST API实时 WebSocket 订阅内置用户认证Auth文件存储开发者只需调用前端 SDK 或 HTTP 接口无需自行编写后端代码适合快速原型开发。六、跨平台桌面应用技术选型6.1 React 与 Vue 的核心差异维度ReactVue设计哲学视图层库灵活组合渐进式框架内置路由、状态管理模板语法JSXJavaScript 内嵌 XML基于 HTML 的模板语法数据流单向数据流需手动触发更新响应式代理Proxy自动更新学习曲线较陡需熟悉 Hooks、副作用较平缓官方文档详尽6.2 Electron 与 Tauri 的对比维度ElectronTauri原理内置 Chromium Node.js使用操作系统原生 WebView系统自带安装包大小~70–100 MB~5–10 MB内存占用较高~200 MB较低50 MB后端语言Node.jsJavaScriptRust系统能力直接通过 Node.js 访问文件、网络通过 Rust 提供的 IPC 接口调用系统 API典型项目VS Code、Slack、Figma早期微信开发者工具部分、Lane、CC SwitchTauri 更适合需要轻量、高性能且对包体积敏感的应用。七、浏览器缓存与 Cookie7.1 缓存目录位置浏览器将下载的 HTML、CSS、JS、图片等缓存到本地磁盘默认路径WindowsChrome/EdgeC:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\CachemacOSChrome/Edge/var/folders/.../T/.../Cache/LinuxChrome/Edge用户临时目录缓存用于减少重复网络请求加速页面加载。7.2 Cookie 的用途与特性Cookie 是服务器通过Set-Cookie响应头写入浏览器的小型文本≤4KB在后续同源请求中自动携带。主要用途会话管理保持登录状态个性化设置主题、语言用户追踪分析、广告与缓存的区别缓存存资源Cookie 存状态标识缓存由浏览器管理Cookie 由服务器控制通过属性如HttpOnly、Secure、SameSite现代应用更倾向使用LocalStorage或SessionStorage存储非敏感数据身份认证则使用 JWT Token手动添加到请求头避免 Cookie 的自动携带带来的 CSRF 风险。