溪宁
码龄8年
关注
提问 私信
  • 博客：64,526
    64,526
    总访问量
  • 31
    原创
  • 1,387,979
    排名
  • 49
    粉丝
  • 0
    铁粉
IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：广东省
  • 加入CSDN时间： 2017-04-02
博客简介：

qq_38164763的博客

查看详细资料
个人成就
  • 获得114次点赞
  • 内容获得21次评论
  • 获得446次收藏
创作历程
  • 3篇
    2021年
  • 7篇
    2020年
  • 20篇
    2019年
  • 1篇
    2018年
成就勋章
TA的专栏
  • CSS
    2篇
  • 前端日常踩坑
    2篇
  • 编程技巧分享
    1篇
  • 前端学习
    23篇
  • spring boot
  • 排序算法
    1篇
创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴，一年仅有一次！MAC mini、大疆无人机、华为手表等精美奖品等你来拿！

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

useEffect和useLayoutEffect的区别

react hook面世已经有一段时间了，相信很多人都已经在代码中用上了hooks。而对于 useEffect 和 useLayoutEffect，我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方？使用方式这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网。差异useEffect 是异步执行的，而useLayoutEffect是同步执行的。u
原创
发布博客 2021.02.02 ·
18414 阅读 ·
15 点赞 ·
2 评论 ·
48 收藏

react的diff算法

起因React 的 key 相信大家都很了解，也不用我多说。但是平时对于key的使用可能没有那么严格，有可能不给 key ，有可能给 index ，其实一般来说不会出什么问题，顶多就是性能上会有一些损失，但是在某些特定的情况下使用不当也可能会导致 bug ，比如下面这种情况。key导致的bug在一个后台管理系统中，左侧是一个菜单可以选择不同的选项，右侧对应了不同的视频。但是左侧菜单切换的时候，右侧视频的封面图虽然重新加载了，点击播放后视频的内容并不是新的，还是上一个选项卡的视频，看起来就像没有重新渲染
原创
发布博客 2021.01.29 ·
385 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

你看这个东西是不是没居中

前端切图仔还原UI设计师的设计稿是对UI的一种尊重，不能还原那就是你太菜了。每次我们欢天喜地的去找UI走查的时候，UI是这样的你一看代码:.center { display: flex; justify-content: center; align-items: center;}心中一惊：这都能对不齐，那一定是你的机子有问题，建议换一台，UI可能要让你当场横尸街头。今天我们来深究一下这个问题。问题复现首先我们把问题复现出来，我们不用搞什么花里胡哨的内容，直接一个span标签扔上来
原创
发布博客 2021.01.29 ·
268 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

JS扫盲之隐式转换

隐式转换可谓是JS中的一大难点之一，也是我们平时写代码遇见最多的东西。如果搞不清楚，我们就不能完全掌控我们的代码，因为不知道它会有什么结果。今天我们就来好好唠唠这玩意。抽象操作ES5规范的第9节中定义了一些抽象操作(abstract operation)，这些操作仅供内部使用。通俗的解释就是我们不能去调用他们，你可以理解为这只是一个规则，用于隐式转换的规则，这些规则都有他们自己的名字，方便理解...
原创
发布博客 2020.05.02 ·
408 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

你不知道的CSS动画

CSS动画相信大家都非常熟悉，那么我们今天就聊一聊你不熟悉的CSS动画。本文不会讲解CSS动画的基础知识，对于这些内容还不了解的建议先去学习CSS动画的基础知识。贝塞尔曲线https://cubic-bezier.com/我们知道，CSS 动画中有一个属性叫做 animation-timing-function ，它定义CSS动画在每一动画周期中执行的节奏。我们平时最常见的几个值就是ani...
原创
发布博客 2020.04.18 ·
326 阅读 ·
0 点赞 ·
1 评论 ·
0 收藏

【干货】【建议收藏】chrome开发者工具最常见的使用方式

