如何网站建设目标,北京 网站建设|小程序|软件开发|app开发公司,找手工活做注册网站,网络规划设计师科目分类在现代Web开发中#xff0c;性能优化已成为前端工程师必须掌握的核心技能之一。本文从URL输入到页面加载完成的全过程出发#xff0c;深入分析了HTTP协议的演进、域名解析、代码层面性能优化以及编译与渲染的最佳实践。通过节流、防抖、重复请求合并等具体技术手段#xff0…在现代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 xxxreturn {c}}const tmp course()tmp undefined // 销毁JS mark sweep
mark 触达标记: 能够被访问到, 标记; 没有再能访问的 sweep。
