大模型大数据攻城狮的专栏

实习时长我的实习时长为。

WebSocket 是 HTML5 新增的应用层协议，用于在客户端（浏览器）和服务器之间建立全双工、双向、持久的通信通道，解决 HTTP 协议 “客户端主动请求，服务器被动响应” 的单向通信问题。数据安全：用户数据（如密码、手机号、支付信息）的加密存储与传输；访问控制：确保只有授权用户能访问特定资源（如登录后才能访问个人中心）；攻击防护：抵御常见的 Web 攻击（XSS、CSRF、SQL 注入、点击劫持等）；隐私保护：遵守数据隐私法规（如 GDPR、Cookie 政策），不泄露用户隐私；传输安全。

有权访问另一个函数作用域中变量的函数；通俗理解为：内层函数引用了外层函数作用域中的变量，且内层函数被外部访问，导致外层函数执行完毕后，其作用域不会被垃圾回收，从而形成闭包。闭包的本质是作用域链的特殊表现形式，核心是 “保留外层函数的作用域”。// 外层函数的变量// 内层函数引用外层变量，且被返回（外部可访问）fn();// 10（outer 执行完毕后，num 仍能被访问）将接收多个参数的函数，转化为一系列只接收单个参数的函数的过程；

TypeScript 中的枚举（Enum）是一种用于定义命名常量集合的语法，其核心价值是“类型安全+语义化”，但 TypeScript 是 JavaScript 的超集，枚举本身并非 JavaScript 原生特性，编译时会被转换为对应的 JavaScript 代码，转换形式取决于枚举的类型（数字枚举、字符串枚举、异构枚举）和编译配置，面试中需按枚举类型分类说明转换结果，同时解释转换逻辑和使用场景。// 导入（模块 b.js）const modA = require('./a.js');

核心作用：作为动画的“脚本”，定义动画在不同时间点（关键帧）的样式状态，通过from（动画开始，0%）、to（动画结束，100%）或自定义百分比（如 25%、50%、75%）指定各阶段的样式，是 animation 动画的基础。语法规则用@keyframes 动画名称 { ... }定义，内部包含多个关键帧；每个关键帧指定对应百分比的样式，浏览器会自动补全关键帧之间的过渡效果；支持所有可动画的 CSS 属性（如transformopacitywidth等）。使用场景。

定期 bug 复盘：迭代结束后，组织团队复盘已出现的 bug，分类统计 bug 类型（如需求误解、编码错误、兼容性问题）、产生原因（如未自测、技术方案不合理），总结经验教训；更新开发规范与工具：针对复盘发现的共性问题，更新开发规范（如补充“接口 401 状态码处理规范”）、优化工具函数（如增强表单校验工具的覆盖场景），从制度和工具层面预防同类 bug；沉淀 bug 知识库：将典型 bug、修复方案、预防措施记录到团队知识库（如 Confluence、Notion），供团队成员学习参考，避免重复踩坑。

Web SQL：基于 SQL 的关系型存储（已废弃）核心特点：遵循 SQL 标准，支持 SQL 语句（SELECT/INSERT/UPDATE/DELETE），存储结构化数据；局限性：W3C 已停止维护，仅部分浏览器（Chrome、Safari）支持，不推荐新项目使用；适用场景：无，已被 IndexedDB 替代。Service Worker 缓存：离线资源缓存核心特点：基于 Service Worker 线程，缓存 HTTP 资源（如 HTML、CSS、JS、图片），支持离线访问；

