<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[bdh123b的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/bdh123b</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; bdh123b]]></copyright><item><title><![CDATA[浏览器渲染]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/153477703</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/153477703</guid><author>bdh123b</author><pubDate>Fri, 17 Oct 2025 20:20:37 +0800</pubDate><description><![CDATA[T+0秒：开始解析HTML，发现 styles.css 和 components.css，立即并行开始下载。· T+3秒：所有CSS下载完成，浏览器开始构建CSSOM，然后合并渲染树，最终显示页面。· CSS阻塞：只阻塞渲染，不阻塞HTML解析和DOM构建。· T+0.1秒：HTML 解析完成，DOM 构建完成。· T+3秒：components.css 下载完成。· JS阻塞：阻塞HTML解析，因此也阻塞后续的渲染。· T+2秒：styles.css 下载完成。]]></description><category></category></item><item><title><![CDATA[异步任务执行顺序]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/150427477</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/150427477</guid><author>bdh123b</author><pubDate>Fri, 15 Aug 2025 17:16:28 +0800</pubDate><description><![CDATA[这个顺序展示了 JavaScript 事件循环的精细调度机制。[输出5, 输出8]]]></description><category></category></item><item><title><![CDATA[CSS长度单位问题]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149117463</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149117463</guid><author>bdh123b</author><pubDate>Fri, 04 Jul 2025 14:38:12 +0800</pubDate><description><![CDATA[在 CSS 中，100px。]]></description><category></category></item><item><title><![CDATA[微信小程序全局状态管理实现方案]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149082621</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149082621</guid><author>bdh123b</author><pubDate>Thu, 03 Jul 2025 01:40:07 +0800</pubDate><description><![CDATA[实现步骤创建事件总线：if (!if (!})// 导出单例在 app.js 中挂载：// app.jsApp({// 将eventBus挂载到全局})在页面中使用：// 页面中监听事件Page({onLoad() {// 监听用户信息变化},// 页面卸载时移除监听},},// 触发事件const newInfo = {name: '王五'}})特点实现组件间松耦合通信适合跨页面、跨组件的事件通知。]]></description><category></category></item><item><title><![CDATA[uniapp全局状态管理实现方案]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149082592</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149082592</guid><author>bdh123b</author><pubDate>Thu, 03 Jul 2025 01:35:57 +0800</pubDate><description><![CDATA[Vuex 是 Vue 的官方状态管理库，适用于复杂应用的状态管理。Pinia 是新一代的 Vue 状态管理库，更轻量且易于使用。每种方案都有其适用场景，根据项目复杂度选择最合适的方案。]]></description><category></category></item><item><title><![CDATA[uniapp路由拦截实现方法]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149082575</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149082575</guid><author>bdh123b</author><pubDate>Thu, 03 Jul 2025 01:33:38 +0800</pubDate><description><![CDATA[以上方法可以根据项目需求灵活组合使用。]]></description><category></category></item><item><title><![CDATA[微信小程序实现路由拦截的方法]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149082561</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149082561</guid><author>bdh123b</author><pubDate>Thu, 03 Jul 2025 01:31:09 +0800</pubDate><description><![CDATA[创建一个自定义导航组件，内部封装权限检查逻辑。]]></description><category></category></item><item><title><![CDATA[小程序云开发实现鉴权管理]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/149082372</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/149082372</guid><author>bdh123b</author><pubDate>Thu, 03 Jul 2025 01:10:11 +0800</pubDate><description><![CDATA[场景OPENID是否存在说明用户已登录✅ 存在可安全使用用户未登录❌ 不存在无法获取用户身份开发工具调试⚠️ 可能模拟真机环境下严格校验因此，在云开发中，OPENID是判断用户是否登录的可靠依据，如果没有OPENID，就可以认定用户未登录。1. 检查（推荐）用户登录后，通常会把openid// 检查本地是否有 openidconsole.log('用户已登录');} else {console.log('用户未登录');// 跳转到登录页适用场景用户登录后存储openid或。]]></description><category></category></item><item><title><![CDATA[css遇到的一些问题]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145347715</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145347715</guid><author>bdh123b</author><pubDate>Fri, 24 Jan 2025 23:11:31 +0800</pubDate><description><![CDATA[当设置html背景色后，body的背景色就变成了body自己的背景色，此时html的背景色将被浏览器获取成为浏览器的背景色。，在PC端vw单位是包含右侧滚轮的宽度，而在移动端不会包含滚轮的长度，在PC端运用vw单位进行居中对齐，会比实际偏左盒子偏右一点，因为内容区域并不包含滚轮。进行响应式布局式，媒体查询的代码要写在样式后面，否则权重一样的情况下，前者的样式会覆盖响应式的样式。所以，要让body的背景色渲染范围只在设置的body范围之内，我们需要对html进行背景样式的设置。都会失去正常的文档流，]]></description><category></category></item><item><title><![CDATA[Bootstrap4网格系统详解]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145230834</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145230834</guid><author>bdh123b</author><pubDate>Sat, 18 Jan 2025 18:35:59 +0800</pubDate><description><![CDATA[列的工作原理：列是网格系统的基本组成部分，它们通过设置不同的类，可以在不同的屏幕尺寸下占据不同的宽度。**排序的好处：**当你需要在不同设备上调整元素的显示顺序，而又不想改变HTML结构时，列的排序功能就显得非常方便，可以根据不同的设备特性灵活调整布局。**行的重要性：**如果不使用行元素，直接将列元素放在容器中，列元素的布局可能会出现混乱，因为行元素起到了水平排列和清除边距的作用。**嵌套的意义：**嵌套列可以让你创建更复杂的布局，比如在一个主要的列中再划分出多个子区域，满足不同的内容展示需求。]]></description><category></category></item><item><title><![CDATA[CSS3 动画详解]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145212461</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145212461</guid><author>bdh123b</author><pubDate>Fri, 17 Jan 2025 18:16:17 +0800</pubDate><description><![CDATA[关键帧是CSS3动画的核心部分，它定义了动画的起始状态、结束状态以及中间的过渡状态。]]></description><category></category></item><item><title><![CDATA[css3过渡总结]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145212161</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145212161</guid><author>bdh123b</author><pubDate>Fri, 17 Jan 2025 17:57:08 +0800</pubDate><description><![CDATA[CSS3过渡（Transitions）允许CSS属性在一定的时间区间内平滑地过渡，从一个值转变为另一个值。它能够让网页元素的状态变化更加自然、流畅，给用户带来更好的视觉体验。例如，当一个元素从隐藏状态变为显示状态，通过过渡可以使其淡入，而不是生硬地突然出现。]]></description><category></category></item><item><title><![CDATA[CSS3 3D 转换介绍]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145211508</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145211508</guid><author>bdh123b</author><pubDate>Fri, 17 Jan 2025 17:27:01 +0800</pubDate><description><![CDATA[参数：x、y、z分别表示在X轴、Y轴、Z轴方向上的移动距离，单位可以是像素（px）、百分比（%）等。例如，translate3d(100px,50px,20px)将元素在X轴方向移动100px，在Y轴方向移动50px，在Z轴方向移动20px。X轴是水平方向（从左到右为正方向），Y轴是垂直方向（从上到下为正方向），Z轴是垂直于屏幕的方向（从屏幕外指向屏幕内为正方向）。preserve-3d：子元素将在3D空间中进行转换，这使得可以创建复杂的3D结构。]]></description><category></category></item><item><title><![CDATA[CSS3 2D 转换介绍]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145207872</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145207872</guid><author>bdh123b</author><pubDate>Fri, 17 Jan 2025 15:09:01 +0800</pubDate><description><![CDATA[CSS3 中的 2D 转换（2D Transforms）允许你在二维平面上对元素进行操作，如移动、旋转、缩放和倾斜等，这可以让网页的布局和动画效果更加丰富多样。]]></description><category></category></item><item><title><![CDATA[css3网格布局]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145185342</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145185342</guid><author>bdh123b</author><pubDate>Thu, 16 Jan 2025 16:04:59 +0800</pubDate><description><![CDATA[定义列和行grid-template-columns属性用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。还可以使用fr（fractional unit）单位来创建弹性列。grid-template-rows属性用于定义网格的行轨道。和grid-template-columns类似。网格间距（Gap）grid-column-gap和grid-row-gap属性（已废弃，建议使用gap属性）]]></description><category></category></item><item><title><![CDATA[css实现响应式详解]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145170005</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145170005</guid><author>bdh123b</author><pubDate>Wed, 15 Jan 2025 23:10:05 +0800</pubDate><description><![CDATA[常见的值有flex - start（默认值，项目向主轴起点对齐）、flex - end（项目向主轴终点对齐）、center（项目在主轴上居中对齐）、space - between（项目在主轴上均匀分布，两端对齐）和space - around（项目在主轴上均匀分布，每个项目两侧的间隔相等）。可以分别设置行间隙和列间隙，如grid - row - gap和grid - column - gap，也可以使用grid - gap同时设置行和列的间隙（grid - gap: 10px 20px;]]></description><category></category></item><item><title><![CDATA[meta name=“viewport“ content=“width=device-width, initial-scale=1.0“]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145148052</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145148052</guid><author>bdh123b</author><pubDate>Tue, 14 Jan 2025 21:28:23 +0800</pubDate><description><![CDATA[meta name=“viewport” content=“width=device-width, initial-scale=1.0” 这段代码在网页设计中扮演着非常重要的角色，尤其是在响应式设计中。]]></description><category></category></item><item><title><![CDATA[css选择器]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145147109</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145147109</guid><author>bdh123b</author><pubDate>Tue, 14 Jan 2025 20:43:01 +0800</pubDate><description><![CDATA[CSS（层叠样式表）提供了多种选择器，以便开发者能够精确地选择HTML元素并应用样式。]]></description><category></category></item><item><title><![CDATA[弹性盒子模型]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145139818</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145139818</guid><author>bdh123b</author><pubDate>Tue, 14 Jan 2025 15:08:34 +0800</pubDate><description><![CDATA[CSS3 弹性盒子模型（Flexbox）是一种用于在页面上布置元素的强大工具。它提供了一种更有效、灵活和响应式的方式来对容器中的项目进行布局、对齐和分配空间。]]></description><category></category></item><item><title><![CDATA[解决设置了body宽高，但设置背景颜色仍然会铺满问题]]></title><link>https://blog.youkuaiyun.com/bdh123b/article/details/145060071</link><guid>https://blog.youkuaiyun.com/bdh123b/article/details/145060071</guid><author>bdh123b</author><pubDate>Fri, 10 Jan 2025 15:55:32 +0800</pubDate><description><![CDATA[当html不设置背景时，body的背景将作为整个浏览器的背景色，而不是body标签自己的背景色。当设置html背景色后，body的背景色就变成了body自己的背景色，此时html的背景色将被浏览器获取成为浏览器的背景色。所以，要让body的背景色渲染范围只在设置的body范围之内，我们需要对html进行背景样式的设置。近期开发遇到一个问题，明明给body设置了宽高，然后给body设置背景，背景仍然会铺满整个屏幕。]]></description><category></category></item></channel></rss>