尊哥的博客

页面卡顿本质是主线程阻塞或渲染开销过大。排查需先区分类型：加载慢、交互延迟、动画掉帧或内存持续上涨。使用 Chrome DevTools Performance 面板录制，通过 FPS、Long Task、主线程火焰图定位 JS 阻塞；观察 Render/Paint 判断重排重绘问题；Memory 面板检测内存泄漏；Network 与 Lighthouse 辅助分析网络与综合性能。针对性优化：拆分长任务、虚拟滚动、减少 DOM 操作、使用 transform 动画、清除定时器与事件监听、启用缓存与懒加载，提

页面初始化大量并发AJAX导致阻塞、带宽抢占。优化核心：减请求数、控并发、延非关键请求、复用结果。优先合并接口，前端实现并发队列（限6个），缓存避免重复请求（共享Promise、localStorage），懒加载非核心数据，使用AbortController及时取消无用请求。结合HTTP缓存与压缩，提升性能。

避免一次性接收、解析与渲染超大数据。后端优先采用游标分页+字段裁剪，减少传输量；前端使用 Fetch + ReadableStream 流式读取，配合 JSON Streaming 分段解析，避免阻塞主线程；数据处理交由 Web Worker，渲染采用虚拟滚动，原始数据不进响应式状态，导出场景直接下载文件。从请求到渲染全链路优化，保障性能与体验。

JS 单线程导致大量任务阻塞主线程，引发卡顿。优化核心：拆分任务、让出主线程、分批执行。纯计算用 Web Worker（子线程运行，不阻塞主线程，但不可操作 DOM）；需操作 DOM 用时间切片，通过 requestAnimationFrame（每帧执行少量任务，兼容性好）或 requestIdleCallback（空闲时执行，适合低优先级）实现；若渲染百万列表，采用虚拟滚动，仅渲染可视区域。辅以任务优先级、防抖节流、文档碎片、中断机制提升性能。

在一个函数的环境中，闭包=函数+词法环境持有本该销毁的函数，造成其关联的词法环境无法销毁当有多个函数共享词法环境时可能导致词法环境膨胀，从而发生无法访问但无法销毁的数据可以完成对象的基本操作Atomic CSSCSS 原子化就是把一个类里面的属性全部打散成一个个的单独类线上有很多原子化库：tailwind.css、unocss、windi.css等复用性开发效率少写代码开发习惯吃团队配置可读性打包体积vue2：v-for优先v-if。

大屏数据实时更新是数据可视化场景的核心需求（如监控大屏、业务看板等），需兼顾实时性（数据延迟低）、稳定性（不中断、不卡顿）和性能（避免前端过载）。三、前端视图更新优化（核心！四、稳定性保障（避免数据中断）五、典型架构方案（生产级大屏）二、实时数据传输技术选型。

SSE（Server-Sent Events，服务器发送事件）是一种基于 HTTP 的服务器向客户端主动推送数据的技术，适用于单向、持续的数据流场景（如实时通知、股票行情、日志更新等）。与 WebSocket 相比，SSE 更轻量（基于 HTTP 协议），仅支持服务器到客户端的单向通信，适合不需要客户端向服务器发送数据的场景。通过 SSE，开发者可以用简单的方式实现服务器到客户端的实时数据推送，无需复杂的协议处理，适合单向数据流场景。二、SSE 的使用步骤（客户端 + 服务器）一、SSE 的核心特点。

前端两个项目（如两个独立应用、主应用与子应用、不同标签页的应用等）之间的通讯，核心是突破浏览器的同源策略限制并找到共享数据或传递消息的媒介。具体实现方式取决于两个项目的运行环境（同域 / 跨域、同一浏览器 / 不同浏览器）和通讯需求（实时性、数据量、方向）。前端跨项目通讯的核心是利用浏览器提供的跨域 API（如postMessage、BroadcastChannel）或通过服务端中转，同时需注意安全验证（如origin校验）和兼容性。一、同域项目通讯（两个项目域名 / 端口 / 协议完全一致）

RTSP（实时流传输协议）和RTMP（实时消息传输协议）的核心区别在于：‌RTSP专注于流媒体播放控制（如暂停、播放），通常配合RTP/RTCP传输媒体数据，适用于低延迟场景如视频监控；而RTMP是集成式传输协议，直接封装音视频数据并通过单一TCP通道传输，更适合互联网直播等交互性强的场景‌。

将多个接口请求合并为单个批量请求，减少网络往返次数。例如使用Promise.all同时发起多个请求，或在商品详情页一次性获取商品信息、评论和推荐数据。这些方案可组合使用，例如在React Native中通过并发渲染架构配合请求队列实现高性能交互。实际应用中需根据具体场景选择合适策略，如电商详情页侧重请求合并，管理后台侧重缓存策略。六、React/Vue框架优化。一、请求合并与批量处理。三、请求取消与竞态处理。四、缓存与重复请求拦截。

总结：Hash模式适合快速开发或兼容旧浏览器，History模式更适合追求URL美观和SEO的项目。

总结：Vite适合追求开发效率的现代项目，Webpack则更胜任复杂场景和遗留系统。

HTTP/2.0与HTTP/1.1的主要区别体现在协议设计、传输效率和功能特性等方面：

一、前端基础1、HTTP,HTML,浏览器说一下http和httpstcp三次握手，一句话概括TCP和UDP的区别WebSocket的实现和应用一个图片url访问后直接下载怎样实现？说一下web Quality（无障碍）几个很实用的BOM属性对象方法?说一下HTML5 drag api说一下http2.0补充400和401、403状态码fetch发送2次请求的原因Co...

XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨大的，是web安全的头号大敌。...

helper javascript htmlbars eq if (a === b) {{if (eq a b)}} not-eq if (a !== b) {{if (not-eq a b)}} not if (!a) {{if (not a)}} and if (a && b) {{if (an...

1、cmd代理设置打开 cmd （win + R，输入 cmd，然后按 enter 键），然后输入如下命令：set http_proxy=http://proxy.yourname.com:8080其中 http://proxy.yourname.com 是你的代理服务器地址，而 8080 是端口号。如果你的代理服务器要求用户名和密码的话，还需要：set http_proxy_u...

cookiecookie的内容主要包括：名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。 会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。若设置了过期时间，浏览器就会把cook...

cookie属性：name、value、expires、domain、path、secure、max-age、HttpOnly。name name属性是必需的，它是一个键值对，用于指定Cookie的键。value value属性是必需的，它是一个键值对，用于指定Cookie的值。expires expires属性用于指定Cookie过期时间。它采用UTC或GMT格式，比如通过new...

Expires在HTTP/1.0中已经定义，Cache-Control:max-age在HTTP/1.1中才有定义，为了向下兼容，仅使用max-age不够；Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少2个问题： 1)客户端和服务器时间不同步导致Expires的配置出现问题； 2）很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象；max-age 指定的是从...