Leslie Waong

JVM对于 Java 程序员来说，在虚拟机自动内存管理机制下，不再需要像 C/C++程序开发程序员这样为每一个 new 操作去写对应的 delete/free 操作，不容易出现内存泄漏和内存溢出问题。 正是因为 Java 程序员把内存控制权利交给 Java 虚拟机，一旦出现内存泄漏和溢出方面的问题，如果不了解虚拟机是怎样使用内存的，那么排查错误将会是一个非常艰巨的任务。 运行时数据区域Java 虚拟机在执行 Java 程序的过程中会把它管理的内存划分成若干个不同的数据区域。JDK 1.8 和之前的版本略有不同，下面会介绍到。 JDK 1.8 之前 ： JDK 1.8 之后 ： 线程私有的： 程序计数器 虚拟机栈 本地方法栈 线程共享的： 堆 方法区 直接内存 (非运行时数据区的一部分) Java 虚拟机规范对于运行时数据区域的规定是相当宽松的。以堆为例：堆可以是连续空间，也可以不连续。堆的大小可以固定，也可以在运行时按需扩展 。 虚拟机实现者可以使用任何垃圾回收算法管理堆，甚至完全不进行垃圾收集也是可以的。 程序计数器程序计数器是一块较小的内存空间，可以看作是当前线程所执行的 ...

垃圾回收 「硬核JS」你真的了解垃圾回收机制吗 GC是什么GC 即 Garbage Collection ，程序工作过程中会产生很多垃圾，这些垃圾是程序不用的内存或者是之前用过了，以后不会再用的内存空间，而 GC 就是负责回收垃圾的，因为他工作在引擎内部，所以对于我们前端来说，GC 过程是相对比较无感的，这一套引擎执行而对我们又相对无感的操作也就是常说的垃圾回收机制了 当然也不是所有语言都有 GC，一般的高级语言里面会自带 GC，比如 Java、Python、JavaScript 等，也有无 GC 的语言，比如 C、C++ 等，那这种就需要我们程序员手动管理内存了，相对比较麻烦。 垃圾产生&为何回收我们知道写代码时创建一个基本类型、对象、函数……都是需要占用内存的，但是我们并不关注这些，因为这是引擎为我们分配的，我们不需要显式手动的去分配内存 但是，你有没有想过，当我们不再需要某个东西时会发生什么？JavaScript 引擎又是如何发现并清理它的呢？ 我们举个简单的例子 1234let test = { name: "isboyjc"} ...

Java基础基础概念与常识Java 语言特点 面向对象（封装，继承，多态）； 平台无关性（ Java 虚拟机实现平台无关性）； 支持多线程（ C++11 开始（2011 年的时候）,C++就引入了多线程库，在 windows、linux、macos 都可以使用std::thread和std::async来创建线程。）； 可靠性； 安全性； 支持网络编程并且很方便（ Java 语言诞生本身就是为简化网络编程设计的，因此 Java 语言不仅支持网络编程而且很方便）； 编译与解释并存； 🌈 拓展一下： “Write Once, Run Anywhere（一次编写，随处运行）”这句宣传口号，真心经典，流传了好多年！以至于，直到今天，依然有很多人觉得跨平台是 Java 语言最大的优势。实际上，跨平台已经不是 Java 最大的卖点了，各种 JDK 新特性也不是。目前市面上虚拟化技术已经非常成熟，比如你通过 Docker 就很容易实现跨平台了。在我看来，Java 强大的生态才是！ JVM vs JDK vs JREJVMJava 虚拟机（JVM）是运行 Java 字节码的虚拟机。 ...