我相信 chrome 是每个前端开发者最常使用的浏览器了，而它为我们提供的 chrome 开发者工具其实是一个巨大的宝藏。今天我们就来解锁一下 chrome 开发者工具的各种常见的使用方式。首先先把 chrome 的官方文档放出来镇楼：chrome开发者工具如果下面介绍的一些选项你无法找到，都可以在 more tools 中找到PS：本文首先会为大家介绍开发工具最基本的使用方式，然后介绍一些...
原创
发布博客 2020.04.12 ·
1071 阅读 ·
0 点赞 ·
0 评论 ·
15 收藏

一文让你彻底搞懂浏览器的渲染流程

占
原创
发布博客 2020.04.11 ·
1322 阅读 ·
4 点赞 ·
1 评论 ·
21 收藏

你真的了解重排和重绘吗？

做过前端开发的小伙伴就算不是非常理解重排与重绘，但是肯定都听过这两个词。那为什么这两个东西这么重要？因为他与我们的页面性能息息相关，今天，我们就来好好研究一下这两个东西。浏览器的渲染流程在讲解重排和重绘之前，我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程，推荐大家去阅读其他的博客，这不是本文关注的重点。JavaScript：一般来...
原创
发布博客 2020.04.09 ·
6409 阅读 ·
58 点赞 ·
6 评论 ·
265 收藏

发布一个npm包——以angular为例

一、前言  做前端的同学和npm打交道的次数可不算少，npm上有许多好用的库可以帮我们节省很多时间，那么今天我们就尝试发布一个angular组件到npm上。二、创建项目  首先，我们来创建一个angular项目，不同于平时我们使用ng new app  来创建项目，我们本次使用ng new angular-npm --createApplication=false  来创建我们的...
原创
发布博客 2020.02.23 ·
397 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

span标签的间距问题

一、前言  平时在实现ui的设计稿的时候会遇见一些小问题，比如莫名其妙的间距，明明没有加margin和padding，但是就是会出现间距，这就是两个span标签的间距问题。我们今天就这个问题进行分析。二、现象描述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
原创
发布博客 2020.02.15 ·
13820 阅读 ·
15 点赞 ·
3 评论 ·
15 收藏

js中遍历对象的几种方法

