- 博客(220)
- 收藏
- 关注
RSS订阅原创 还是记不住 TS 的 interface 和 type 的区别？
不知道是不是上了年纪，上个月刚看过的知识点，转头就忘的一干二净 🤷♂️。这知识它怎么就不进脑子 😡。
2023-07-20 12:58:10
237
原创 Vue2 ➔ Vue3 都做了哪些改变？
不是吧，兄弟，Vue3 都出来多久了，你还对这个感兴趣，说！是不是没好好卷？😏俺也一样 😂，Vue3 出来之后只是简单了解了一下，然后还是转头一直在写 Vue2。当然，这也和大家搬砖 🧱 的处境有关。一般情况下，用 Vue2 起的项目没有什么大的问题，谁又会耗费经历去迁移呢？不过自己在有机会单独写 H5 的时候，还是会有意识的去试试 Vue3 的。感觉 Vue2 如果掌握的不错的话，其实学习 Vue3 也没什么大的成本，但如果突然让你总结一下 Vue2 和 Vue3 的区别，你能答上来多少呢？
2023-07-17 20:25:36
911
原创 浅谈一下 webpack 以及 loader 和 plugin
话说，前端练习时长也快两年了，但是关于 webpack 的东西好像也没怎么研究过 😅🚩一是没有这方面的需求：回想一下，关于 webpack 的配置相关工作，也就只有自己配置过一次 loader「」，还是摸着石头过河；🚩二是大部分的配置工作脚手架都已经做好了，这很可能导致一个问题，就是别人问你 webpack 相关的知识的时候，阿巴阿巴阿巴... 🤕️确实，大多数情况下，前端开发人员可能不需要深入了解 webpack，但了解 webpack 的基本概念和用法对于前端开发仍然是很有益的。话不多说，开搞！
2023-07-10 19:49:06
1416
原创 研究一下「pnpm」这个神奇的包管理工具
从pnpm 官网的定义来 👀：快速的，节省磁盘空间的包管理工具。它用于管理 JavaScript 依赖包，类似于 npm 或 yarn，旨在解决传统包管理工具在安装和升级依赖时的一些常见问题 🤕，例如：占用大量磁盘空间、重复下载依赖项等... 😵「pnpm」的主要特点之一是它使用一种称为「虚拟化节点模块」的技术来管理依赖项。它通过在单个磁盘位置存储依赖项的多个版本来减少磁盘占用空间，并通过「符号链接」将它们正确引用到项目中，这种方法还可以加快安装和更新依赖项的速度！🐂🍺
2023-07-07 20:15:12
1382
原创 知道了，去卷后端 →「Nest.js 入门及实践」：）
Nest 是一个用于构建高效、可扩展的Node.js服务器端应用程序的开发框架。它利用 JavaScript 的渐进增强的能力，使用并完全支持TypeScript（仍然允许开发者使用纯 JavaScript 进行开发），并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）。在底层，Nest 构建在强大的HTTP 服务器框架上，例如Express（默认），并且还可以通过配置从而使用Fastifysrc。
2023-06-21 20:17:22
3401
3
原创 高德地图「海量点标记 + 海量标注」卡顿问题 解决方案
最近刚做了个和地图相关的需求，涉及到「海量点标记 + 海量标注」。当数据量达到三千以上的时候，海量标注会明显拖慢页面的加载/响应速度，非常影响用户体验，因此我对其进行了优化。感觉还挺有挑战性的，在这里总结一下，如果再能给遇到同样问题的你一点帮助的话，那就再好不过啦！😉...
2022-05-07 17:05:57
15531
32
原创 使用 svg-sprite-loader、svgo-loader 优化 svg symbols
最近重新学习了一遍 React 基础，新起了个小 Demo 实践一下，项目中用到的静态资源也比较少，图标当时使用的是svg symbols 的方式引入（字体图标三种格式区别），但是在开发的过程中遇到几个问题：① 下载的 svg 可能有自带的 fill 属性，添加 color 样式不生效。② 封装 Icon 组件时，每用到一个 svg 图标都需要引入一下，显得有点不太聪明。 为解决上述两个问题，上网找了一下解决方案，在这里总结一下，每天成长一点点。
2022-04-08 22:20:06
10963
原创 浅谈 Web 前端性能优化
一、背景和目标前端性能优化的话题大家一直都在讨论，无论是在工作还是面试都经常遇到工作方面： toC 项目确实要着重考虑这个问题，强调性能和用户体验 ➡️「得用户者得天下」 面试方面：关于前端性能优化的面试题很多，比如： Web 性能优化有哪些常见的手段？ 如何解决单页面应用首屏加载慢的问题？ 为什么要把 <script> 放在 <body> 之后？ <script> 的 async 和 defer 有什么区别？ HTTP/1.1 和 HTT
2021-12-31 22:40:22
1575
原创 Webstorm 终端 git log 乱码问题
一直都在用 VSCode，今天用 Webstorm 的时候在终端 git log 查看日志遇到乱码，上网查了一番，总结到这里，希望能帮到同样遇到乱码问题时疑惑的你 ~1、配置 Webstorm Shell path打开 Webstorm 的设置，在 Tools > Terminal 中配置Shell path，选择 bash.exe其中bash.exe 的位置就是你安装 Git 的位置：D: > Git > bin > bash.exe2、修改 bash.ba...
2021-08-17 18:52:29
628
原创 从小学生顺利晋升为一名打工人
1、前言感慨一句，真的是好久没写博客了，上一篇博客还是两个月前的事儿，稍微有点负罪感。没写博客就意味着没学习，这对一名技术岗的程序员来说应该是大忌了。再看看 GitHub 一个多月没有 commit 记录了，心想是时候反思一下自己了，总结一下最近的状态，给自己一个交代，也为接下来的日子做一个规划吧 ~2、毕业 不得不说，研三的下学期是我经历的有史以来最恐怖的一个学期，感觉写毕业论文比考研都难。其实我自认为自己不是一个拖延的人，毕业论文还没等开学我就在家开始慢慢着手写了...
2021-08-15 23:09:38
299
原创 来看看我给女朋友做的“小傻瓜”导航站点
之前写了一篇博客《作为一个前端新人，还要不要学jQuery》建议大家学习jQuery，这不，我在学习jQuery相关理论知识之余用它给女朋友做了一个小导航网站，不仅使得学习的理论得到了实践，还能让女朋友开心开心，多好 ????。
2021-06-04 17:15:27
1432
1
原创 2021 — 每个人都有自己的闪光点
1、回想 2020 年的自己新年贺词中说到，今年是极不平凡的一年，这一年对我这个即将踏入社会和职场的新人来说也是至关重要。因为这突如其来的新冠肺炎，我放了有史以来最长的寒假，借助这个假期我充分准备了秋招，钻研技术、做项目、刷算法，写博客，七八九十月份不知疲倦的笔试面试，如愿的找到了一份自己满意的工作。下半年我又实习了一次，这次不仅技术上成长了很多，更让我懂得如何摆正学习心态，见贤思齐。同样，今年也有值得反思的事情：上半年一直在家准备秋招，暑假和开学的一段时间忙着校招找工作投简历、笔试面试，在
2021-02-08 16:09:01
857
10
原创 JS 如何动态获取本地文件夹中的所有图片
1、require.context最近在帮师哥做一个简单的数据和图片展示的项目，其中有一个需求是要在页面上显示出该项目某一文件夹下的所有图片，图片的数目和文件名不确定，只知道图片存放的目录。一开始想到的思路是在页面上设置输入框，输入图片的数目和文件名，但是这样不够方便，想优化一下，所以在网上看到了这个 require.context() 方法，下面先对其做一个简单的介绍。require.context(directory, useSubdirectories, regExp)//参数：/
2020-11-25 22:55:55
11556
2
原创 秋招复盘 — 不忘初心，砥砺前行
今天下午刚把就业协议书寄出，虽说还有零星的几家公司的面试流程没有走完，但我的秋招也算是告一段落了。感觉这段时间的秋招经历挺难忘的，学习、刷题、面试，每天被安排的满满当当的，仿佛回到了大学备战考研的状态。现在回想一下感觉还不错，自己对结果也比较满意。一直想写篇博客，把秋招的经历记录下来，也算是人生当中的一笔不可多得的财富。正好就今天刚寄出三方协议书的时机，来做个秋招复盘，顺便也希望找工作的小伙伴能从我的经历中获取一些小小的经验。1、秋招概况个人背景：双非本科，硕士 985，科班出身，一段实习经
2020-11-12 20:57:01
752
原创 Event Loop 事件循环简介
1、Event Loop？Event Loop 其实也是在面试中经常会出现的一个题，前端程序员回答不上来是正常的，因为 Event Loop 是 C++ 实现的，实现原理和 JavaScript 没什么关系，我个人在之前的面试中遇到这个题的时候，也是看一些 C++ 程序员对 Event Loop 的分析，如果你想对 Event Loop 有一个深入的了解，那这里推荐你一篇 Event Loop 的官方文档，这有中文版：Event Loop。在了解 Event Loop 之前我们可能需要一点计算机操作
2020-10-30 11:21:44
2592
1
原创 Node.js 基本架构解析
1、Node.js 简介首先强调一下，Node.js 不是一个 web 框架，不能将其与 Java 的 Spring 做类比。同时它也不是一门编程语言，它并不是面向后端的一门 js，它仅仅是以 js 为后缀的。所以也不能将其与 Python 或 PHP 做对比。那它是什么？我们一般可以称 Node.js 是一个平台，它将多种技术组合起来，让 JavaScript 也能调用系统接口、或者是后端开发的应用。Node.js 用到的技术主要有 V8引擎 和 libuv，以及一些 C/C++实现的 c-are
2020-10-24 10:30:55
5694
原创 虚拟 DOM 和 DOM diff 简介 ★
1、虚拟 DOM 是个啥？虚拟 DOM 和 DOM diff 这两个概念在 Vue 和 React 中经常被提到，也是作为面试时的一个区分初级和高级前端的知识点，这两个概念可以说是非常重要了，但是其实只要你仔细研究一下就会发现它实际上并没有什么难度！虚拟 DOM 与真实 DOM 相对应，它其实就是通过 JavaScript 对象来模拟真实的 DOM 树。只不过这个 JavaScript 对象比较特殊，它内部通常含有标签名、标签上的属性、事件监听和子元素，以及一些其他属性。为什么要用虚拟 DOM.
2020-09-20 16:08:33
442
原创 JavaScript 简易的秒表计时器
实现一个简易的秒表计时器，要求点击开始按钮进行计时，点击停止按钮暂停即使，再次点击开始按钮会继续计时。最近面试第二次遇到这个题了，第一次是快手的一面面试题，当时面试官让我用 Vue 写，磕磕绊绊写出来了，面试完也没想仔细看看代码优化一下，结果今天招商银行的笔试又遇到这道题了，所以决定好好整理一下。<input id="counter" type="text" readonly><button onclick="start()">开始</button><
2020-09-06 15:51:19
788
原创 简要了解 DNS 原理及其解析过程
最近在准备秋招，在面试一些比较大的互联网场的时候，感觉面试官更注重一些算法和计算机基础，上次就被问到了一个 DNS 解析过程的一个问题，我只知道它是一个域名解析系统，负责把域名解析成 IP，很显然这个答案并不能让面试官满意，所以自己查阅资料并研究了一下，感觉这篇博文写的比较好，在这里搬过来并做一些修改，推荐给大家：传送门。1、DNS 是个啥?DNS(DomainNameSystem) 域名系统，是万维网中应用层的一个协议，它的作为是将域名和IP地址相互映射在一个分布式数据库，能够使人更方便地访问..
2020-08-26 12:31:30
671
原创 async vs defer 的区别
两者都会并行下载，不会影响页面的解析。defer 会按照顺序在 DOMContentLoaded 前按照页面出现顺序依次执行。async 则是下载完立即执行。
2020-08-23 09:25:39
584
原创 TCP 协议如何保证传输的可靠性
TCP 是一种面向连接的可靠传输协议，那它是怎么保证数据传输的完整性和可靠性的呢？主要原因是 TCP 的以下几种机制：确认应答机制、超时重传机制、流量控制、拥塞窗口。1、确认应答机制在 TCP 传输的过程中，TCP 将每个字节的数据都进行了编号，即为序列号，如 1，2，3 字节....比如：当客户端给服务端发送了 1~1000 字节的数据时，服务端如果收到了，就会给客户端应答（ACK报文段，每一个ACK都带有对应的确认序列号），表示客户端发给过来的的 1~1000字节 的数据我已经全部收到了
2020-08-22 11:14:23
1395
原创 SSL 连接过程详解
1、SSL 简介SSL（Secure Sockets Layer 安全套接字协议），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层与应用层之间对网络连接进行加密。在标准的 HTTP 协议下，客户端与服务端直接通过 TCP 链接，以明文的形式交换数据，这样做其实在传输一些普通网页数据时并没什么问题，但是如果用户在浏览网页中，需要向服务端发送用户名、密码、银行卡号之类的敏感信息的话，我们...
2020-08-14 22:31:56
7210
原创 JavaScript 添加事件绑定的三种方法
1、使用html进行事件绑定1.1、直接在 html 标签上写入事件类型和事件处理方法。<button onclick = "alert('hello world')">click me!</button>1.2、在 html 标签上写入事件类型，在 js 上写事件处理方法。html部分<button onclick = "sayHello()">click me!</button>js部分function sayHello(
2020-08-13 09:08:03
1285
原创 JavaScript 中准确的判断数据类型
在 ECMAScript 规范中，共定义了 7 种数据类型，分为基本类型和 引用类型两大类。其中：基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈(stack)中，即按值访问。引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此，其值存储在堆(heap)中，而存储在变量处的值...
2020-08-12 14:57:53
336
原创 TypeScript 中「泛型」的基本使用
1、泛型的定义泛型：软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。通俗理解：泛型就是解决 类、接口、方法 的复用性、以及对不特定数据类型的校验。2、泛型函数function getData1(value:stri
2020-08-11 12:26:06
380
原创 TypeScript 中「接口」的基本使用
TypeScript 接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java，同时还增加了更灵活的接口类型，包括屌性、函数、可索引和类。...
2020-08-10 21:50:38
350
原创 TypeScript 中「类」的基本使用
1、es 5 中的类的定义function Person(){ //es5中简单的类 this.name = '张三'; //属性 this.age = 20; this.run = function(){ //实例方法：通过 new 的实例来调用 alert(`${this.name}快点跑啊!`); }}Person.prototype.work = function(){ //原型方法：实例会共享这个方法
2020-08-10 21:27:09
291
原创 TypeScript 中「函数」的基本使用
在 TypeScript 中，除了给某个变量添加类型注释之外，函数需要书写参数类型和 返回值类型，这样 TypeScript 就可以对函数的参数和返回值类型进行约束，从而达到类型严谨的目的。如果涉及到可选参数、默认参数、函数的重载，则需要进行特殊的书写，具体可以看下面操作。1、函数返回值类型//函数声明function fun():string{ //约束返回值的类型为是 string，如果没有返回值写：void return 'erha';}//匿名函数let...
2020-08-10 20:44:40
362
原创 JS 构造函数在 new 时做了啥？
let Person = function(){ //this指向谁，在定义时是不知道的};var p=new F;用new调用一个函数发生了这些事：（1）新建一个对象instance=new Object();（2）设置原型链instance.__proto__=F.prototype;（3）让F中的this指向instance，执行F的函数体。（4）判断F的返回值类型：如果是值类型，就丢弃它，还是返回instance。如果是引用类型，就返回这个引用...
2020-08-10 19:19:46
492
原创 箭头函数与普通 function 的区别
1、书写上的区别箭头函数的语法比普通函数更加简洁，而且在一定情况下还可以简写，比如：function fun(x, y) { return x + y;}let fun = (x, y) => { return x + y };//1. 如果 () 内只有一个参数，可以省略 ()//2. 如果 {} 内只有一句 return ...，可以省略 return 和 {}2、参数上的区别普通函数的参数是 arguments，而箭头函数是 arg，比如：let ar
2020-08-10 12:44:39
656
原创 for...of vs for...in
forEach 循环无法中途跳出，break 命令或 return 命令都不能奏效。 for...of 适用遍历数/数组对象/字符串/map/set 等，但是不能遍历对象。它可以正确响应 break、continue 和 return 语句。 for...in 适用于遍历对象，但是缺点是它在取索引值事不方便。可用 Object.keys() 方法来迭代一个对象的属性。简单地说，for/of是遍历数组最可靠的方式，它比for循环简洁，并且没有for/in和forEach()那么多奇怪的特例。for.
2020-08-09 11:35:51
196
原创 Web 安全 — CSRF 的原理和攻防
1、CSRF 是个啥?CSRF 是跨站请求伪造（Cross Site Request Forgery），它和 XSS 的攻击性相当，危害性也很大。举个例子，小明今天打开电脑登录 qq，然后去别的网站找苍老师的学习视频，正在津津有味的学习的过程中，这时候走入了CSRF 的攻击流程！这个网站的内容是大黑客精心布局的，画面非常刺激。典型的 CSRF 攻击就是点击 B 网站，影响 A 网站。比如， 点击黄网， qq 被盗。其原理通俗点讲就是：攻击者盗用了你的身份，并以你的名义发送恶意请求或消息，盗取你的
2020-08-08 09:15:11
1031
原创 Web 安全 — XSS 的原理和攻防
1、XSS 是个啥?XSS 是跨站脚本攻击 (Cross Site Scripting)，为不和层叠样式表 (Cascading Style Sheets, CSS) 的缩写混淆，故将跨站脚本攻击缩写为 XSS。恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。通俗点说，XSS 就是在一个站点，当我们用户去访问，在渲染 HTML 的过程中，出现了一些没有预期的脚本指令，脚本指令执行时就产生了
2020-07-30 13:32:49
417
转载 关于 webpack 的几个知识点
最近几天备战秋招复习 webpack 的时候，发现一篇总结的比较好的博文，摘取几个相关的问题转载过来，同时根据自己的观点进行了部分调整，希望能够帮助有需要的人。原文链接：关于webpack的面试题总结随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，比如 sass 和 less 的代码浏览器是不支持的，但如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不..
2020-07-27 19:49:11
185
原创 UDP 协议 vs TCP协议
1、UDP 协议UDP 是一种无连接的，不可靠的传输层协议。它只提供了传输层需要实现的最低限度的功能，除了复用/分解功能和少量的差 错检测外，它几乎没有对 IP 增加其他的东西。UDP 协议适用于对实时性要求高的应用场景。特点： 使用 UDP 时，在发送报文段之前，通信双方没有握手的过程，因此 UDP 被称为是无连接的传输层协议。因为没有握手 过程，相对于 TCP 来说，没有建立连接的时延。因为没有连接，所以不需要在端系统中保存连接的状态。 UDP 提供尽力而为的交付服务，也就是..
2020-07-21 19:32:45
431
原创 HTTP1.0 vs HTTP1.1 vs HTTP2.0
HTTP1.0最早在网页中使用是在1996年，那个时候只是使用一些较为简单的网页上和网络请求上，而HTTP1.1则在1999年才开始广泛应用于现在的各大浏览器网络请求中，同时HTTP1.1也是当前使用最为广泛的HTTP协议。 主要区别主要体现在：缓存处理，在 HTTP1.0 中主要使用header里的 If-Modified-Since，Expires 来做为缓存判断的标准，HTTP1.1 则引入了更多的缓存控制策略例如 Entity tag，If-Unmodified-Since, If-Match,
2020-07-21 11:19:05
265
原创 HTTP 的基本优化策略
影响一个 HTTP 网络请求的因素主要有两个：带宽和延迟。带宽：如果说我们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，但是现在网络基础建设已经使得带宽得到极大的提升，我们不再会担心由带宽而影响网速，那么就只剩下延迟了。延迟： 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。 DNS 查询（DNS Looku
2020-07-21 11:08:52
412
转载 了解一下几种 HTTP 浏览器缓存
1、浏览器缓存是个啥？浏览器缓存，又称 HTTP 缓存，指的是：当我们浏览网站的时候，器存储会在本地存储一个副本，以便下次访问同个网址的时候可以不再连接服务器，直接使用本地的缓存。服务器端程序可以通过 HTTP Cache Headers 来控制缓存行为，减轻服务器的负担，缩短了响应时间，显著得提高网站的性能。2、HTTP Cache Headers当服务器发出响应的时候，可以通过以下两种方式来告诉客户端（浏览器）如何处理缓存：2.1、Expires，比如：Expires: Thu..
2020-07-20 11:42:12
689
原创 用 mouse 事件写一个可拖拽的 div
今天刷题的过程中看到一个有意思的题目，用 mouse 事件写一个可拖拽的 div，个人以为可以凭脑子想象一下就能写出来，但是很显然脑子说：啥？你说啥？写的过程中涉及 div 的绝对定位样式，鼠标的位置，还有一些差值计算，于是乎我就画了个图，图画出来以后，简直不要台清晰哦，两秒钟搞定！不多说了，下面上才艺：精髓在于，在鼠标点击时判断鼠标在 div 内的 offsetX 和 offsetY 并保存起来，然后在鼠标移动的过程中计算 pageX 和 pageY 与offsetX 和 offsetY 分别做.
2020-07-19 18:35:28
315
原创 Vue 3.0 + Vite 快速尝鲜！
目录1、Vite简单介绍2、Vite 的项目搭建3、结合 Vue 3.0 使用1、Vite简单介绍Vite是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具，它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。作者曾在微博上发言：Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度...
2020-07-19 13:11:07
9281
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人