TS中那些奇怪的符号! 非空断言操作符在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。 具体而言，x! 将从 x 值域中排除 null 和 undefined 。 那么非空断言操作符到底有什么用呢？下面我们先来看一下非空断言操作符的一些使用场景。 忽略 undefined 和 null 类型123456function myFunc(maybeString: string | undefined | null) { // Type 'string | null | undefined' is not assignable to type 'string'. // Type 'undefined' is not assignable to type 'string'. const onlyString: string = maybeString; // Error const ignoreUndefin ...

Axios的理解与使用axios 是什么? 前端最流行的 ajax 请求库 react/vue 官方都推荐使用 axios 发 ajax 请求 文档: https://github.com/axios/axios axios 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node端都可以使用 支持请求／响应拦截器 支持请求取消 请求/响应数据转换 批量发送多个请求 axios 常用语法 axios(config): 通用/最本质的发任意类型请求的方式 axios(url[, config]): 可以只指定 url 发 get 请求 axios.request(config): 等同于 axios(config) axios.get(url[, config]): 发 get 请求 axios.delete(url[, config]): 发 delete 请求 axios.post(url[, data, config]): 发 post 请求 axios.put(url[, data, config]): 发 put 请求 ...

TypeScript实战之用TS封装AxiosAxios几个常用类型在使用TypeScript封装Axios之前我们先来看看Axios几个重要的类型。 AxiosRequestConfigAxiosRequestConfig是我们使用axios发送请求传递参数的类型。当然它也是我们请求拦截器里面的参数类型。 1axios(config: AxiosRequestConfig) 可以看到，这个config里面的参数还是挺多的。我们常用的有url、method、params、data、headers、baseURL、timeout。 1234567891011121314151617181920212223242526272829303132export interface AxiosRequestConfig { url?: string; method?: Method; baseURL?: string; transformRequest?: AxiosTransformer | AxiosTransformer[]; transformResponse?: A ...

树的相关操作平铺数组<=>树形结构123456789101112131415161718192021222324252627282930const arr = [ { id: "001", name: "节点1", pid: "" }, { id: "0011", pid: "001", name: "节点1-1" }, { id: "00111", pid: "0011", name: "节点1-1-1" }, { id: "002", name: "节点2", pid: "" },];const generateTree = (arr) => { return arr.filter((item) => { i ...

文件下载前端从后端下载或导出文件的方法适用场景： 很多时候，前端存在需要从后端下载文件的情况，典型的就是导出excel表格。 一般存在两种方式： 请求接口之后，后端返回文件路径，前端直接下载。 请求接口之后，后端以文件流的形式返回给前端，前端再下载到本地。 第一种方式很简单，请求完接口之后，打开该文件的地址： window.location.href = res.request.responseURL responseURL这个地址其实和接口地址是一样，直接打开它，就能默认下载到本地的下载路径了。 非常方便，但是存在不足，比如不能修改文件的名称。 而且，有些场景使用这种方式是行不通的，比如，很多管理系统，都是需要登录的，既然要登录，那就一般都会需要验证每个请求是否安全，往往需要在header里带上token，后端才会给你这个请求放行。 所以，这种方式，你请求接口之后，转到这个链接，其实就是再请求了一次，这个时候你是不好在请求里带上token的，自然也就拿不到你要的文件。 所以，这个时候就要用第二种方式，以文件流的方式来下载。 第二种方式第二种方式，就是正常的api请求，后端以文件流 ...

Js中Date对象基础1234567// Sun Oct 18 2020 10:46:54 GMT+0800 (中国标准时间)new Date();new Date(value); // new Date(1602989155183)new Date(dateString);// new Date("2020-10-18 10:15:30")new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);// new Date(2020, 9, 18, 10, 15, 30)console.log(typeof(Date())); // stringconsole.log(typeof(new Date())); // object Date.now() 返回自1970年1月1日00:00:00 (UTC)到当前时间的毫秒数。 dateObj.getFullYear() 根据本地时间返回指定日期的年份。 dateObj.getMonth() 根据本地时间，返 ...

开发者工具截图命令行面板=>screenshot 动画 拾色器 在线调伪类样式 查看元素绑定事件 全局搜索代码 Rendering 实时检测网页变化下面是比较实用的功能： Paint flashing，实时高亮重绘区域（绿色）。 Layout Shift Regions，实时高亮重排（重新布局）区域（蓝色）。 Layer borders，将合成层用边框标出来（橙色、橄榄色、青色）。 存储 NetWork 瀑布图是什么呢？ 瀑布图就是上方图片后面的waterfall纵列 瀑布图是一个级联图, 展示了浏览器如何加载资源并渲染成网页. 图中的每一行都是一次单独的浏览器请求. 这个图越长, 说明加载网页过程中所发的请求越多. 每一行的宽度, 代表浏览器发出请求并下载该资源的过程中所耗费的时间。它的侧重点在于分析网路链路 瀑布图颜色说明： DNS Lookup [深绿色] - 在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段。 Initial Connection [ ...

React+TypeScript 实践如何引入 React123import * as React from 'react'import * as ReactDOM from 'react-dom' 这种引用方式被证明是最可靠的一种方式， 推荐使用。 而另外一种引用方式: 123import React from 'react'import ReactDOM from 'react-dom' 需要添加额外的配置："allowSyntheticDefaultImports": true 函数式组件的声明方式声明的几种方式 第一种：也是比较推荐的一种，使用 React.FunctionComponent，简写形式：React.FC: 1234567891011// Greattype AppProps = { message: string}const App: React.FC<AppProps> = ({ message, children ...

前言为什么需要打包工具？开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。 所以我们需要打包工具帮我们做完这些事。 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 有哪些打包工具？ Grunt Gulp Parcel Webpack Rollup Vite … 目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具 基本使用Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器段运行了。 我们将 Webpack 输出的文件叫做 bundle。 功能介绍Webpack 本身功能是有限的: 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 开始使用1. 资源目录1234 ...