自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(210)
  • 收藏
  • 关注

原创 前端单元测试

前端单元测试是确保应用程序各个部分按预期工作的重要过程。通过自动化测试,开发者可以在更改代码时快速验证功能是否正常。下面是一些常见的前端单元测试工具和框架,以及一些基本的实践和示例。前端单元测试是开发过程中的重要部分,能够帮助确保代码的稳定性和可维护性。通过使用合适的框架和工具,加上良好的实践,可以有效地提高代码质量和开发效率。通过详细的测试,开发者可以在代码更改后更有信心,减少回归错误。

2024-10-14 15:52:25 900

原创 vscode常用插件及设置

【代码】vscode常用插件及设置。

2024-09-03 10:33:06 705

原创 前端性能检测

前端性能检测是确保网页或Web应用程序在用户设备上快速、流畅运行的重要步骤。这一过程涉及多个方面,包括使用专门的工具进行性能分析、优化代码和资源加载方式等。

2024-08-20 16:39:55 892

原创 gitlab实现CI/CD自动化部署

gitlab支持通过配置CI/CD实现自动化部署我们的代码项目,主要核心就是配置gitlab-ci.yml文件以及在目标服务器上配置gitlab-runner。

2024-08-13 13:43:24 2034

原创 服务器上安装nvm和node

【代码】服务器上安装nvm和node。

2024-08-12 16:09:06 265

原创 js的浅拷贝与深拷贝

简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。而当我们a[0]=1时进行数组修改时,由于a与b指向的是同一个地址,所以自然b也受了影响,这就是所谓的浅拷贝了。如果是引用数据类型,名字存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值。那,要是在堆内存中也开辟一个新的内存专门为b存放值,就像基本类型那样,岂不就达到深拷贝的效果了。如果是基本数据类型,名字和值都会储存在栈内存中。

2024-07-16 01:05:13 326

原创 手写new

思考一下,如果构造函数返回了一个新对象或者返回其它基本类型的数据,结果还一样吗?new 操作符是可以创建一个用户定义的对象的实例或具有构造函数的内置对象的实例。从上图中可以看出和没有写return是一样的,返回的都是新创新的Car实例。继续修改上面的例子,使其构造函数返回一个基本类型的数据。知道了new的执行过程,手写一个new,就变得很容易了。

2024-07-15 17:49:42 408

原创 前端html面试常见问题

他们都是基于TCP的传输协议, WebSocket 可以双向发送和接受数据,而 HTTP 是单向的(HTTP通信只能由客户端发起,不具备服务器主动推送的能力), WebSocket 的使用,需要先进行一次客户端和服务器的握手,两者建立连接后才可以正常双向通信,而HTTP是一个主动的请求对应一个被动的响应。每次1像素移动一个动画,但是如果此动画使用了100%的CPU,动画就会看上去是跳动的,因为浏览器正在与更新回流做斗争,每次移动3像素可能看起来平滑度低了,但它不会导致CPU在较慢的机器中抖动。

2024-07-07 19:42:08 953

原创 css继承属性有哪些

font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。7、轮廓样式属性:outline-style、outline-width、outline-color、outline。font-size-adjust:为某个元素规定一个 aspect 值,字体的小写字母 “x” 的高度与。8、页面样式属性:size、page-break-before、page-break-after。所有主流浏览器都不支持。

2024-07-03 15:13:10 613

原创 文档流与脱离文档流

上一节讲到了z-index,而众所周知,z-index仅适用与定位的元素,定位极易造成脱离文档流的情况。而什么是文档流呢?

2024-07-03 15:09:41 444

原创 z-index的工作原理

z-index适用范围:它必须在被设定了 position 属性元素上时才会生效,这意味着, z-index 只有在 position 设置为除 static 属性上的元素上时,它才能更改层叠顺序,在元素没有设置任何 position 的情况下,z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠",并且默认情况下,所有元素都属于此根层叠上下文,但是,任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。

2024-07-03 15:07:05 918

原创 使用css,让div消失在视野中的方法

使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。visibility:hidden是视觉上消失了,在文档流中占位,浏览器会解析该元素;

2024-07-03 14:56:08 502

原创 css的长度单位详解

px是相对于显示器屏幕分辨率而言的,且一旦设置就无法因为适应页面大小而改变,所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的,因为其是依据父盒子字体来确定实际大小,不同元素的字体有可能不同,所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的,所以通常会配合媒体查询做自适应,但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的,通常会用百分比做一些局部的宽高调整。

2024-07-03 14:45:53 1182

原创 移动端响应式布局开发的四大方案

pc端和移动端是两套代码的,通常pc端不做响应式;用px,移动端做响应式,用rem,可能移动端会用@media做细小的微调。媒体查询通常会结合百分比实现自适应,它经常应用于pc端与移动端是一套项目代码的情况,依据媒体查询写多套不同的样式。vh/vw通常用于移动端的布局,由于其和百分比类似,因此也叫百分比布局。项目中部分布局结构会用flex做自适应。

