从浏览器输入URL到页面显示，到底发生了什么？

// 浏览器内部可能的处理逻辑class Browser {    async handleInput(url) {        // 1. URL合法性检查        if (!this.isValidURL(url)) {            return this.handleSearchInput(url);        }
        // 2. HSTS检查        if (this.hasHSTSRecord(url)) {            url = url.replace('http://', 'https://');        }
        // 3. 准备请求        await this.startRequest(url);    }}

// DNS解析过程的伪代码表示async function resolveDomain(domain) {    // 1. 检查浏览器缓存    let ip = browserDNSCache.get(domain);    if (ip) return ip;
    // 2. 检查操作系统缓存    ip = await checkOSCache(domain);    if (ip) return ip;
    // 3. 检查本地hosts文件    ip = await checkHostsFile(domain);    if (ip) return ip;
    // 4. 递归DNS服务器查询    ip = await recursiveDNSQuery(domain);
    return ip;}

浏览器缓存 → OS缓存 → hosts文件 → 本地DNS服务器 → 根DNS服务器 → 顶级域名服务器 → 权威DNS服务器

// TLS握手过程async function tlsHandshake() {    // 1. Client Hello    const clientHello = {        tls_version: 'TLS 1.3',        cipher_suites: ['TLS_AES_128_GCM_SHA256', ...],        random: generateRandom(),    };
    // 2. Server Hello + 证书    const serverResponse = await sendClientHello(clientHello);
    // 3. 验证证书    if (!verifyCertificate(serverResponse.certificate)) {        throw new Error('Certificate Invalid');    }
    // 4. 生成会话密钥    const sessionKey = generateSessionKey(        clientHello.random,        serverResponse.random    );}

// 发送HTTP请求async sendHTTPRequest(connection) {    // 构造HTTP请求    const request = {        method: 'GET',        url: this.currentURL,        headers: {            'Host': new URL(this.currentURL).hostname,            'User - Agent': 'Mozilla / 5.0...',            'Accept': 'text / html, application/ xhtml + xml...',            'Accept - Language': 'zh - CN, zh; q = 0.9',            'Accept - Encoding': 'gzip, deflate, br',            'Connection': 'keep - alive',            'Cache -Control': 'max - age = 0'        }    };
    // 发送请求    await connection.send(request);
    // 接收响应    return await connection.receive();}

# Django处理流程示例class WSGIHandler:    def __call__(self, environ, start_response):        # 1. 路由解析        resolver = URLResolver(ROOT_URLCONF)        callback, callback_args = resolver.resolve(path)
        # 2. 中间件处理        for middleware in self.middleware:            response = middleware.process_request(request)            if response:                return response
        # 3. 视图处理        response = callback(request, *callback_args)
        # 4. 响应处理        for middleware in reversed(self.middleware):            response = middleware.process_response(request, response)
        return response

// 渲染流程伪代码class Renderer {    async render(html) {        // 1. 构建DOM树        const domTree = this.parseHTML(html);
        // 2. 构建CSSOM树        const cssomTree = this.parseCSS(css);
        // 3. 合并成渲染树        const renderTree = this.constructRenderTree(domTree, cssomTree);
        // 4. 布局计算        this.layout(renderTree);
        // 5. 绘制        await this.paint(renderTree);
        // 6. 合成        this.composite();    }}

输入URL → DNS解析 → TCP连接 → TLS握手 → HTTP请求 → 服务器处理 → 浏览器渲染