在 HTTP 缓存机制中，Cache-Control、Pragma 用于控制缓存策略（强缓存/协商缓存），Last-Modified、ETag 用于缓存验证（协商缓存核心），两组字段的优先级直接决定浏览器的缓存行为，核心规则是“后出现的协议字段优先级更高，精准指令优先级高于兼容指令”。一、Cache-Control 和 Pragma 的优先级关系Cache-Control 是 HTTP/1.1 定义的核心缓存控制字段，支持丰富的缓存策略（如 max-age、no-cache、no-store）；

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一种 “渲染环境”，本质是一个独立的 “块级渲染区域”，该区域内的元素按照块级元素的规则排列，且与外部元素的渲染互不干扰。简单来说，BFC 就像一个 “隔离的容器”，容器内的元素布局不会影响容器外的元素，反之亦然。理解 BFC 是解决 CSS 布局问题（如浮动塌陷、margin 重叠）的关键。1. 首先：如何触发 BFC（创建 BFC 渲染环境）

this 是 JavaScript 中的一个关键字，它指向当前执行上下文的一个对象，其具体指向在函数定义时无法确定，只能在函数执行时根据执行环境动态确定。this 的指向直接影响函数内部对对象属性和方法的访问，理解 this 的绑定规则是掌握 JavaScript 的重要基础。this 的绑定规则主要有以下几种：默认绑定：当函数独立调用时，即不通过任何对象调用，非严格模式下 this 指向全局对象（浏览器中是 window，Node.js 中是 global）；

Vue 内置指令（如v-modelv-ifv-for）覆盖了大部分常见 DOM 操作场景，但在实际开发中，常会遇到需要复用特定 DOM 行为的需求（如输入框自动聚焦、滚动监听、权限控制隐藏元素等），此时可通过自定义指令（Custom Directive）封装这些底层 DOM 操作。自定义指令是 Vue 提供的扩展机制，允许开发者直接操作 DOM 元素，定义与元素生命周期相关的逻辑（如元素挂载后、更新时、卸载前的行为）。其核心特点是聚焦 DOM 操作复用。

记录每次绘制的耗时，动态调整抽样率或渲染方式。

为不同设备、不同分辨率提供最合适的图片资源。手机、平板、PC，甚至是带视网膜屏的MacBook，每种设备对图片的分辨率和尺寸需求都不一样。直接丢一张超大图？带宽浪费，加载慢。给张小图？高清屏上模糊一片。srcset就是为此而生的神器。srcset：让浏览器根据设备的分辨率（DPR，设备像素比）或视口大小，动态选择最合适的图片资源。懒加载（Lazy Loading）是指图片只在进入视口（用户能看到的地方）时才加载。好处。

埋点系统采集了大量用户行为数据，安全性是重中之重。他们引入了sendBeaconAPI，确保页面卸载时数据可靠发送，同时结合IndexedDB实现离线缓存，数据丢失率降低至0.5%。他们对“缓冲”错误设置了10%采样率，同时保留“播放失败”错误100%上报，服务器负载降低70%，关键问题依然可追踪。他们引入了客户端正则表达式脱敏，邮箱地址中的用户名部分被替换为“***”，并在服务端进行二次校验，杜绝了隐私风险。他们引入了插件化架构，将核心埋点逻辑与业务埋点分离，各业务线可独立开发插件，维护效率提升50%。

在地理信息系统（GIS）相关项目中，地理信息字段、图斑是核心数据概念，而地图展示、区域选择则是常见功能场景。以下从概念定义到功能实现，逐步拆解说明。1. 地理信息字段地理信息字段（Geographic Information Field）是。

构造函数、实例对象、原型对象构造函数：用于创建对象的函数（如ArrayObject），构造函数有一个prototype属性，指向“原型对象”；原型对象：存储所有实例共享的属性和方法（如），原型对象有一个属性，指向对应的构造函数（如实例对象：通过构造函数创建的对象（如），实例对象有一个内部属性（浏览器中表现为__proto__，非标准），指向构造函数的prototype（即原型对象）。// 1. 构造函数// 实例私有属性（每个实例独有）// 2. 原型对象：添加共享方法（所有实例共享）

