https://dnhyxc.github.io/2021/11/13/MediaSource/

Media Source ExtensionsMedia Source Extensions 概述1、2016 年 11 月 17 日，W3C 的 HTML 媒体扩展工作组（HTML Media Extensions Working Group）发布了媒体源扩展（Media Source Extensions）的正式推荐标准。 2、该规范允许通过 JavaScript 为 <audio&gt

https://dnhyxc.github.io/2021/03/06/webpack/

webpack 配置 px2rem下载相关依赖

https://dnhyxc.github.io/2021/02/20/react/

React 的定义方式1，定义方式一： 使用函数定义的方式：

https://dnhyxc.github.io/2021/10/24/Linux/

Linux 简介Linux 系统内核与 Linux 发行套件的区别1、Linux 系统内核指的是由 Linus Torvalds 负责维护，提供硬件抽象层、硬盘及文件系统控制及多任务功能的系统核心程序。 2、Linux 发行套件系统是我们常说的 Linux 操作系统，也即是由 Linux 内核与各种常用软件的集合产品。 3、总结：真正的 Linux 指的是系统内核，而我们常说的 Linux 指的是

https://dnhyxc.github.io/2021/02/16/test/

安装 dva1，安装所需依赖： npm i dva-cli -g

https://dnhyxc.github.io/informal/computer/

计算机组成原理

https://dnhyxc.github.io/2020/03/06/canvas/

canvas 简介canvas 是什么

https://dnhyxc.github.io/2021/11/08/fileOperation/

FileReaderFileReader 概述1、FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 注意： FileReader 仅用于以安全的方式从用户（远程）系统读取文件内容，它不能用于从文件系统中按路径名简单地读取文件。要在 JavaScript 中按路径名读取文件，应使用

https://dnhyxc.github.io/2021/08/23/mobile/

前言1、对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准（以前是 iphone4 的 320×480，现在更多的是 iphone6 的 375×667）。 对于 retina 屏幕（如: dpr=2），为了达到高清效果，视觉稿的画布大小会是基准的 2 倍，也就是说像素点个数是原来的 4 倍（对 iphone6 而言：原先的 37

https://dnhyxc.github.io/2020/02/08/fileOperation/

BlobBlob 概述1、Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 2、Blob 由一个可选的字符串 type（通常是 MIME 类型）和 blobParts 组成： 123

https://dnhyxc.github.io/2021/08/16/vue/

Vue3 新特性说明setupsetup 方法说明1，setup 是 Vue3.x 新增的一个选项，它是组件内使用 Composition API 的入口。 setup 执行时机2，setup 会在 beforeCreate 之前执行，而不是在 beforeCreate 和 created 之间执行。 setup 参数说明1，setup 接受两个参数，分别为： props: 组件传入的属性。

https://dnhyxc.github.io/2021/02/01/qiankun/

前言：近年来越来越多前端开始把注意力集中在复杂前端应用的架构上面。尤其是如何将前端整体分解，每一块可以独立开发、测试和部署，同时对用户而言仍是一个整体。这种技术就是微前端，我们将其定义为：一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 本问主要讲的是基于 qiankun 搭建的微前端架构示例，主应用为 Dva，子应用接入 Reac

https://dnhyxc.github.io/2021/08/20/jsTools/

检测当前页面是否被隐藏1、使用 visibilitychange 事件可监测当前页面是否被隐藏，当切换页面时document.hidden显示为 true 则为隐藏, false 就是显示状态。 2、一般在工作用主要用到用户在页面停留了多长时间。如：爱奇艺广告播放时间居然是在当前标签页激活的时候才会进行倒计时，离开当前标签页的时候，倒计时停止。 2、基本使用方式如下： 123document.ad

https://dnhyxc.github.io/2022/03/30/wps/

WPS OA 助手什么是 WPS OA 助手WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页，并通过调用网页中 JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互，同时一个 WPS 加载项中的多个网页形成了一个整体， 相互之间可以进行数据共享。 开发者不必关注浏览器兼容的问题

https://dnhyxc.github.io/informal/index.html

JS APIouterHTML1，使用 outerHTML 获取指定元素中的所有子元素及文本元素。 12345678910111213141516171819

https://dnhyxc.github.io/2021/03/18/writtenTest/

JavaScript 相关箭头函数和普通函数的区别是什么1，普通函数 this：this 总是指向它的直接调用者。 在默认情况下，没找到直接调用者，this 指的是 window。 在严格模式下，没有直接调用者的函数中的 this 是 undefined。 使用 call,apply,bind 绑定，this 指的是绑定的对象。 2，箭头函数 this：在使用=>定义函数的时候，t

https://dnhyxc.github.io/2022/02/09/frontend/

HTMLsrc 和 href 的区别src 和 href 都是用来引用外部的资源，它们的区别如下： src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应用到文档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。 href：表示超文本引用，它指向一些网络资

https://dnhyxc.github.io/2020/08/06/http/

