前端基础知识合集 - 随笔分类 - 林恒

记录---图文并茂讲解nginx中http升级https（部署SSL证书）知识点总结

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 为何网站要升级为https 原因有以下几点: 1. 避免浏览器的不安全的警告浏览器对于http的网站会在地址栏明确标记【不安全】字样这样直接降低用户对网站的信任度造成用户流失甚至可能被用户误认为是钓鱼网站如下图，是笔者的网站没有升级h 阅读全文

posted @ 2025-10-11 19:16 林恒阅读(44) 评论(0) 推荐(0)

记录---window.close()失效 + Chrome浏览器调试线上代码

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 情况说明主系统单点登录点击触发window.open()打开本系统。是发布生产后的新需求：要求退出登录后直接关闭当前系统页面。本地运行增加了window.close()方法实现功能，点击退出后页面没反应。排查过程官方解析中说明，win 阅读全文

posted @ 2025-09-29 19:58 林恒阅读(63) 评论(0) 推荐(0)

记录---前端微服务框架深度对比：无界（Momentum）与乾坤（Qiankun）实战指南

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 一、引言：为何选择微前端？在传统单体前端架构中，随着业务复杂度增加，代码臃肿、协作困难、部署效率低等问题愈发突出。微前端通过将项目拆分为多个独立自治的微应用，解决了这些问题：技术栈无关：支持 Vue、React、Angular 等框架混合开阅读全文

posted @ 2025-09-11 17:35 林恒阅读(140) 评论(0) 推荐(0)

记录---让网页像现实世界一样“拿起来，放进去”

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 引言 2025年，我们早已习惯用手指滑动屏幕、拖动文件。而这一切流畅体验的背后，HTML5 的拖拽（Drag and Drop）功能功不可没。它让网页不再只是“点一点”，而是可以“拖一拖、放一放”，大大提升了交互的直观性和用户体验。为什么阅读全文

posted @ 2025-09-08 17:49 林恒阅读(128) 评论(0) 推荐(0)

记录---一篇文了解qiankun的代码隔离原理

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 随着前端业务的快速发展，微前端架构已经被广泛采用，其中 qiankun 作为主流解决方案也越来越受到关注。前几天面试时，我就被问到了一个高频问题：qiankun 是如何实现 JS 和 CSS 隔离的？ qiankun 的JS 沙箱 qianku 阅读全文

posted @ 2025-09-01 17:49 林恒阅读(106) 评论(0) 推荐(0)

记录---前端实现倒计时为什么会存在误差呢

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 1. 前端倒计时为何不准？ 1.1 JavaScript的“单线程陷阱” JavaScript是单线程语言，所有任务（包括定时器回调）都在同一个线程中排队执行。当主线程被耗时任务（如复杂计算、网络请求）阻塞时，定时器回调只能“望队兴叹”，导致实阅读全文

posted @ 2025-08-30 17:30 林恒阅读(95) 评论(0) 推荐(0)

记录---浏览器指纹-探究前端如何识别用户设备

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 什么是浏览器指纹？浏览器指纹，是用来唯一标识你浏览器的一组“特征值”。它不是我们理解中的那种真实指纹，而是通过收集浏览器、操作系统、设备分辨率、字体、插件等信息，组合成的一个独特 ID。和传统的 Cookie 不同，浏览器指纹不需要在用户设阅读全文

posted @ 2025-08-07 18:12 林恒阅读(303) 评论(0) 推荐(0)

记录---啊！！！Blob 居然这么强大！

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 啊！！！Blob 居然这么强大！在前端开发的世界里，我们每天都在和各种 API、对象和数据打交道。然而，有一个对象，常常被我们忽视，却又在背后默默支撑着许多关键功能 —— 它就是 Blob。 Blob（Binary Large Object）阅读全文

posted @ 2025-08-02 17:45 林恒阅读(160) 评论(0) 推荐(0)

