0%

发表于 更新于
本文字数： 6.9k 阅读时长 ≈ 6 分钟

有关Promise & async / await & 闭包 & Webworker

阅读全文 »

发表于
本文字数： 2k 阅读时长 ≈ 2 分钟

🌐 浏览器输入 URL 后发生了什么？

⛓️ 一、URL 解析

  1. 浏览器解析你输入的 URL（统一资源定位符）：

    1
    https://www.example.com:443/path?query=abc#hash
    • 协议（Scheme）：https
    • 主机名（Host）：www.example.com
    • 端口（Port）：默认443（HTTPS）
    • 路径（Path）：/path
    • 查询参数（Query）：query=abc
    • 锚点（Hash）：#hash（客户端用，不发送给服务器）

🌍 二、DNS 解析（域名解析）

  • 浏览器 → 系统 → 本地 DNS 缓存 → hosts 文件 → DNS 服务器
  • 将 www.example.com 解析为 IP 地址，如 93.184.216.34

🔐 三、建立连接

情况一：HTTP

  • 使用 TCP 三次握手，建立连接。

情况二：HTTPS

  • 先进行 TCP 三次握手。
  • 然后进行 TLS/SSL 握手，协商加密算法、交换证书、公钥，建立「安全连接」。

📤 四、发送 HTTP 请求

浏览器构造并发送请求报文：

1
2
3
4
GET /path?query=abc HTTP/1.1
Host: www.example.com
User-Agent: Chrome/123.0
Accept: text/html

📥 五、服务器处理请求

  • Web 服务器（如 Nginx、Apache、Node.js）接收请求。
  • 应用服务器处理路径和参数，例如调后端接口、数据库。
  • 返回 HTTP 响应，可能包含 HTML 页面、JSON 数据或其他资源。

📨 六、浏览器接收响应

服务器返回响应：

1
2
3
4
5
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>...</html>

🖼️ 七、浏览器渲染页面

  1. 解析 HTML，构建 DOM 树
  2. 下载 CSS → 构建 CSSOM 树
  3. 执行 JavaScript 脚本
  4. 构建 Render Tree（渲染树）
  5. 计算布局（Layout）
  6. 绘制页面（Paint）
  7. 用户看到完整网页

📦 八、可能的额外动作

  • 浏览器发送资源请求（如 CSS、JS、图片等）
  • Cookie 存取、Session 校验
  • 缓存策略（如强缓存、协商缓存）
  • CORS 跨域校验
  • 数据预加载等

🧠 总结一句话：

输入 URL → DNS 解析 → 建立连接（TCP/TLS）→ 发送请求 → 服务器响应 → 浏览器渲染 → 展示页面

跨域同源策略

🔒 什么是同源策略（Same-Origin Policy, SOP）

同源策略是浏览器的一种安全机制，限制不同源的网页之间的交互，以防止恶意网站窃取敏感信息。

📌 什么是“同源”？

两个 URL 的协议、域名、端口 完全相同，才称为同源：

例如：

URL 是否同源 说明
https://example.com ✅ 同源 完全一致
http://example.com ❌ 跨源 协议不同
https://sub.example.com ❌ 跨源 子域名不同
https://example.com:8080 ❌ 跨源 端口不同

🚫 同源策略的限制内容

浏览器中，如果两个页面 非同源，则受限制：

受限制的内容 说明
DOM 访问 JS 不能访问另一个源页面的 DOM
Cookie/LocalStorage 不能读写其他源的 cookie 和本地存储
AJAX 请求 JS 不能用 XMLHttpRequest/fetch 访问其他源的接口

🔁 什么是跨域？

当你尝试访问非同源的资源时，就叫做“跨域”。

例如：

1
2
// 当前页面： https://a.com
fetch("https://b.com/api/data"); // ← 跨域请求

由于同源策略限制，这类请求默认会被浏览器拦截或限制。

✅ 常见跨域解决方案

方法 原理简介 说明
CORS 服务器通过设置响应头允许跨域访问 最常用、推荐的方式
JSONP 通过 <script> 标签实现 GET 跨域 仅支持 GET，请求不安全
代理服务器 前端请求发到同源代理，代理再访问真实接口 开发中常用于本地调试
postMessage 用于两个不同源的窗口之间安全地通信 常用于 iframe、窗口通信
nginx 反向代理 nginx 转发前端请求到目标服务器 服务端配置
跨域资源嵌入 如 <img> <script> <iframe> 加载外部资源 不受同源策略限制（但有限能力）

🌐 CORS 示例

前端请求：

1
fetch('https://api.example.com/data')

服务器响应头必须包含：

1
2
3
Access-Control-Allow-Origin: https://your-frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

🧠 总结一句话：

同源策略保护浏览器安全，防止不同源之间随意交互。跨域是绕过同源策略的方式，常用的解决方案是 CORS。

发表于
本文字数： 1.4k 阅读时长 ≈ 1 分钟

目前比较喜欢用Next来写前端，但是有时候总感觉模模糊糊的不知道为什么要这样写...

阅读全文 »

发表于 更新于
本文字数： 12k 阅读时长 ≈ 11 分钟

本文将“Learn X in Y minutes”中的代码注释机翻为中文

阅读全文 »