http 简介1，http 是什么：

https://dnhyxc.github.io/2021/07/20/jsTools/

检测当前页面是否被隐藏1、使用 visibilitychange 事件可监测当前页面是否被隐藏，当切换页面时document.hidden显示为 true 则为隐藏, false 就是显示状态。 2、一般在工作用主要用到用户在页面停留了多长时间。如：爱奇艺广告播放时间居然是在当前标签页激活的时候才会进行倒计时，离开当前标签页的时候，倒计时停止。 2、基本使用方式如下： 123document.ad

https://dnhyxc.github.io/2020/02/20/react/

React 的定义方式1，定义方式一：

https://dnhyxc.github.io/2020/03/06/git/

git 生成 ssh1，查看是否设置用户名及邮箱： 123git config user.name // 查看用户名git config user.email // 查看邮箱 2，设置用户名及邮箱： 123git config --global user.name "xxxxx" // 设置用户名git config --global user.email "xxx

https://dnhyxc.github.io/2020/07/09/dvaStructure/

前言读完本文您将了解以下几点1，如何配置一个基于 Dva + antd + ts + eslint 的项目。 2，webpack 是如何打包 js、jsx、ts、tsx、css、less、img、svg 等资源。以及常用的一些 plugins 的配置等。 3，TypeStript 的 tsconfig.json 是如何配置的。 4，如何处理 antd 按需加载。 5，eslint 是如何配置的。

https://dnhyxc.github.io/2021/04/01/websocket/

websocket 简介websocket 是什么

https://dnhyxc.github.io/2021/03/02/node/

node 简介1，node 是什么： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

https://dnhyxc.github.io/2020/02/09/class/

Class（类）1、为什么会出现类？ 因为 JavaScript 语言的传统方法是通过构造函数，定义并生成新对象。写法跟传统的面向对象语言（比如 C++和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑，如下： 12345678910function Person(name, age) { this.name = name; this.age = age;}

https://dnhyxc.github.io/2021/09/11/mobile/

前言1、对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准（以前是 iphone4 的 320×480，现在更多的是 iphone6 的 375×667）。 对于 retina 屏幕（如: dpr=2），为了达到高清效果，视觉稿的画布大小会是基准的 2 倍，也就是说像素点个数是原来的 4 倍（对 iphone6 而言：原先的 37

https://dnhyxc.github.io/2020/12/09/webpack/

webpack5webpack 安装1、注意尽量不要在全局安装 webpack、在全局安装会把 webpack 版本锁死，可能导致其它项目打包出错。 2、可以通过如下方式在局部安装： 1234567mkdir webpack-testcd webpack-testnpm init -ynpm i webpack webpack-cli webpack-dev-server -D entry 配置1

https://dnhyxc.github.io/2021/04/07/network/

计算机网络基本概念计算机网络的定义

https://dnhyxc.github.io/2022/04/12/algorithm/

判断两个数组是否相等前提：数组可能出现嵌套，每层数组的元素都是简单数据类型。 判断相等条件：数组元素顺序和每层元素的值是否都是相同的，如： a1 = [1]、a2 = ['1'] 此时 a1 !== a2。 a1 = [1, 2]、a2 = [1, [2]] 此时 a1 !== a2。 a1 = [1, 2, 3]、a2 = [1, 2, 3] 此时 a1 === a2。

https://dnhyxc.github.io/2021/05/18/http/

https://dnhyxc.github.io/2021/02/09/ReactPrinciple/

react 设计理念快速响应1，react 设计理念就是让用户能用 javascript 实现快速相应的大型 web 应用程序。而要实现快速相应，必然会碰到 CPU 瓶颈 和 IO 瓶颈。 CUP 瓶颈是当页面需要进行过于复杂的运算，或者当项目变得庞大、组件数量繁多时，就容易遇到 CPU 的瓶颈。 IO 瓶颈就是当发送网络请求时会有延迟。 如何解决瓶颈1，我们都知道 react 解决 CP

https://dnhyxc.github.io/tags/

JS APIouterHTML1，使用 outerHTML 获取指定元素中的所有子元素及文本元素。 12345678910111213141516171819

https://dnhyxc.github.io/2019/02/20/react/

