weixin_49524770的博客

原创 前端性能优化之首屏、白屏与卡顿优化手段

其中第一行中的 x-dns-prefetch-control 表示开启 DNS 预解析功能，第二行 dns-prefetch 表示强制对 s.google.com 的域名做预解析。这样在 s.google.com 的资源请求开始前，DNS 解析完成，后续请求就不需要重复做解析了。方案二可以使用骨架屏，可以使用切图，但是可能整页切图质量较大，也会占用网络资源。，在静态资源请求之前对域名进行解析，从而减少用户进入页面的等待时间。首屏秒开主要可以分为 4 个方法——懒加载，缓存，离线化，并行化。

原创 包管理器 区别 npm pnpm yarn 优点和缺点

目前在前端领域最流行的包管理工具包含了 npm、yarn、pnpm，其中 pnpm 的机制对 yarn 和 npm 堪称降维打击，它通过软硬链接依赖的方式实现了快速安装、去除幽灵依赖，当下各种类库、组件库的最佳实践方案也基本都是 pnpm + monorepo。由于我所在的团队也使用了 pnpm 作为包管理工具，因此想通过一篇分享将 pnpm 从头至尾了解清楚。

原创 Vue/React项目部署到Github

根目录下新建 .github 文件夹，然后在其目录下新建 workflows 文件夹，在里面新建 main.yml。如果没有的话，请到GitHub上新建仓库，并把你本地的项目提交到GitHub上新建的仓库里。# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。npm的版本也根据你的实际使用而定，后面的内容都一样。如果你有封装的话，如上图，可能是一个变量，一般都在根目录的。

原创 git的操作、工作流、部署

git是个软件 叫分布式版本控制系统，还有svn等，但是git是最好用的一个。方便切换版本，管理版本。

原创 git常见实战命令

git push -u origin 分支名 //一般新建仓库就有，直接复制 //git push -u origin master 主分支。此时只需要将远程配置删除，重新添加即可；$ git add --all # 将当前目录所有内容(文件和文件夹)添加到暂存区。refactor:用于重构代码，例如修改代码结构、变量名、函数名等但不修改功能逻辑;test: 用于修改测试用例，例如添加、删除、修改代码的测试用例等。style: 用于修改代码的样式，例如调整缩进、空格、空行等;

原创 web-worker应用在大文件切片上传

web-worker

原创 js 数组的基础方法

如果是数组，concat() 会将这些数组中的元素添加到新数组中；//5、filter(function(value, index, arr), thisValue) 数组中的每一项都执行回调函数，返回值是包含符合条件元素的新数组。//7、sort([compareFunction])// 对数组的元素进行排序(默认情况下按字符编码的顺序进行排序)，返回值是排序后的数组。//6、Map() 方法返回一个新数组，该数组的长度与原数组相同，其中的元素是原数组中每个元素经过 callback 函数处理后的结果。

原创 js的事件循环机制

js 事件循环

原创 TS 泛型

原创 TS 泛型

T是什么类型不知道，只有在函数执行的时候才知道是用做了什么类型。比any好，any会跳过类型检查，T不会。TS类型会自动推断，但不一定所有的都能推断出，

原创 TS属性的封装

b.num是访问不了的，报错。protected只能在类中访问。属性的封装让数据变得更加安全。

原创 TS抽象类、接口

定义抽象类的时候用的是extends继承，定义接口时使用implements实现，主要区别，接口主要定义了一个标准，限制了某个类必须符合接口的标准，专门做爸爸的 抽象类就是专门被其他类继承的一个类，它没有办法去创建实例对象，它里面可以添加抽象方法，抽象方法只能添加到抽象类里面。接口就是定义了一个规范，只要你实现了这个接口，就意味着满足了这个规范。满足了规范，就可以在指定的场景之中去使用。区别：抽象类里面可以有抽象方法，可以有普通方法，但是抽象类里面都是抽象方法，接口可以在定义类的时候去限制类的结构。

原创 TS构造函数和this、继承、Super

对扩展开放O，对修改关闭C，创建一个新类继承旧类，在新类中添加新功能，实现扩展和修改，不影响旧类。在子类构造函数中调用父类的构造函数，才能确保继承的正常。不然我们对象初始化完成不了，继承出问题。constructor 这个函数名字是固定的 ，在定义类的时候一定有属性是在构造函数中赋值的。extends 继承。

原创 05 TS面向对象和类

原创 03 TS编译选项

一般情况下，不需要改lib中的配置项。如果是在nodejs里运行的可以去改一下，一般前端在浏览器运行的代码是不需要设置的。配置个tsconfig.json 文件 可以用 tsc 一个命令编译当前项目文件夹下所有ts文件。tsc 文件名 -w 写代码自动编译，不用手动每次再去tsc 文件名了。tsc -w 会监视当前项目文件夹下所有ts文件，实时编译。

原创 02 TS中类型

let e : unknow unknow 是类型安全的any 因为会报错检验 any 不会 直接把有类型声明的赋值也变成any了 不安全 不建议使用 相比之下建议unknow。never 报错 执行不完 没有返回值。类似常量 不能再更改了。

原创 ts学习 01类型声明

ts可以编译成任何版本的js 比如es3 4 5 6,好处是保证代码有个最好的兼容性，在不同的浏览器里都可以正常的去执行，可以配置编译器，指定编译成哪个js版本。ts代码里有错误，仍能编译成js，有编译工具配置，有错误可以不编译js，降低出错情况。a 的类型是number，在以后的使用过程中a的值只能是number。如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测。ts 参数多了少了都不行，类型不对也不行，波浪线报错。目前代码每次改完都要重新编译，不然新代码不生效。

原创 单向数据流与双向数据流

在前端三大主流的框架中，我们可能会经常听到 React 是单向数据流，采用单向数据绑定，而 Vue 2.x 也是单向数据流，但同时支持单向数据绑定和双向数据绑定，而 Angular 和 AngularJS 又有所不同，到底数据绑定与数据流之间有什么关联？虽然 Vue 和 Angular 有双向数据绑定，但 Vue 和 Angualr 父子组件之间数据传递，仍然遵循单向数据流，即父组件可以向子组件传递。缺点：由于组件数据变化的来源入口变得可能不止一个，如果缺乏相应的“管理”手段，容易将数据流转方向弄得紊乱。