qq_41632427的博客

原创 【前端每日一题】web worker和主线程的交互是怎么进行的

— 两者无法直接共享内存或访问对方的变量 / 对象，必须通过显式的 “发送消息” 和 “接收消息” 完成通信。，将数据的 “所有权” 从发送方转移到接收方（发送方会失去对该数据的访问权），避免复制。数据通过复制传递（非共享），支持大部分类型，但不支持 DOM、函数等；强制终止 Worker（Worker 线程会立即停止，无法再通信）。会被序列化（转为字节流），传递到接收方后再反序列化为新的对象。事件：监听并接收消息（主线程和 Worker 都可注册）。：发送消息（主线程和 Worker 都可调用）。

原创 【前端每日一题】webpack打包做了什么优化

Webpack 默认单进程处理任务，对于耗时操作（如 Babel 编译、ESLint 检查），可通过多进程并行处理提升速度。语法（ES 提案）动态加载非首屏代码，实现 “按需加载”（配合路由使用更常见）。Tree-Shaking（树摇）可删除项目中 “未被引用的代码”（dead code），仅保留使用过的代码。将第三方库（如 jQuery、React）通过 CDN 引入，而非打包进 bundle，减少体积。生产环境：优先减小体积（代码分割、Tree-Shaking、压缩、按需加载）+ 缓存策略。

原创 【前端每日一题】webpack做文件压缩 到底是压缩了什么

对 JPEG/PNG 等格式：通过降低比特率、优化编码算法、去除元数据（如拍摄时间、相机型号）等方式减小体积。：对 TrueType 或 WOFF 字体，可去除无用的字符集（如只保留常用汉字），减小字体文件体积。对代码文件（JS/CSS）：删注释、缩空格、简命名、删死码、合逻辑。对 SVG 格式：删除注释、空格、冗余路径信息（如合并重叠路径）。对资源文件（图片 / 字体）：优化编码、去元数据、降质量（可控）。去除注释、空格、换行符（与 JS 压缩逻辑类似）。对体积极小的图片（如 < 10KB），通过。

原创 【前端每日一题】前端分块是如何分的,根据什么分的,分的是chunk还是依赖

主要根据 “加载时机”（同步 / 异步）、“模块类型”（业务 / 依赖）、“复用程度”（公共 / 私有）以及 “手动配置规则” 进行划分。简单说：前端分块是 “按规则拆分模块，生成 chunk，输出 bundle” 的过程，核心是让代码 “该加载时再加载，能复用的不重复加载”。：随页面初始加载的核心代码（如入口文件、首屏组件），会被打包到 “入口 chunk”（entry chunk）。：分的是 “代码模块”（包括业务模块和依赖模块），chunk 是分块后产生的中间代码块（最终输出为 bundle）。

原创 【前端每日一题】前端bundle的定义

bundle 是构建流程的 “终点”，是经过编译、压缩、合并、转换（如 ES6 转 ES5、TS 转 JS）等处理后的成品文件，直接部署到服务器供浏览器加载。：一个 bundle 通常包含多个原始源代码模块（module），这些模块可能是业务代码、第三方库、样式文件等，经构建工具处理后被整合到一起。（如异步加载的 chunk 最终会输出为一个独立的 bundle 文件），但也可能多个 chunk 合并为一个 bundle。：将浏览器不支持的语法（如 TS、JSX、ES6+）转换为兼容代码，确保正常运行。

原创 【前端每日一题】前端chunk是什么

chunk 是构建工具对源代码（模块，module）进行处理（如合并、压缩、转换）后生成的代码块，是打包过程中的 “中间产物” 或 “最终分割单元”。chunk 是构建过程中更细粒度的代码分割单元，一个 bundle 可能包含多个 chunk，也可能一个 chunk 对应一个 bundle。：将代码拆分成多个 chunk 后，可实现 “按需加载”（如首屏只加载必要代码，其他代码在需要时再请求），减少初始加载时间。由入口文件（entry）触发打包生成的 chunk，包含入口模块及它依赖的同步模块。

原创 【前端每日一题】前端对keepalive的理解

避免组件反复挂载（mounted）和卸载（unmounted），减少 DOM 操作和数据请求，提升页面切换流畅度。再次渲染时，直接从缓存中取出组件实例复用，无需重新执行创建周期（如 created、mounted）。组件被包裹在 keepalive 中时，卸载后不会销毁，而是存入缓存对象（cache）。：缓存组件内的状态（如表单输入值、列表滚动位置），切换回组件时无需重新初始化。：如标签页切换，缓存已打开的标签页组件，保留标签内的操作状态。：组件从缓存中激活时触发（每次切换回组件都会执行）。

原创 【前端每日一题】webpack中loader的机制是什么

由于 Webpack 本身只能理解 JavaScript 和 JSON 文件，对于其他类型的资源（如 CSS、图片、TypeScript、Vue 组件等），需要通过。将其转换为 Webpack 可识别的模块（最终转为 JavaScript 代码），才能进行打包处理。最终通过第一个 loader 返回 Webpack 可识别的 JS 代码，完成非 JS 资源的打包。等语法，将 CSS 转换为 JS 模块（导出一个包含 CSS 内容的对象）。：将 ES6+ 语法的 JS 转换为 ES5 语法，确保兼容性。