flex: 1独立性：BFC 内部的块级元素布局（如位置、尺寸）完全独立于外部环境，外部元素无法影响内部，内部元素也不会影响外部；触发条件：BFC 不是默认存在的，需通过特定 CSS 属性触发（如等）；布局规则：BFC 内部的块级元素遵循“垂直方向依次排列”“margin 不重叠”“包含浮动元素”等特定规则（即 BFC 的性质）。简单来说，BFC 就像一个“封闭的房间”，房间内的元素怎么排列都不会影响房间外的元素，反之亦然。现象：两个或多个块级元素的垂直 margin（margin-top。

对比维度参数要求接收“可迭代对象”（如数组），元素必须是 Promise 对象或可被转换为 Promise 的值（如普通值会被包装）同all，可迭代对象，元素为 Promise 或普通值同all，可迭代对象，元素为 Promise 或普通值成功条件所有 Promise 均转为fulfilled（全部成功）第一个完成的 Promise 转为fulfilled（无论顺序，先成功则整体成功）无需成功条件——所有 Promise 均完成（无论fulfilled或rejected），即“所有结果已确定”

本文系统性地探讨了电商网站在弱网环境和低端安卓设备上的性能优化策略。通过图片压缩、资源预加载、代码拆分等技术手段，将首屏加载时间从5秒优化至0.8秒。重点介绍了骨架屏、渐进式加载等提升用户体验的技巧，以及WebAssembly、虚拟DOM优化等针对低端设备的进阶方案。文章还强调了性能监控的重要性，并分享了真实案例中通过多维度优化实现的转化率提升。最后指出性能优化是持续过程，需要团队协作和自动化工具的支持。

前端优化是“提升用户体验、降低资源消耗”的核心手段，需围绕“用户感知的性能指标”（如页面加载速度、交互流畅度）展开，覆盖加载优化、渲染优化、代码优化、网络优化、缓存优化、性能监控六大维度，每个维度下有具体可落地的措施，同时需结合项目实际场景（如单页应用、电商首页）选择优化方案。分页组件需通过props接收“数据总量、当前页、每页条数”等基础信息，通过emit触发“页码切换、每页条数变化”的回调（供父组件请求对应页数据），同时定义默认值确保兼容性。核心Props与Emit设计<template>

父子组件的生命周期执行顺序遵循 “

回流（Reflow）：指浏览器重新计算页面元素的几何属性（如宽度、高度、位置、间距），并构建新的布局树（Layout Tree）的过程。回流会改变页面的布局结构，是“从无到有”的几何计算过程。重绘（Repaint）：指浏览器在不改变元素几何属性的前提下，重新绘制元素的视觉样式（如颜色、背景、阴影、透明度）的过程。重绘仅改变元素的外观，不影响页面布局，是“基于已有布局”的视觉更新过程。设计稿对齐：以 750px 宽度设计稿为基准，确保所有元素尺寸可直接转换为 rpx；

对于文本类文件（如CSV、JSON），在客户端用Gzip压缩后再上传，能显著减少数据量。虽然MD5有碰撞风险，但它计算快，适合大文件。：经常访问的文件（热数据）存在S3标准存储，访问少的（冷数据）转到低频存储（如S3 Glacier），成本能降50%以上。每个分片丢进队列，异步处理，既保证了并发效率，又避免了服务器被“冲垮”。（chunked upload）是解药：把大文件切成小块（比如每块5MB），一块一块传，服务器再把这些“碎片”拼起来。服务器收到分片后，计算每个分片的哈希，存到Redis或数据库。

为什么三次握手，不是两次？核心是“避免历史无效连接，确保双方收发能力正常”。若仅两次握手（客户端发 SYN → 服务器发 SYN+ACK，连接建立），可能存在“延迟的 SYN 报文”问题：假设客户端曾发送一个 SYN 报文（因网络延迟未到达），客户端超时重发并完成三次握手建立连接、传输数据、关闭连接；之后延迟的 SYN 报文到达服务器，服务器会误以为是新的连接请求，发送 SYN+ACK 并进入SYN_RCVD状态，但客户端已无此连接的记录，不会回复 ACK，服务器会一直等待 ACK 直至超时，浪费资源。