React 的定义方式定义方式一1，使用函数定义的方式： 123456789export default function App（props）{ return(

https://dnhyxc.github.io/2020/05/16/design/

设计模式1、设计模式是一种写代码的方式，它是为了解决特定问题而给出的简洁、优化的解决方案。 2、主要用到的设计模式有：单例模式、观察者模式、发布订阅模式、策略模式等。 单例模式1、单例模式：指的是一个构造函数一生只能有一个实例，即：不管 new 多少次，得到的都是同一个实例。 2、应用场景：可以用来实现页面自定义弹出层，类似实现 antd 中的 Modal 组件。 3、具体应用实例：

https://dnhyxc.github.io/2021/03/17/dnd/

react dnd 简介react dnd 的用途

https://dnhyxc.github.io/2022/05/02/wps/

WPS OA 助手什么是 WPS OA 助手WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页，并通过调用网页中 JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互，同时一个 WPS 加载项中的多个网页形成了一个整体， 相互之间可以进行数据共享。 开发者不必关注浏览器兼容的问题

https://dnhyxc.github.io/2021/05/15/dva/

前言：读完本篇文章您将充分的了解以下几个知识点，是不是找不到知识点在哪？哈哈，请看大图下方，是不是看不完全？那就将鼠标悬浮在大图下方的文本上吧，但是还是建议您点击详情查看吧。 本问主要讲的是如何初始化构建一个基于 dva + antd + ts + webpack 的项目，主要会讲到如何配置 TypeScript、如何配置 webpack 进行项目的打包、如何配置 an

https://dnhyxc.github.io/informal/network/

计算机网络概述计算机网络基本概念计算机网络的定义1、计算机网络是利用通信设备与通信链路或者通信网络，互连位置不同，功能自治的计算机系统，并遵循一定的规则实现计算机系统之间信息交换。 2、概括性定义：计算机网络是互连的，自治的计算机的集合。 自治：是指互联的计算机系统彼此独立，不存在主或从或者控制与被控制的关系。即指连接到网络的节电设备，它又自己的硬件设备即软件，能够独立的工作，即使在脱离网络的情

https://dnhyxc.github.io/2021/04/29/writtenTest/

css 的重绘与回流1，重绘：当节点需要更改外观而不会影响布局。 如更改背景颜色，字体颜色等。 2，DOM 结构的修改引发 DOM 几何尺寸变化的时候，发生回流。 常见的几何属性有 width、height、padding、margin、left、top、border 或者是 DOM 节点发生增减移动。 3，减少重绘和回流的办法： 使用 css3 新增属性：translate 替代 to

https://dnhyxc.github.io/2021/03/25/dva/

Dva 配置安装 Dva

https://dnhyxc.github.io/2020/06/13/uploadFile/

前言本文主要概括了以下几种文件上传方式： 基于 formData 实现文件上传。 基于 base64 实现文件上传。 上传时生成唯一 fileName 传给后端。 文件上传并生成进度条。 多文件上传。 拖拽上传。 大文件上传(切片上传)。 canvas 压缩上传图片。

https://dnhyxc.github.io/2021/03/06/git/

git 生成 ssh1，查看是否设置用户名及邮箱： 123git config user.name // 查看用户名git config user.email // 查看邮箱 2，设置用户名及邮箱： 123git config --global user.name "xxxxx" // 设置用户名git config --global user.email "xxx

https://dnhyxc.github.io/2021/02/16/test/

安装 dva1，安装所需依赖： npm i dva-cli -g

https://dnhyxc.github.io/2021/05/15/dvaStructure/

前言：读完本篇文章您将充分的了解以下几个知识点，是不是找不到知识点在哪？哈哈，请看大图下方，是不是看不完全？那就将鼠标悬浮在大图下方的文本上吧，但是还是建议您点击详情查看吧。 本问主要讲的是如何初始化构建一个基于 dva + antd + ts + webpack 的项目，主要会讲到如何配置 TypeScript、如何配置 webpack 进行项目的打包、如何配置 an

https://dnhyxc.github.io/informal/

JS APIouterHTML1，使用 outerHTML 获取指定元素中的所有子元素及文本元素。 12345678910111213141516171819

https://dnhyxc.github.io/2021/05/30/browser/

前言读完本文您将了解以下几点1，浏览器内有哪些进程，这些进程都有些什么作用。 2，浏览器地址输入 URL 后，内部的进程、线程都做了哪些事，以及我们与浏览器交互时，内部进程是怎么处理这些交互事件的。 浏览器架构进程和线程1，进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位。 2，线程（thread）是 CPU 调度和分派的基本单位，它可与同属一

https://dnhyxc.github.io/2020/04/01/class/

Class（类）1、为什么会出现类？ 因为 JavaScript 语言的传统方法是通过构造函数，定义并生成新对象。写法跟传统的面向对象语言（比如 C++和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑，如下： 12345678910function Person(name, age) { this.name = name; this.age = age;}

https://dnhyxc.github.io/2021/03/06/html5/

h5 简介1，什么是 h5

https://dnhyxc.github.io/2021/04/30/browser/

前言：读完本篇文章您将充分的了解以下几个知识点，是不是找不到知识点在哪？哈哈，请看大图下方，是不是看不完全？那就将鼠标悬浮在大图下方的文本上吧，但是还是建议您点击详情查看吧。 浏览器内有哪些进程，这些进程都有些什么作用；浏览器地址输入 URL 后，内部的进程、线程都做了哪些事，以及我们与浏览器交互时，内部进程是怎么处理这些交互事件的。

https://dnhyxc.github.io/2021/03/06/hexo/

hexo 简介1，什么是 hexo