2024-07-03 14:42:03 187

原创 前端css性能优化

浏览器想要渲染出网页必须要先将CSS等文件下载下来,所有文件越小,那么就能够更快的下载和渲染,特别是在一些网络速度比较慢的场景下效果尤为明显。我们都知道CSS有一些属性是可以继承的,比如color,font-size,font-family等等,但是很多开发人员不注意这种细节,编写很多重复性代码,从而使得CSS文件变得比较大,影响加载速度。法2的写法,性能更高,因为css选择器是从右到左解析的,法2可以直接获取child,而法1需要先获取所有的child,再获取family下的所有child。

2024-07-01 16:53:19 957

原创 css元素水平垂直居中

/图片与文字垂直居中,但会有少量偏差,再通过。在应用一的基础上,给子项(元素) 添加 vertical-align: middle;//子元素相对父元素水平(主轴)居中。//子元素相对父元素垂直(交叉轴)居中。这种写法,在没有指定子元素宽高的情况下,也能让其在父容器中垂直居中。//给父元素加,弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

2024-06-03 18:53:48 1554

原创 前端面试题汇总

前端面试题汇总css篇css篇

2024-05-16 18:38:45 415

原创 浏览器渲染机制-从输入url到渲染出页面的整个过程

浏览器是我们日常开发的重要的工具,那么你了解浏览器吗?即使在前端面试中,我们也经常会遇到:在浏览器地址中从输入url地址到出现页面,这个过程发生了什么?介绍一下重绘和回流?这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚,那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制。

2024-05-16 18:33:16 834

原创 css盒模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。

2024-05-15 18:23:52 292

原创 css多种布局方式

常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等,我会从文档流,容器,效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。

2024-05-14 18:25:49 3545

原创 一个很有意思的css-position定位,sticky

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置(很多官网就是依靠这个来实现部分效果的)。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

2024-05-14 18:14:19 450

原创 css层级图解

css层级图解

2024-05-14 17:24:47 432

原创 git报错warning: refname ‘分支名‘ is ambiguous.

当merge分支如20230926Remote进入到另一个分支的时候,报错warning: refname ‘20230926Remote’ is ambiguous.这个警告通常由于引用名称(如branch名称、commit名称)不明确引起。当Git无法确定应该指向哪个branch或commit时,就会引发这个警告。

2023-09-26 14:38:47 4158

原创 git报错 Unable to create ‘D:/project/xxx/.git/index.lock‘: File exists.

Git 执行操作时会自动生成 index.lock 文件,操作结束后会自动删除。这样做的目的是避免同时操作同一个文件夹。而出现上述报错的原因,就是由于某些缘故(比如操作过快,上一步进程没结束,下一步操作就开始)导致index.lock 文件没有自动删除。实际上解决这个问题很简单,删掉.git目录下的index.lock文件即可。然后即可正常执行git命令,如提交、切换分支等。

2023-06-13 18:22:03 3955

原创 java学习笔记

java学习笔记

2023-05-19 17:14:38 3366

原创 IntelliJ IDEA汉化

IntelliJ IDEA汉化

2023-05-17 17:59:14 2308 1

原创 js的input标签上传图片并转为base64预览

js的input标签上传图片并转为base64预览

2023-05-15 17:18:35 1146

原创 前端base64转file文件方法

前端base64转file文件方法

2023-05-15 15:53:43 4842

原创 js监听页面大小变化

js监听页面大小变化

2023-05-10 10:38:34 6079

原创 前端get请求参数包含数组的情况

前端get请求参数包含数组的情况

2023-05-09 17:12:25 2470

原创 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片

2023-05-08 18:30:04 2680

原创 js判断图片是否加载完成

js判断图片是否加载完成

2023-05-08 18:01:17 4236

原创 vue/react项目刷新页面出现404的原因以及解决办法

vue/react项目刷新页面出现404的原因以及解决办法

2023-04-28 16:07:44 7593 3

原创 移动端H5不能自由选中文本进行复制的问题

在写微信公众号H5的时候,发现在移动端上,H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了属性造成的。既然知道是这个原因造成的,那么我们通过修改属性即可解决问题user-select有none、auto、text、contain、all、inherit、initial、unset8个属性//不可选中 user-select : auto;//自动 user-select : text;//文本可选中 user-select : contain;

2023-03-15 16:58:11 2647 2

原创 CSS3新特性

CSS3新特性

2023-03-07 18:02:23 1086

原创 HTML5的新特性

HTML5的新特性

2023-03-06 16:34:09 823

原创 windows配置java环境

windows配置java环境

2023-01-10 16:30:56 7591

原创 HTML标签详解

HTML标签详解

2023-01-04 17:01:38 588

原创 前端实现生成pdf文件并下载

前端实现生成pdf文件并下载

2022-11-25 17:45:18 1319

原创 vue如何通过VNode渲染节点

vue如何通过VNode渲染节点

2022-11-24 18:22:58 2505

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除