CSS | 是时候学习 Grid 布局了
在前端开发中，创建灵活且响应式的布局是非常重要的。为了实现这一目标，Grid 网格布局成为了一种强大的工具。它提供了一种直观且灵活的方式来构建网页布局，本文将从Grid的基本概念入手，介绍Grid网格布局中的常用属性和功能。那么下面我们一起来探索这个强大且灵活的布局方式吧！ Flex布局是一维的排版方式，也就是说一次只能控制一个方向（水平方向或者垂直方向），如果需要控制另一个方向需要再添加一层flexbox容器。 Grid布局是二维的排...
requestIdleCallback解决页面卡顿
一、基本概念 1. js是单线程执行的，分为GUI渲染线程，js引擎线程，事件触发线程，定时器触发器线程，http请求线程。 2. 执行js会阻塞gui渲染，如js执行所需时间超过一帧的时间，就会导致页面掉帧，也就是肉眼看到的卡顿。 二、场景模拟 1\. 准备工作 通过一个小方块平移运动模拟浏览器渲染图形 使用while模拟js阻塞 2\. 测试正常运行js耗费时间 可以看到总耗时2s，页面在js运行期间卡住了，小方块完全没有响应，直到...
三年前端还不会配置Nginx？刷完这篇就够了
一口气看完，比自学强十倍！ 什么是Nginx Nginx是一个开源的高性能HTTP和反向代理服务器。它可以用于处理静态资源、负载均衡、反向代理和缓存等任务。Nginx被广泛用于构建高可用性、高性能的Web应用程序和网站。它具有低内存消耗、高并发能力和良好的稳定性，因此在互联网领域非常受欢迎。 为什么使用Nginx 1. 高性能：Nginx采用事件驱动的异步架构，能够处理大量并发连接而不会消耗过多的系统资源。它的处理能力比传统的Web服务...
功能问题：如何限制同一账号只能在一处登录
大家好，我是大澈！ 本文约 字，整篇阅读大约需要 分钟。 感谢关注微信公众号：“程序员大澈”，免费领取" "一份，然后免费加入 ，从此让解决问题的你不再孤单！ 1\. 需求分析 前阵子，和问答群里一个前端朋友，随便唠了唠。期间他问了我一个问题，让我印象深刻。 他问的是，限制同一账号只能在一处设备上登录，是如何实现的？并且，他还把这个功能称为“单点登录”。 我说这不叫“ ”，这是“ ”。 于是，当时对此概念区分不清的他，和我在语言上开始了...
性能优化例子：使用Performance工具分析性能瓶颈，解决页面卡顿
对于前端的性能优化，优化手段其实是非常多的，但是不能盲目的进行优化，一定要先分析出项目的性能瓶颈，否则只会做无用功。那么如何才能更好的分析出项目的瓶颈呢？其实最关键的就是要分析页面的整个加载过程，找出有问题的地方再进行优化。使用谷歌浏览器自带的 Performance 工具可以帮我们解决这个问题，下面通过一个例子来进行分析优化！ 在优化之前，我们先要了解一些知识，比如浏览器的渲染帧、Performance 工具的使用，这样才有助于更好地...
css - 如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题
引言 页面滚动条造成宽度减小的场景很常见了，由于 块级元素的流动性，其宽度默认为100%的 宽度，但是当容器的高度超过视口宽度时候，页面就会出现滚动条，这个滚动条的宽度就会挤压 的可用宽度，也就是会挤压我们的容器的宽度，造成页面晃动的现象，很不友好，下面就来探讨下如何解决这个滚动条的问题。 滚动条的宽度是多少？ 既然要解决滚动条造成的问题那么首先需要了解滚动条，即 的信息主要就是他的宽度，我们把页面的 置为 ，那么滚动条就会默认占据了空...
前端实现埋点&监控
实现埋点功能的意义主要体现在以下几个方面： 0. 数据采集：埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，它针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。通过埋点，可以收集到用户在应用中的所有行为数据，例如页面浏览、按钮点击、表单提交等。 1. 数据分析：采集的数据可以帮助业务人员分析网站或者App的使用情况、用户行为习惯等，是后续建立用户画像、用户行为路径等数据产品的基础。通过数据分析，企业可以更好地了解...
macOS查看并修改终端显示名称以及主机名和计算机名
之前通过“系统设置 通用 关于本机”修改了“名称”，本以为会全盘修改所有名称，但是在终端却显示成“192”，这难免看起来会有些奇怪。 可以通过ps(Prompt Sign)命令查看终端用的是Bash Shell还是Zsh SHell，具体看终端头部显示的是“bash”还是“zsh”，然后修改“/etc/zshrc”或“/etc/bashrc”文件，但是这个语法看得一头雾水，什么“n表示用户名，m表示主机名”，还有“h代表主机名，u代表用...
Vue3+Ts+Vite+Pinia项目从0-1搭建
XXX甄选 今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。 面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。 一、环境准备 node环境 16.16.0 pnpm 8.9.2...