Vue Router 是 Vue 官方提供的路由管理库，用于实现单页面应用（SPA）的页面跳转与路由控制，核心用法围绕 “配置 - 映射 - 跳转” 展开，以下从基础配置、动态路由、子路由三方面详细说明。动态路由用于处理 “路径规则相同但参数不同” 的场景，例如 “用户详情页”（/user/1/user/2对应不同用户），核心是通过 “路径参数” 传递动态值。动态路由定义：在路由规则的path中，用:参数名表示动态参数，示例：// router/index.js 中的 routes 数组。

我曾参与开发一个电商后台管理系统，主要功能包括商品管理、订单处理、用户权限控制、数据统计等，技术栈为 Vue 3 + TypeScript + Element Plus，构建工具用 Vite，后端接口基于 RESTful API，项目团队共 6 人，我的职责是负责商品模块和权限系统的开发。项目中遇到的第一个难点是商品列表的大数据渲染。由于商品数据量达 10 万+，直接一次性渲染会导致页面卡顿、内存溢出。

自定义 Hooks 是基于基础 Hooks 封装的可复用逻辑，命名需以use开头（React 规定，确保 Hooks 规则生效），核心价值是“抽离组件中的重复逻辑，实现跨组件复用”。useRequest：封装接口请求逻辑，包含加载状态、错误处理、重试功能；：封装防抖逻辑，用于输入框搜索、窗口 resize 事件；：封装本地存储逻辑，实现状态与的同步（状态变化时自动存入，组件挂载时从读取）。

ease（默认）：等价于，效果为“慢→快→慢”（先加速后减速），适合大多数场景。linear：等价于，效果为匀速运动，适合机械感动画（如进度条）。ease-in：等价于，效果为“慢→快”（逐渐加速），适合进入场景（如元素从无到有）。ease-out：等价于，效果为“快→慢”（逐渐减速），适合退出场景（如元素从有到无）。：等价于，效果为“慢→快→慢”（对称JavaScript 的基本数据类型有哪些？ES6 新增了什么数据类型？

跨域指的是浏览器出于安全考虑，实施“同源策略”限制，当一个页面的JavaScript尝试访问另一个页面的资源时，若两个页面的“源”不同，则会被阻止。这里的“源”由协议、域名、端口三者共同组成，只要其中任一不同，即为跨域。例如，与（协议不同）、与（域名不同）、与（端口不同），均属于跨域。同源策略的目的是防止恶意网站窃取数据，但也会阻碍合法的跨域资源访问，因此需要针对性的解决方案。CORS（跨域资源共享）原理：后端在HTTP响应头中设置。

JS 闭包是 JavaScript 中一种特殊的函数现象，指当一个内部函数引用了外部函数的变量或参数，且内部函数在外部函数作用域之外被调用时，外部函数的作用域不会被销毁，内部函数依然能访问这些变量的机制。闭包的形成需要满足三个条件：一是存在函数嵌套（内部函数定义在外部函数内部）；二是内部函数引用了外部函数的变量或参数；三是外部函数被调用后，内部函数被返回或在其他作用域中被使用。

多租户场景适合用 ABAC，比如 { resource: 'order', action: 'edit', conditions: { tenantId: 'companyA', isOwner: true } }。咱得让界面元素乖乖听权限的指挥，别让用户看到不该看的东西，也别让按钮“勾引”用户去点没权限的操作。想象一下，用户点了个按钮，结果后端返回“无权限”，页面却傻乎乎地啥也没提示，或者更糟，压根儿不该显示的按钮还大大咧咧地摆在那儿——这体验能好吗？比如，只有管理员能改“订单状态”，普通用户只能看。

