全部文章
共 1299 篇文章
性能优化例子：使用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...
你可能不知道的React-Router
前言 一不小心想起来了账号密码， 就写点什么吧。 这一年多也是经历了裁员 \ gap year 找工作 找到工作 还没找到工作，从最开始的玩的不亦乐乎，到后面的找工作怀疑人生，只能说一手烂牌，打的更是稀烂。正好最近面试有被问到React Router的实现，其实好久没看过源码了，所以面试回来又去简单看了下。 前端路由 前端路由一般分为 hash 路由和 history 路由两种模式，hash 模式下监听 ，history 模式监听 ，从...
前端性能优化_白屏-首屏加载
1 路由懒加载 SPA单页面应用项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有资源，造成首页加载很慢，降低用户体验。（前后大概降低30%） 2 组件懒加载 除了路由的懒加载外，组件的懒加载在很多场景下也有重要的作用 例如：当用户打开某个页面，会一次性加载该页面所有的资源，我们期望的是有些组件使用户触发按钮后，再加载该弹窗组件的资源，例如弹窗组件，这时候，就可以考虑用懒...
用VSCode调试React代码
作为前端开发，基本每天都要调试 Vue/React 代码，不知道大家都是怎么调试的，但我猜大概有这么几种： 不调试，直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 .不同的调试方式效率和体验是不一样的，我现在基本都是用 VSCode debugger 来调试，效率又高、体验又爽。 可能很多同学还不知道怎么用 VSCode...
阻止用户离开页面，beforeunload和unload事件说明
定义 onbeforeunload事件在onunload事件之前触发。 调用方式 MDN官方示例： 或者在body标签上绑定onbeforeunload，但更推荐使用 的方式调用。 如果需要添加beforeunload点击确认后的处理代码，可以直接添加unload事件监听。 注意事项 使用方式 HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是，该种方...