记录---从零开始编写 useWindowSize Hook

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 在 React 开发中，我们经常需要根据窗口大小来调整组件的行为。今天我们将从最简单的实现开始，逐步优化，最终构建出一个高性能的 useWindowSize Hook。第一步：最简单的实现让我们从最基础的版本开始： import { use 阅读全文

posted @ 2025-07-28 17:07 林恒阅读(84) 评论(0) 推荐(0)

记录---npm link 详解：本地包开发与测试的利器

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 npm link 详解：本地包开发与测试的利器什么是 npm link？ npm link 是 npm 提供的一个强大功能，它允许你在本地开发环境中创建符号链接，将本地开发的包链接到其他项目中进行测试和使用。这个功能特别适合在开发自己的 np 阅读全文

posted @ 2025-07-24 17:32 林恒阅读(283) 评论(0) 推荐(1)

记录---说说PC端扫码登录

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 说说PC端扫码登录在前端开发的面试中，面试官常常会提出一些涉及实际项目经验的问题，以评估候选人解决问题的能力和技术深度。例如，"你在项目中遇到过哪些技术挑战？是如何解决的？" 这类问题旨在了解候选人面对复杂场景时的应对策略和技术选型能力。其中阅读全文

posted @ 2025-07-18 17:43 林恒阅读(171) 评论(0) 推荐(0)

记录---写个vite插件自动处理系统权限，降低99%重复工作

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 前言好久没有更文章咯，最近做一个中台系统的权限控制功能，由于路由权限和角色权限都简单，但是要做按钮权限有点麻烦，因为太多按钮了。其实我以前也做过这个功能，简单暴力做法就是每个按钮用自定义指令去判断是否有权限显示。但是重复代码也太多太多，并且维阅读全文

posted @ 2025-07-15 16:59 林恒阅读(97) 评论(0) 推荐(0)

记录---用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 传统的下载方式如window.open()或<a>标签点击存在诸多痛点：批量下载时浏览器会疯狂弹窗 HTTPS页面下载HTTP资源被拦截今天分享的前端iframe批量下载方案，可以有效解决以上问题。一、传统批量下载方案的局限性传统的批量阅读全文

posted @ 2025-07-14 17:38 林恒阅读(165) 评论(0) 推荐(1)

记录---grid实现瀑布流

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 效果图瀑布流布局原理瀑布流布局（Waterfall Layout）是一种等宽不等高的多列布局方式，视觉上元素像瀑布一样逐列填充。核心原理：等宽多列：将容器划分为多个等宽的列。动态填充：元素按顺序优先插入当前高度最短的列，保证布局紧凑。阅读全文

posted @ 2025-07-03 17:54 林恒阅读(368) 评论(0) 推荐(0)

记录---CSS Grid 布局：现代网页布局的强大工具

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。一、Grid 布局的阅读全文

posted @ 2025-07-01 17:14 林恒阅读(170) 评论(0) 推荐(0)

如何进行页面前端监控

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 前端监控主要分三个方向前端性能（用户体验优化）异常监控业务指标跟下面我来分别介绍三类指标如何获取 1）前端性能指标：一、用户体验相关的：页面加载时间（Page Load Time）：定义：从用户请求页面到页面完全加载的时间。测阅读全文

posted @ 2025-06-03 17:24 林恒阅读(149) 评论(0) 推荐(1)

记录---7 种常见的前端攻击

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 大家都知道，保证网站的安全是十分重要的，一旦网站被攻陷，就有可能造成用户的经济损失，隐私泄露，网站功能被破坏，或者是传播恶意病毒等重大危害。所以下面我们就来讲讲7 种常见的前端攻击。 1. 跨站脚本 (XSS) 跨站脚本攻击 (XSS) 是一种阅读全文

posted @ 2025-04-27 17:15 林恒阅读(248) 评论(0) 推荐(0)

记录---扫码登录分析与实现

摘要：🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 前言随着移动设备的普及，扫码登录成为一种便捷且安全的用户身份验证方式。它不仅免去了用户输入账号密码的繁琐步骤，还能减少密码泄露的风险。在当今的前端开发中，扫码登录已经成为许多应用的标配功能。那么，作为一名前端开发者，该如何实现这一功能呢？本文阅读全文

posted @ 2025-04-25 15:44 林恒阅读(479) 评论(0) 推荐(0)

如何跨标签页通信

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 开篇小剧场：为什么标签页要"聊天"？想象你在网上商城：标签1：浏览商品页标签2：开着购物车当你在标签1点击"加入购物车"，标签2的购物车数字应该立即+1！这就是标签页通信的魔力啦！✨ 🎨 方案1：BroadCast Channel（对讲阅读全文

posted @ 2025-04-24 16:39 林恒阅读(115) 评论(0) 推荐(0)

记录---因网速太慢我把20M+的字体压缩到了几KB

摘要：

🧑‍💻 写在开头点赞 + 收藏学会🤣🤣🤣 故事背景事情起源于之前做的海报编辑器，自己调试时无意中发现字体渲染好慢，第一反应就是网怎么变慢了，断网了？仔细一看才发现，淦！这几个字体资源咋这么大，难怪网速变慢了呢😁😁。图片中的海报包含6种字体，其中最大的字体文件超过20M，而最长的阅读全文

posted @ 2025-04-21 17:25 林恒阅读(310) 评论(0) 推荐(1)

林恒

随笔分类 - 前端基础知识合集

公告