JS基础与高级应用: 性能优化

在现代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 复用连接 (持久连接, connection: keep-alive)
对头阻塞问题 (Head-of-Line Blocking，简称 HOL 阻塞） (下一个请求必须在前一个请求到达之后才可以进行); 1.1 => pipelining 解决对头阻塞问题

都是解决传输效率问题

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

头部空间: 协议层消除头部重复部分,利用算法对头信息压缩整合 ( 头部信息索引表 )。
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

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

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

分析:

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

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

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

js复制代码    class limitPromise {constructor(max){// 异步"并发"上限this._max =  max || 6 // 当前正在执行的任务数量 - 非满载场景this._count = 0// 等待执行的任务队列this._taskQueue = []// 实例 单例模式}// 执行的主入口// caller 执行的请求run(caller) {// 主入口// 输入外部要添加的// 输出返回队列处理的 promisereturn 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 = nullstatic 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 后置

内存分配: 即时释放

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

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 // 销毁