- 博客(210)
- 收藏
- 关注
RSS订阅原创 前端单元测试
前端单元测试是确保应用程序各个部分按预期工作的重要过程。通过自动化测试，开发者可以在更改代码时快速验证功能是否正常。下面是一些常见的前端单元测试工具和框架，以及一些基本的实践和示例。前端单元测试是开发过程中的重要部分，能够帮助确保代码的稳定性和可维护性。通过使用合适的框架和工具，加上良好的实践，可以有效地提高代码质量和开发效率。通过详细的测试，开发者可以在代码更改后更有信心，减少回归错误。
2024-10-14 15:52:25
834
原创 前端性能检测
前端性能检测是确保网页或Web应用程序在用户设备上快速、流畅运行的重要步骤。这一过程涉及多个方面，包括使用专门的工具进行性能分析、优化代码和资源加载方式等。
2024-08-20 16:39:55
849
原创 gitlab实现CI/CD自动化部署
gitlab支持通过配置CI/CD实现自动化部署我们的代码项目，主要核心就是配置gitlab-ci.yml文件以及在目标服务器上配置gitlab-runner。
2024-08-13 13:43:24
1528
原创 js的浅拷贝与深拷贝
简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了。如果是基本数据类型，名字和值都会储存在栈内存中。
2024-07-16 01:05:13
324
原创 手写new
思考一下，如果构造函数返回了一个新对象或者返回其它基本类型的数据，结果还一样吗？new 操作符是可以创建一个用户定义的对象的实例或具有构造函数的内置对象的实例。从上图中可以看出和没有写return是一样的，返回的都是新创新的Car实例。继续修改上面的例子，使其构造函数返回一个基本类型的数据。知道了new的执行过程，手写一个new,就变得很容易了。
2024-07-15 17:49:42
406
原创 前端html面试常见问题
他们都是基于TCP的传输协议， WebSocket 可以双向发送和接受数据，而 HTTP 是单向的(HTTP通信只能由客户端发起，不具备服务器主动推送的能力)， WebSocket 的使用，需要先进行一次客户端和服务器的握手，两者建立连接后才可以正常双向通信，而HTTP是一个主动的请求对应一个被动的响应。每次1像素移动一个动画，但是如果此动画使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争，每次移动3像素可能看起来平滑度低了，但它不会导致CPU在较慢的机器中抖动。
2024-07-07 19:42:08
906
原创 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
607
原创 z-index的工作原理
z-index适用范围：它必须在被设定了 position 属性元素上时才会生效，这意味着， z-index 只有在 position 设置为除 static 属性上的元素上时，它才能更改层叠顺序，在元素没有设置任何 position 的情况下，z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠"，并且默认情况下，所有元素都属于此根层叠上下文，但是，任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。
2024-07-03 15:07:05
896
原创 使用css，让div消失在视野中的方法
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
2024-07-03 14:56:08
482
原创 css的长度单位详解
px是相对于显示器屏幕分辨率而言的，且一旦设置就无法因为适应页面大小而改变，所以通常可以设置字体、内外边距、border等一些不需要依据页面而改变数值大小的属性。em是依据父盒子的字体大小来调整数值的，因为其是依据父盒子字体来确定实际大小，不同元素的字体有可能不同，所以通常也不用于自适应。rem是依据根节点的字体大小来调整数值的，所以通常会配合媒体查询做自适应，但其自适应通常需要引入js文件。百分比%是依据父盒子宽高的百分比来确定实际大小的，通常会用百分比做一些局部的宽高调整。
2024-07-03 14:45:53
1153
原创 移动端响应式布局开发的四大方案
pc端和移动端是两套代码的，通常pc端不做响应式；用px，移动端做响应式，用rem，可能移动端会用@media做细小的微调。媒体查询通常会结合百分比实现自适应，它经常应用于pc端与移动端是一套项目代码的情况，依据媒体查询写多套不同的样式。vh/vw通常用于移动端的布局，由于其和百分比类似，因此也叫百分比布局。项目中部分布局结构会用flex做自适应。
2024-07-03 14:42:03
184
原创 前端css性能优化
浏览器想要渲染出网页必须要先将CSS等文件下载下来，所有文件越小，那么就能够更快的下载和渲染，特别是在一些网络速度比较慢的场景下效果尤为明显。我们都知道CSS有一些属性是可以继承的，比如color，font-size，font-family等等，但是很多开发人员不注意这种细节，编写很多重复性代码，从而使得CSS文件变得比较大，影响加载速度。法2的写法，性能更高，因为css选择器是从右到左解析的，法2可以直接获取child，而法1需要先获取所有的child，再获取family下的所有child。
2024-07-01 16:53:19
925
原创 css元素水平垂直居中
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
2024-06-03 18:53:48
1476
原创 浏览器渲染机制-从输入url到渲染出页面的整个过程
浏览器是我们日常开发的重要的工具，那么你了解浏览器吗？即使在前端面试中，我们也经常会遇到：在浏览器地址中从输入url地址到出现页面，这个过程发生了什么？介绍一下重绘和回流？这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚，那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制。
2024-05-16 18:33:16
794
原创 css盒模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
2024-05-15 18:23:52
291
原创 css多种布局方式
常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍文章引导1. 标准流布局2. 浮动布局3. 定位布局4. 弹性布局5. 网格布局6. 多列布局7. 响应式布局。
2024-05-14 18:25:49
3338
原创 一个很有意思的css-position定位，sticky
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置（很多官网就是依靠这个来实现部分效果的）。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
2024-05-14 18:14:19
436
原创 git报错warning: refname ‘分支名‘ is ambiguous.
当merge分支如20230926Remote进入到另一个分支的时候，报错warning: refname ‘20230926Remote’ is ambiguous.这个警告通常由于引用名称（如branch名称、commit名称）不明确引起。当Git无法确定应该指向哪个branch或commit时，就会引发这个警告。
2023-09-26 14:38:47
3964
原创 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
3918
原创 移动端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
2582
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人