<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[博哥的二进制世界]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Boale_H</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Boale_H]]></copyright><item><title><![CDATA[字体文件大小压缩指南]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/154795037</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/154795037</guid><author>Boale_H</author><pubDate>Thu, 13 Nov 2025 17:23:02 +0800</pubDate><description><![CDATA[由于字体子集化文件我们是依据此刻所需要的文字进行转换的，未来随着业务开发，会需要更多的新字符，因此需要每个月末都需要找后端要最新的国际化文案，重新执行一次字体子集化，以此更新字体文件的字符。渲染过程中，文本被拆分为独立的字符单元，每个字符都通过查找字体文件中的字形信息来独立渲染。在前端开发中，TTF和WOFF2等字体文件在浏览器中的渲染机制是按单个字符（字形）进行渲染的，而不是对整个字符串进行整体处理。将子集化后的字体文件以及源字体文件上传到OSS中，项目中引入OSS路径的字体文件。]]></description><category></category></item><item><title><![CDATA[前端流水线连接npm私有仓库]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/154084498</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/154084498</guid><author>Boale_H</author><pubDate>Wed, 29 Oct 2025 20:16:16 +0800</pubDate><description><![CDATA[【代码】前端流水线连接npm私有仓库。]]></description><category></category></item><item><title><![CDATA[如何获取npm的认证令牌token]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/154079620</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/154079620</guid><author>Boale_H</author><pubDate>Wed, 29 Oct 2025 18:09:37 +0800</pubDate><description><![CDATA[通过命令行交互登录获取：npm login --registry http://your-registry。登录成功后，在用户目录的.npmrc文件中找到对应的认证令牌。]]></description><category></category></item><item><title><![CDATA[前端单元测试]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/142920604</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/142920604</guid><author>Boale_H</author><pubDate>Mon, 14 Oct 2024 15:52:25 +0800</pubDate><description><![CDATA[前端单元测试是确保应用程序各个部分按预期工作的重要过程。通过自动化测试，开发者可以在更改代码时快速验证功能是否正常。下面是一些常见的前端单元测试工具和框架，以及一些基本的实践和示例。前端单元测试是开发过程中的重要部分，能够帮助确保代码的稳定性和可维护性。通过使用合适的框架和工具，加上良好的实践，可以有效地提高代码质量和开发效率。通过详细的测试，开发者可以在代码更改后更有信心，减少回归错误。]]></description><category></category></item><item><title><![CDATA[vscode常用插件及设置]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/141854770</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/141854770</guid><author>Boale_H</author><pubDate>Tue, 03 Sep 2024 10:33:06 +0800</pubDate><description><![CDATA[【代码】vscode常用插件及设置。]]></description><category></category></item><item><title><![CDATA[前端性能检测]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/141362373</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/141362373</guid><author>Boale_H</author><pubDate>Tue, 20 Aug 2024 16:39:55 +0800</pubDate><description><![CDATA[前端性能检测是确保网页或Web应用程序在用户设备上快速、流畅运行的重要步骤。这一过程涉及多个方面，包括使用专门的工具进行性能分析、优化代码和资源加载方式等。]]></description><category></category></item><item><title><![CDATA[gitlab实现CI/CD自动化部署]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/141161557</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/141161557</guid><author>Boale_H</author><pubDate>Tue, 13 Aug 2024 13:43:24 +0800</pubDate><description><![CDATA[gitlab支持通过配置CI/CD实现自动化部署我们的代码项目，主要核心就是配置gitlab-ci.yml文件以及在目标服务器上配置gitlab-runner。]]></description><category></category></item><item><title><![CDATA[服务器上安装nvm和node]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/141134497</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/141134497</guid><author>Boale_H</author><pubDate>Mon, 12 Aug 2024 16:09:06 +0800</pubDate><description><![CDATA[【代码】服务器上安装nvm和node。]]></description><category></category></item><item><title><![CDATA[js的浅拷贝与深拷贝]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140452877</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140452877</guid><author>Boale_H</author><pubDate>Tue, 16 Jul 2024 01:05:13 +0800</pubDate><description><![CDATA[简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了。如果是基本数据类型，名字和值都会储存在栈内存中。]]></description><category></category></item><item><title><![CDATA[手写new]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140439820</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140439820</guid><author>Boale_H</author><pubDate>Mon, 15 Jul 2024 17:49:42 +0800</pubDate><description><![CDATA[思考一下，如果构造函数返回了一个新对象或者返回其它基本类型的数据，结果还一样吗？new 操作符是可以创建一个用户定义的对象的实例或具有构造函数的内置对象的实例。从上图中可以看出和没有写return是一样的，返回的都是新创新的Car实例。继续修改上面的例子，使其构造函数返回一个基本类型的数据。知道了new的执行过程，手写一个new,就变得很容易了。]]></description><category></category></item><item><title><![CDATA[前端html面试常见问题]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140249032</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140249032</guid><author>Boale_H</author><pubDate>Sun, 07 Jul 2024 19:42:08 +0800</pubDate><description><![CDATA[他们都是基于TCP的传输协议， WebSocket 可以双向发送和接受数据，而 HTTP 是单向的(HTTP通信只能由客户端发起，不具备服务器主动推送的能力)， WebSocket 的使用，需要先进行一次客户端和服务器的握手，两者建立连接后才可以正常双向通信，而HTTP是一个主动的请求对应一个被动的响应。每次1像素移动一个动画，但是如果此动画使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争，每次移动3像素可能看起来平滑度低了，但它不会导致CPU在较慢的机器中抖动。]]></description><category></category></item><item><title><![CDATA[css继承属性有哪些]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140152965</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140152965</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 15:13:10 +0800</pubDate><description><![CDATA[font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。7、轮廓样式属性:outline-style、outline-width、outline-color、outline。font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与。8、页面样式属性:size、page-break-before、page-break-after。所有主流浏览器都不支持。]]></description><category></category></item><item><title><![CDATA[文档流与脱离文档流]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140152861</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140152861</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 15:09:41 +0800</pubDate><description><![CDATA[上一节讲到了z-index，而众所周知，z-index仅适用与定位的元素，定位极易造成脱离文档流的情况。而什么是文档流呢？]]></description><category></category></item><item><title><![CDATA[z-index的工作原理]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140152756</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140152756</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 15:07:05 +0800</pubDate><description><![CDATA[z-index适用范围：它必须在被设定了 position 属性元素上时才会生效，这意味着， z-index 只有在 position 设置为除 static 属性上的元素上时，它才能更改层叠顺序，在元素没有设置任何 position 的情况下，z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠"，并且默认情况下，所有元素都属于此根层叠上下文，但是，任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。]]></description><category></category></item><item><title><![CDATA[使用css，让div消失在视野中的方法]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140152350</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140152350</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 14:56:08 +0800</pubDate><description><![CDATA[使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；]]></description><category></category></item><item><title><![CDATA[css的长度单位详解]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140151955</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140151955</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 14:45:53 +0800</pubDate><description><![CDATA[px是相对于显示器屏幕分辨率而言的，且一旦设置就无法因为适应页面大小而改变，所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的，因为其是依据父盒子字体来确定实际大小，不同元素的字体有可能不同，所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的，所以通常会配合媒体查询做自适应，但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的，通常会用百分比做一些局部的宽高调整。]]></description><category></category></item><item><title><![CDATA[移动端响应式布局开发的四大方案]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140151706</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140151706</guid><author>Boale_H</author><pubDate>Wed, 03 Jul 2024 14:42:03 +0800</pubDate><description><![CDATA[pc端和移动端是两套代码的，通常pc端不做响应式；用px，移动端做响应式，用rem，可能移动端会用@media做细小的微调。媒体查询通常会结合百分比实现自适应，它经常应用于pc端与移动端是一套项目代码的情况，依据媒体查询写多套不同的样式。vh/vw通常用于移动端的布局，由于其和百分比类似，因此也叫百分比布局。项目中部分布局结构会用flex做自适应。]]></description><category></category></item><item><title><![CDATA[前端css性能优化]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/140103772</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/140103772</guid><author>Boale_H</author><pubDate>Mon, 01 Jul 2024 16:53:19 +0800</pubDate><description><![CDATA[浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。法2的写法，性能更高，因为css选择器是从右到左解析的，法2可以直接获取child，而法1需要先获取所有的child，再获取family下的所有child。]]></description><category></category></item><item><title><![CDATA[css元素水平垂直居中]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/139418193</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/139418193</guid><author>Boale_H</author><pubDate>Mon, 03 Jun 2024 18:53:48 +0800</pubDate><description><![CDATA[/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;]]></description><category></category></item><item><title><![CDATA[前端面试题汇总]]></title><link>https://blog.youkuaiyun.com/Boale_H/article/details/138971545</link><guid>https://blog.youkuaiyun.com/Boale_H/article/details/138971545</guid><author>Boale_H</author><pubDate>Thu, 16 May 2024 18:38:45 +0800</pubDate><description><![CDATA[前端面试题汇总css篇
css篇




]]></description><category></category></item></channel></rss>