在现代Web开发中，性能优化已成为前端工程师必须掌握的核心技能之一。本文从URL输入到页面加载完成的全过程出发，深入分析了HTTP协议的演进、域名解析、代码层面性能优化以及编译与渲染的最佳实践。通过节流、防抖、重复请求合并等具体技术手段，全面提升Web应用的性能表现。本文不仅涵盖了理论知识，还提供了实用的代码示例，帮助读者在实际项目中快速应用这些优化策略。

一、从输入 URL 到页面加载完成都做了什么?

第一步: 从 输入 开始分析

URL 和 URI 的区别

URL: 资源定位符 | URI: 资源标识符 | www.baidu.com - http 协议

http 和 tcp 之间有什么关联和区别?

http 属于应用层协议, tcp 属于传输层协议

关联: http 是基于 tcp 实现连接的。udp 无连接、传输速度快、会丢包。

http 是如何建立连接的? 三次握手和四次挥手

HTTP 面向连接, 安全。但是传输速率相较低于 UDP , 每次请求前都需要建立连接。

优化方向: 回合制(session) 多路复用 | 压缩头部空间 | 合并请求-长连接

优化点: http1.0 http1.1 http2.0

HTTP1.0 存在的问题:

1. 没有办法复用连接 | 1.1 复用连接 (持久连接, connection: keep-alive)
2. 对头阻塞问题 (Head-of-Line Blocking，简称 HOL 阻塞） (下一个请求必须在前一个请求到达之后才可以进行); 1.1 => pipelining 解决对头阻塞问题

都是解决传输效率问题

HTTP 1.1 => 2.0: 2.0 解决的问题

1. 头部空间: 协议层消除头部重复部分,利用算法对头信息压缩整合 ( 头部信息索引表 )。
2. 1.0/1.1 纯文本格式 | 2.0 二进制优化, HTTP2.0 都是用二进制进行传输, 帧的形式。=> 多路复用(复用通路, 无并发限制)

HTTPS => HTTP + SSL协议

优化: 安全性建立导致网络请求加载时间延长。合并请求-长连接。

如何使用 HTTP 2.0 ?

第二步: 解析域名

地址转换成 IP: www.baidu.com => xxx.xxx.xxx.xxx | ARP 协议

IP 转成网址: RARP 协议

什么是 HOST? 如何切换 HOST? => 寻址

浏览器的缓存映射 → 系统缓存映射 → 路由器缓存映射 → 运营商缓存映射 → 根服务器

/etc/hosts localhost 127.0.0.1

实际静态文件存放: 机房、云服务站点 => 大流量问题 =>

配置多个 IP 地址、LB负载均衡、云服务

CDN 内容分发网络

缓存机制: 各级缓存 => 浏览器缓存 (304) - 强缓存(expire cache-control) / 协商缓存 last-modify、etag 找服务端进行验证是否需要缓存。

寻址、缓存

········································································································································································

二、代码层面性能优化

并发控制 QPS

1. 浏览器请求上限 - 最大同时请求 6 条。

并发优化: 同时发出 20 条请求,但是由于服务或者业务需求, 我们的性能只能同时处理 3 个, 怎么去做?

分析:

输入: 参数 max - 最大的同时处理量

存储: reqpool - 并发池 (实时更新, 出去一个进来一个)

思路: 执行且回调, 实时加入添加。 执行 => 回调 => 塞入 => 返回 (循环)

js复制代码    class limitPromise {
        constructor(max){
            // 异步"并发"上限
            this._max =  max || 6 
            // 当前正在执行的任务数量 - 非满载场景
            this._count = 0
            // 等待执行的任务队列
            this._taskQueue = []
            // 实例 单例模式

        }
        // 执行的主入口
        // caller 执行的请求
        run(caller) {
            // 主入口
            // 输入外部要添加的
            // 输出返回队列处理的 promise
            return new Promise((resolve, reject)=>{
                // 创建处理任务
                const task = this._createTask(caller, resolve, reject)
                // 当前队列是否拿到上限
                 if(this._count >= this._max){
                     // 超过最大数量, 不去执行, 放入待执行队列中
                     this._taskQueue.push(task)
                 } else {
                     task()
                 }
            })
        }
        _createTask(caller, resolve, reject){
            return () => {
                caller().then(res =>{
                    resolve(res)
                }).catch(err=>{
                    reject(res)
                }).finally(()=>{
                    this._count--
                    if(this._taskQueue.length){
                        const task = this._taskQueue.shift()
                        task()
                    }
                })
                this._count++
            }
        }
        static instance = null
        static getInstance(max){
            if(!this.instance){
                this.instance = new limitPromise(max)
            }
            return this.instance
        }
    }

节流

js复制代码    function throttle(func, wait) {
      let timeout = null;
      let lastExecution = 0;

      return function (...args) {
        const context = this;
        const now = Date.now();

        if (lastExecution && now < lastExecution + wait) {
          clearTimeout(timeout);
          timeout = setTimeout(() => {
            lastExecution = now;
            func.apply(context, args);
          }, wait - (now - lastExecution));
        } else {
          lastExecution = now;
          func.apply(context, args);
        }
      };
    }

    function handleResize() {
      console.log('Resize event triggered at', new Date().toLocaleTimeString());
    }

    // 创建一个节流函数，最多每1秒执行一次
    const throttledResize = throttle(handleResize, 1000);

    // 监听窗口调整大小事件
    window.addEventListener('resize', throttledResize);

防抖

防抖（Debounce）是指在事件被触发后，等待一段时间再去执行函数。如果在等待时间内事件再次被触发，则重新开始计时。防抖的常见应用场景包括搜索框输入、窗口调整大小、按钮点击等需要防止频繁触发的情况。

防抖函数可以通过 setTimeout 和 clearTimeout 来实现。以下是一个通用的防抖函数实现：

js复制代码    function debounce(func, wait) {
      let timeout;

      return function (...args) {
        const context = this;

        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    }

    function handleInput() {
      console.log('Input event triggered at', new Date().toLocaleTimeString());
    }

    // 创建一个防抖函数，只有在最后一次输入后等待1秒才执行
    const debouncedInput = debounce(handleInput, 1000);

    // 监听输入事件
    const inputElement = document.querySelector('input');
    inputElement.addEventListener('input', debouncedInput);

扩展功能：立即执行选项

有时我们希望在事件触发后立即执行一次函数，并在等待时间内不再执行。可以通过增加一个 immediate 参数来实现：

js复制代码    function debounce(func, wait, immediate) {
      let timeout;

      return function (...args) {
        const context = this;
        const callNow = immediate && !timeout;

        clearTimeout(timeout);
        timeout = setTimeout(() => {
          timeout = null;
          if (!immediate) func.apply(context, args);
        }, wait);

        if (callNow) func.apply(context, args);
      };
    }

<!---->

    function handleInput() {
      console.log('Input event triggered at', new Date().toLocaleTimeString());
    }

    // 创建一个防抖函数，在第一次输入时立即执行，之后等待1秒再执行
    const debouncedInput = debounce(handleInput, 1000, true);

    // 监听输入事件
    const inputElement = document.querySelector('input');
    inputElement.addEventListener('input', debouncedInput);

重复请求的合并

三、编译和渲染优化

打包优化 => 压缩、分割、按需加载、异步加载 => 工程化

渲染优化 => 重排和重绘 => 根据浏览器原理避免

线程阻塞 => JS 后置

内存分配: 即时释放

1. 对象原则: 层级宜平不宜深, 尽量使用深拷贝(局部), 避免循环利用。

js复制代码<!---->

    function foo(){
        course = '' // 永远不会释放
        this.course = ''
    }
    foo()

    const timeoutId = setTimeout(()=>{}, 1000) // 定时器线程独立于JS线程
    clearTimeout(timeoutId); // 清除定时器

    function course{
        const c = 'xxx'
        return {
            c
        }
    }
    const tmp =course()

    tmp = undefined // 销毁

1. JS mark & sweep

mark 触达标记: 能够被访问到, 标记; 没有再能访问的 sweep。