图片懒加载技术全解析：从原理到实践优化 懒加载通过延迟加载视口外的图片，显著提升网页性能，尤其适用于图片密集型网站（如电商、社交媒体）。其核心原理是利用IntersectionObserver监听元素与视口的交叉状态，或通过getBoundingClientRect()兼容老浏览器。 实现方案 原生JS：IntersectionObserver动态替换data-src，预加载优化rootMargin。 框架集成：React组件化封装、Vue指令化、Angular结合管道与指令。

（简称 AppCache）曾经是离线存储的“当红炸子鸡”，它让开发者能指定哪些资源需要缓存，从而实现断网访问。它支持复杂的结构化数据存储、索引和查询，适合需要处理大量数据的场景，比如离线邮件客户端或复杂的 Web 应用。尽管如此，了解 AppCache 的历史和教训，能帮助我们更好地理解离线存储的演进，以及如何避免类似的“技术陷阱”。是 HTML5 离线存储的入门选手，简单易用，适合存储小型数据，比如用户偏好、表单输入或临时状态。：技术选型时，优先选择灵活、可控的方案，避免过于“黑盒”的工具。

想让标题更大胆？柱子更立体？title: {text: '高颜值柱状图',},series: [{}]效果：标题粗大白，柱子带点阴影，瞬间高端大气！嫌内置主题不够独特？可以自己定义主题！});小技巧：用在线工具（比如ECharts主题编辑器）调色，省时又省力。想让图表更有创意？graphic组件能让你绘制自定义图形，甚至加点动画效果。x: 100,y: 100,{ percent: 1, rotation: Math.PI * 2 } // 旋转一周],}],效果。

在电商页的筛选功能中，我们用Map缓存价格区间的过滤结果，结合分步渲染，仅显示前20条商品。在我们的电商列表页中，商品数据包含价格、库存等动态字段，但商品名称和图片URL是静态的。在电商页的下拉筛选菜单中，我们用CSStransform实现展开动画，结合requestAnimationFrame处理动态高度调整，帧率稳定在60fps，告别了之前的卡顿。网络请求是Vue应用性能的另一大瓶颈，尤其是在数据密集型页面（如电商商品列表）中，请求延迟或频繁调用可能让页面卡得“让人抓狂”。

不同文件中定义了相同的 API 地址或配置对象。

HTML5不仅仅是标签的升级，它还带来了强大的API，让网页从静态展示变成动态交互的舞台。理解HTML元素的本质，不仅能让你写出更干净的代码，还能为后续的高级功能（如CSS样式、JavaScript交互）打下坚实基础。HTML5引入了语义化元素（如<header>、<article>、<section>），它们不仅让代码更具可读性，还能被搜索引擎和辅助设备（如屏幕阅读器）更好理解。是HTML5的杀手级功能，它像个“代理服务器”，运行在浏览器后台，拦截网络请求、缓存资源，甚至让网页离线也能用。

用protoc生成C++和JavaScript代码，分别给后端和前端用。

跨域问题，简单来说，就是浏览器出于安全考虑，限制了不同源（协议、域名、端口号任一不同即为不同源）的网页之间进行资源交互。这源于浏览器的同源策略（Same-Origin Policy），一个为了防止恶意脚本窃取用户数据而设的核心安全机制。比如，你的前端页面在 http://example.com 上，想请求 http://api.example.com 的数据，浏览器就会跳出来说：“嘿，不行！你们不是一家人！”前端开发痛点：你可能只是想从后端API拉点数据，却被浏览器拦住，抛出个 CORS（跨源资源共享）错误

传统网页是多页应用（MPA），每次点击链接，浏览器都会向服务器请求一个新页面，页面刷新，用户体验多少有点“卡顿”。而单页应用通过JavaScript动态改变页面内容，URL的变化靠前端路由来管理。前端路由的核心是：监听URL变化，动态渲染对应的组件，而不触发页面刷新。Vue Router通过history模式或hash模式Hash模式：URL里带个#，像http://example.com/#/home，通过监听hashchange事件来切换组件。简单粗暴，兼容性好，但URL有点丑。History模式。