转载 【前端每日一题】前端按需引入的实际逻辑是什么

基于 ES6 Module 的 “静态导入” 特性（导入导出在编译时即可确定，不能动态修改），打包工具可分析出哪些模块 / 函数从未被使用，最终在产物中剔除这些 “死代码”。：结合前端路由（如 React Router、Vue Router），在路由切换时动态加载对应页面的代码。对于 “使用时机不确定” 的资源（如点击按钮后才需要的组件、路由切换时的新页面），需要在。的权衡：通过增加代码拆分和动态加载的复杂度，换取更小的初始资源体积和更快的页面响应速度。），自动将 “全量引入” 转换为 “按需引入”。

原创 前端面试题2:div水平垂直居中grid

b站搜全栈程序员歌谣。

转载 历时两个月录制好的从0带你开始学习vue3基础知识

今天带给大家一个新的原创项目 就是。一起学习私信加群 目前260人 欢迎你的加入。从0带你开始学习vue3基础知识。b站搜全栈程序员歌谣。抖音搜全栈程序员歌谣。

转载 Vue2 + element ui基本架子v1.0请求篇

前言大家好 我是歌谣 已经有一段时间没有更新前后端技术了 今天来说说我们的一个基本前段架子-vue2 + element ui效果演示登录页面注册页面首页目录结构请求篇-基本请求创建axiosimport{ getLocalStorage }from'@/utils';importaxiosfrom'axios';constinstance = axios.create({ ...

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之5

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之5

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之4

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之3

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之2

原创 前端那些事20240227pringBoot配置文件-vue工程化-注册功能开发之1

原创 前端那些事20240227pringBoot配置文件-vue工程化-环境准备2

原创 前端那些事20240227pringBoot配置文件-vue工程化-环境准备

转载 前端真的"死"了吗，前端程序员何去何从?

个人身边的经历今年的经济环境确实不好自己创建的前端学习群中也有部分群友有裁员的相关信息经济形势 今年的经济大环境确实面临了一些挑战，裁员成为了不少企业和行业应对经济压力的一种方式。和有一部电影一样 想着可以“裁员”广进全球经济形势：2024年，全球经济复苏放缓且呈现分化态势。国际货币基金组织（IMF）在报告中调低了全球经济增速预期，并强调了各经济体间经济增速的分化。发达经济体...

原创 前端:每天一个工作小技巧 如何实现一个前端的选中效果(Vue3 + Element ui)

前言大家好我是歌谣今天继续给大家带来平时工作生活中会遇到的一些开发需求 今天要说的需求就是实现一个需求在选中的时候按钮的样式会发生变化思路 首先遇到这样的需求我们所需要做的就是要分析先简单画出我们所需要的样式 这是我们设计需求的第一步效果实现点击的时候右侧的颜色选中会改变左侧的页面效果 这就是我们所需要的页面部分<template> &lt...

原创 前端:每天一个工作小技巧 如何去封装一个弹框组件（Vue3+element plus）

前言大家好在我们的日常工作中我们会遇到各种各样的封装组件今天我们就以如何封装一个弹框组件为例展开我们的一个教学技术栈这边我们的技术栈就用我们的vue3+elementplus为例吧毕竟在目前这个市场 Vue还是比较主流的思路首先我们解题需要我们的一个思路 有了思路之后 我们就能够更好的解决问题但是解决问题的方法也是有很多种 这是我们所知道的重点来了如何分析解决问题是我们所要了解...

原创 前端:每天一个前端工作常见技巧前端如何根据数据进行手动分页(Vue3 + elementplus)...

前言大家好我是前端程序员歌谣已经有很长一段时间没有更新技术文章了十分想念大家 想加入前端技术群的小伙伴速度加入案例在我们的日常需求中 我们需要进行手动进行页面的分页 针对市面上的Vue3 +element plus为例子 今天来说说如何实现路由部分children: [ { path: '/index/user', component: () ...

原创 前端那些事20240227pringBoot配置文件-vue工程化-大事件-概述2

原创 前端那些事20240227pringBoot配置文件-vue工程化-大事件-概述1

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue的api风格3

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue的api风格2

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue的api风格1

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue项目开发流程3

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue项目开发流程2

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue项目开发流程1

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue项目的创建和启动2

原创 java那些事20240227pringBoot配置文件-vue工程化-Vue项目的创建和启动

原创 java那些事20240227pringBoot配置文件-vue工程化-准备环境2

原创 java那些事20240227pringBoot配置文件-vue工程化-准备环境1

原创 java那些事20240227pringBoot配置文件-linux配置nohup日志存储

原创 java那些事20240227pringBoot配置文件-Ubuntu 安装java jdk 18

sudo add-apt-repository ppa:openjdk-r/ppasudo apt-get updatesudo apt-get install openjdk-18-jdk

原创 java那些事20240227pringBoot配置文件-springBoot多环境开发-分组2

原创 java那些事20240227pringBoot配置文件-springBoot多环境开发-分组