一、前言我们知道，在js的对象中，有下面几种属性:可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天，我们就来谈一谈如何遍历这些属性。二、遍历可枚举属性  首先，遍历可枚举属性是非常常见的一个需求，我们平时比较常用的方法是for in和Object.keys()，这两个方法都能遍历可枚举属性，我们看看如下的代码:let obj = { name: "...
原创
发布博客 2019.10.27 ·
3049 阅读 ·
2 点赞 ·
0 评论 ·
8 收藏

js中的浅拷贝与深拷贝

一、引言  深拷贝浅拷贝是一个老生常谈的问题了，那么，到底什么是深拷贝，什么是浅拷贝，又如何实现一个深拷贝。今天，我们就来谈一谈这些问题。首先，我推荐你阅读我之前写过的一篇文章js的栈内存和堆内存，其实，它就是深浅拷贝的底层原理，话不多说，我们现在开始。二、深拷贝和浅拷贝  如果你仔细阅读了我之前的那篇文章，相信你已经很了解js中的两种内存了，而深浅拷贝正是与他们的存储方式有关。  对于基...
原创
发布博客 2019.09.16 ·
205 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

利用nginx反代实现跨域

一、前言  我们知道跨域在前端开发中是一个非常常见的问题，我们平时也有很多方法去解决他，比如说降域、cors、jsonp、postMessage等。还有一种很常用的方式是用nginx反代的方式去实现跨域，今天我们就来谈一谈关于使用nginx反代来实现跨域的问题。二、原理  我们都知道，跨域问题的产生是因为不同源的问题，那么，同源是指什么呢？同源，即域名、协议、端口都一样即同源。如果有一个不一...
原创
发布博客 2019.09.09 ·
412 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

js原型链解析

一、前言  学前端的人不能不会js, 学js的人不能不懂原型链。原型链可以说是js中非常关键的一环，今天借此机会好好剖析一下原型链，也加深一下自己的理解。二、js对象的几个属性  在js中, __proto__和prototype是两个比较重要的属性，这两个的区别其实也非常简单。首先，每个对象都会有__proto属性，他会指向自己的构造函数的原型。而并不是每个对象都有prototype属性，...
原创
发布博客 2019.09.02 ·
167 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

基于blob对象动态封装一个web worker

一、前言  在html5出来以后，有许多新特性值得我们关注, 其中一个就是web worker。相信如果关心前端发展的同学就算没有使用过web worker也听过这个东西。今天我们就来讲一讲web worker。二、基本使用  其实，web worker的作用十分简单，就是可以在后台运行一个js文件，所以我们在实际使用中可以将一些非常耗时的计算交给web worker去做。但是值得注意的是，...
原创
发布博客 2019.08.18 ·
1801 阅读 ·
0 点赞 ·
1 评论 ·
3 收藏

web开发中实现页面记忆的几种方式

一、前言  在前段时间公司有个需求是对前一个页面的操作进行记忆，例如分页的样式，选中的条件等。之前是用的session去存储记忆数据，老大让我调研一下目前比较合理的方式然后分析一下，这里以本篇博客作为总结。二、核心思想  既然需要返回上一个页面时能够回到上一次的操作界面, 势必需要对某些数据进行记忆, 所以关键点就是缓存数据.随之而来的问题是:需要缓存哪些数据数据缓存在什么位置缓存的...
原创
发布博客 2019.08.11 ·
2112 阅读 ·
1 点赞 ·
0 评论 ·
10 收藏

经典排序算法之堆排序

一、前言  各种排序算法的掌握对于一个程序猿来说还是有必要掌握的, 所以自己打算对各种排序算法都分析一遍，首先从堆排序开刀。二、基本思想  堆的定义如下:n个元素的序列{k1k_1k1​, k2k_2k2​, …\ldots…, knk_nkn​}, 当且仅当满足下列关系时，称之为堆:{ki≤k2i,ki≤k2i+1, \begin{cases} k_i ...
原创
发布博客 2019.08.04 ·
256 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏

node中的package.json和package-lock.json

一、前言  如果使用npm来管理依赖包的同学可能会经常遇见package和package-json这两个文件，但是可能并不是每个人都知道这两个文件的含义，今天我们来简单介绍一下这两个文件。首先我们先来介绍一下语义化版本控制二、语义化版本  什么是语义化版本？我们使用npm引入的包版本都是0.1.93或者0.1.97，这就是语义化版本，这几个数字可不是随随便便写的，那么他们到底都是什么意思呢？...
原创
发布博客 2019.07.27 ·
264 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

关于js中的变量提升和函数提升的思考

一、前言  如果没有接触过js的人可能对于这两个概念比较陌生, 但是对于使用js的人来说这应该是在熟悉不过的两个概念了, 但是在es6出来以后， 函数提升的行为有了很大的变化。最根本的原因就是因为es6中有了块级作用域的概念, 下面我们开始本文的介绍。二、es6之前的变量提升和函数提升  变量提升:使用var声明的变量会提升到作用域顶部。是不是听起来很简单, 我们来看一个简单的例子:con...
原创
发布博客 2019.07.27 ·
182 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

三列等高布局实现

前言  三列等高布局可能是我们平时开发中用的比较多的布局, 因为有时为了美观必须让三列等高, 但是我们的div又是被内容撑开的, 不能提前设置高度, 这时候就需要我们利用一些骚操作。不过在flex布局出来以后, 这个问题就变得很简单了, 我们后面再介绍。margin+padding实现  首先我们先来看一下最后的效果:  左边两列都会自动和第三列对齐, 下面我们一步步来实现。  首先很...
原创
发布博客 2019.07.14 ·
934 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏
加载更多