a8725585的博客

转载 web性能监控

web 的性能一定程度上影响了用户留存率，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。我们希望通过监控来知道 web 应用性能的现状和趋势，找到 web 应用的瓶颈？某次发布后的性能情况怎么样？是否发布后对性能有影响？感知到业务出错的概率？业务的稳定性怎么样？

原创 记一次webpack迁移至vite【antd3(4)】

本文仅记录一下现有项目由webpack迁移到vite踩到的坑

原创 Tree-shaking

和传统的dead code elimination（DCE）区别为传统DCE消除不可能执行的代码，tree-shaking更关注消除没有用到的代码。基于作用域，在AST时对韩素或全局对象进行对象记录，然后在形成的整个作用域链对象中进行匹配import的导入并标识起来，最后打包匹配的代码，删除未匹配的。通过ES Module的特性可以进行静态分析的特点，在编译时进行静态分析导入导出关系，识别出无用代码进行剔除。从入口文件出发，找出所有读取的变量，找这些变量在哪里定义的，将定义语句包含进来，无关代码抛弃。

原创 Docker 初体验

docker的初次使用尝试

原创 webpack迁移至vite

博客地址webpack迁移至vite文章目录步骤效果对比错误处理注意事项步骤根目录新增index.html 使用module引入入口文件<script type="module" src="/src/index.tsx"></script>安装依赖yarn add -D vite @vitejs/plugin-legacy vite-plugin-importer @vitejs/plugin-react-refresh @rollup/plugin-babe

原创 Vue3-composition 技巧

Ref自动解包watch直接接受Ref作为监听对象，在回调中解包const counter = ref(0)watch(counter, count => { console.log(count) // same as `counter.value`})在模板中自动解包reactive解包import { ref, reactive } from 'vue'const foo = ref('bar')const data = reactive({ foo, id

原创 npm包管理

版本说明npm包版本号： [大版本].[中间版本].[小版本]^ 匹配到中间版本最新~ 匹配到小版本最新不加标记，采用固定版本lernaLerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。代码库架构方式单包架构多包架构lerna常用命令lerna bootstrap clone下已存在的项目后在根目录运行该命令安装所有依赖项并链接交叉依赖lerna publish 为已经更新过的软件包创建一个新版本。提示 输入新版本号并更

原创 typescript 编译原理

流程结果编译器文件备注词法分析token流Scanner 扫描器（scanner.ts）语法分析Ast(抽象语法树)Parser 解析器（parser.ts）绑定SymbolBinder 绑定器（binder.ts）Symbol链接相同结构的声明，帮助类型系统推导出这些具名声明检查类型验证Checker 检查器（checker.ts）解析每种类型的构造，负责处理、检查针对每个类型的语义操作，并生成合适的诊断信息生成代码.js/.d.t...

原创 githooks之防止分支误合并

在多人协作时，我们会把各自的分支开发的功能合并入test分支。有的分支可能有当前版本不能上的代码。这时如果有人将test分支合到自己当前需要发的分支中，会将自己分支给污染，一不注意就会影响整个系统当前版本上线；我们一般会约定test分支只可合入代码，而不能将其合入其它分支。约定的有时一不注意就会出错，因此这里我们将通过自动化检测防止分支误合并，通过硬性机制控制基本原理 githooks的prepare-commit-msg与post-merge 钩子 child_process node子进.

原创 Babel处理代码初探

系列文章目录一文搞定babel转换文章目录系列文章目录前言二、使用步骤1.引入库2.读入数据2.获取当前节点3.修改节点4.生成代码并输出总结前言babel让你可以对代码进行为所欲为操作，以下为记录babel的初始尝试处理api接口文件生成适合批量录入菜单权限的结构转换前转换后将注释的安装配置_autoAssign 分为[title]_[key]两部分# 一、Babel是什么？Babel 是JS编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 Ja

原创 githooks之使用husky规范git提交

Git Hooks 就是那些在Git执行特定事件（如commit、push、receive等）后触发运行的脚本Git Hooks功能作用 多人开发代码语法、规范强制统一 commit message 格式化、是否符合某种规范 如果有需要，测试用例的检测 服务器代码有新的更新的时候通知所有开发成员 代码提交后的项目自动打包travis ci（git receive之后） 等等husky介绍Git hooks made easy 让githooks使用起来简单的工具实例：现在使.

原创 webpack优化

webpack优化小结测量打包速度配置loaderDLL、Externals多进程使用缓存多进程代码压缩测量打包速度speed-measure-webpack-plugin插件progress-bar-webpack-plugin插件--report-json 命令参数配置loader优化搜索时间、缩小文件搜索范围、减少不必要的编译工作DLL、Externals原理都是减少第三方库的编译多进程thread-loader（v4以后的官方推荐）happypack（不怎么维护了

原创 发布插件(组件)到npm

接着上一篇vue中编写通过方法调用的组件我们已经开发完成一个插件，接下来将其发布到npm,供他人使用同时也方便后续其它地方复用。接下来的打包主要是使用vue-cli3脚手架搭建的环境。cli2的打包发布可以看这篇文章 教你一步步封装vue组件并发布到npm。1、修改项目package.jsonvue-cli 3.x 提供了构建目标的命令,不用再去配置webpack.config,直接新增命令搞定target: 默认为构建应用，改为 lib 即可启用构建库模式name: 输出文件名.

原创 实用库

资源预加载库 preload.js页面滚动动画 wow.js

原创 前端异常处理

捕获异常js同步异常js异步异常资源加载异常Promise异常try…catch…√√window.onerror√√window.addEventListener(‘error’)√window.addEventListener(‘unhandledrejection’)√try catch捕获当前调用栈中的错误，因此无法捕获异步异常（抛出错误时try catch调用栈已经执行完毕退出。同时捕获后，异常不会向上继续抛出 ...

原创 通过二进制获取图片格式以及宽高

通过把文件的二进制数据转为16进制字符转再进行相应的判断获取图片格式以及宽高等二进制转字符串通过readAsBinaryString转换blob对象为二进制字符串通过charCodeAt转换二进制字符串为Unicode码将Unicode码转换为16进制async blobToString(blob){ return new Promise(resolve=>{ const reader = new FileReader() reader.o.

原创 深入理解浏览器垃圾回收机制（V8）

文章目录栈堆堆的垃圾回收优化效率栈定义栈用来在函数执行时存储保存执行上下文环境，我们一般也称调用栈，如基本类型的变量，引用类型的引用地址等都保存在栈中。执行到当前函数时进行入栈，执行完毕进行出栈。回收方式有一个记录当前执行状态的指针(称为 ESP)指向活动栈，函数执行完毕，esp下移到后一节点，销毁当前函数执行上下文。新的函数执行上下文入栈直接覆盖掉销毁的空间即可 .function test() { const a = { name: 'a' }; function showNam

原创 一文搞定babel转换

babel转换流程code转换为AST => 遍历AST树、进行修改 => 还原为codebabel结构@babel/core AST转换的核心@babel/cli 打包工具@babel/plugin* Babel 插件机制，Babel基础功能不满足的时候,手动添加些@babel/preset-env 预设插件集，减少配置各类插件@babel/polyfill 把浏览器某些不支持API，兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大@b

原创 webpack热更新思维图

原创 Vue组件文档自动化生成库

一个可以提供自动化文档的生成，并提供组件预览，这个库叫做 Vue Styleguidist使用参考 使用Vue Styleguidist编写组件文档

原创 记一次web性能优化实战

效果展示优化前优化后可以看到优化前有明显的延迟，详细信息才出现。优化后详细信息基本秒现。问题分析出现数据显示有明显的延时的情况，我们分析大方向可能有接口缓慢网络问题前端问题渲染问题：渲染节点过多、重排、重绘等js阻塞页面渲染原因定位1、查看network最大值784ms，因此可以排除接口和网络问题2、使用performance记录一次过程可以看到js耗费将近14s。此处可能由于performance记录需插入很多记录钩子所以比正常范围时间耗费要放大很

原创 Vue实例化过程

参考：Vue原理解析

原创 css层叠上下文和层叠水平

页面中当元素发生层叠时如何显示。为何有的元素明明写在后面却被前者覆盖住了？为何z-index设置很大了，还是不显示？这些涉及到css中的层叠上下文，层叠水平等层叠上下文类似块级格式化上下文，是一个封闭的空间，用来限制内部元素的层叠水平在当前范围活动的。在同一个层叠上下文中，（元素、层叠上下文）的层叠水平按一定的规则排序、显示。创建方式： 根层叠上下文 天生就具有的 z-index...

原创 强类型转换

字符串与数字的隐式强类型转换ES5规范11.6.1节，如果某操作数是字符串或者能够通过以下步骤转换为字符串的话，+将进行拼接操作。如果其中一个操作数为对象（包括数组），则先调用ToPrimitive抽象操作，该操作在调用[[DefaultValue]]，以数字作为上下文。ToPrimitive先调用valueOf(),再Tostring转换为字符串String()直接调用Tost...

原创 面向切面编程

面向切面编程也称AOP，主要作用是将与核心业务逻辑无关的功能抽离出来，以动态织入的方式掺入业务逻辑模块中。如日志记录功能等。可以保持业务逻辑的纯净，高内聚性；便于复用日志模块等装饰器模式给对象动态添加职责（即用即付）的方式为装饰器模式实现一个插件式的表单验证：校验+提交一般实现：function formSubmit(obj){ const {tel,name} = obj if...

原创 vue中编写通过方法调用的组件

通过函数调用的组件，常见的toast提示框，loading等创建文件目录结构|---loading |---Loading.vue |---index.js编写index.js思路创建组件构造器实例化组件挂载到一个新建的div上新增至body页面上通过实例对组件进行代理操作import Vue from 'vue'import LoadingComp...

原创 使用vue-cli3搭建typescript移动端

安装vuecli3npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue create project-typescript手动选择特性选择babel、ts、router、vuex、css预编译器这里我们使用基于类的组件选择sass编译器eslint规则独立的配置文件配置在App.vue中新增路...

原创 前端单元测试

文章目录测试类型unit测试E2E 测试单元测试原因vue项目中进行单元测试安装环境编写测试用例结论测试类型unit测试主要对组件进行测试。数据的有效性测试关注组件本身。vue 单元测试的范围仅限于数据流动是否正确，逻辑渲染是否正确（v-if v-show v-for），style 和 class 是否正确，我们并不需要关系这个组件在浏览器渲染中的位置，也不需要关系对其它组件会造成...

原创 js运行流程

js引擎处理js的过程同传统编译语言的代码编译大致相同文章目录流程预编译阶段声明提升let、const阻止提升的原因LHS与RHS查找类型流程步骤传统编译语言JS引擎1词法/语法分析词/语法分析2解析生成AST解析生成AST3代码生成预编译4执行执行预编译阶段js代码是运行时编译（编译发生在代码执行前几微秒），即预编译完立即...

原创 vue项目设置eslint规则校验

安装npm install --save-dev eslint eslint-plugin-vue配置"extends": ["plugin:vue/recommended"]解析器vscode安装eslint插件配置vscode自动fix设置保存时格式化"eslint.autoFixOnSave": true,扩展检查.vue文件关闭编辑器自动保存格式化，避免冲突...

原创 weex、ReactNative

weexWeex .we 文件 --------------前端(we源码)↓ (转换) -------------------前端(构建过程)JS Bundle -----------------前端(JS Bundle代码)↓ (部署) -------------------服务器在服务器上的JS bundle -------服务器↓ (编译) ------------------...

原创 SSR

前后端分离后单页面应用盛行，出现了服务端渲染的说法，其能更好的SEO什么是服务器端渲染 (SSR)服务器将组件和获取到的数据解析生成html字符串，发送给客户端。过程同之前的php、java等的全栈开发，使用模板引擎，获取数据后解析为html字符串后，发到客户端展现。服务器渲染的 Vue.js 应用程序，可以同时在服务器和客户端上运行。为什么使用服务器端渲染 (SSR)更好的 ...

原创 浏览器运行流程

参考文献：1、图解浏览器的基本工作原理2、前端文摘：深入解析浏览器的幕后工作原理

原创 css选择器权重

css权重分为5级第一级：内联样式<div style=""></div> 权重 1000第二级：id选择器 #开头 权重0100第三级：class选择器 权重0010第四级：标签选择器、伪类权重0001第五级：通用选择器(*),子选择器(>)和相邻同胞选择器(+)无权重0000示例<p class="p1">这是内容</p>...

原创 vue-cli3 使用postcss-plugin-px2rem

postcss-plugin-px2rem是可以将px自动转化为rem的postcss插件安装 npm i postcss-plugin-px2rem --save -devpackage.json中添加配置（组件中px转rem才生效）在package.json、package.json、package.json中设置很重要"postcss-plugin-px2rem": { "r...

原创 Vue相关开源项目库集合

git地址：https://github.com/opendigg/awesome-github-vue/blob/master/README.md

原创 著名的img底部3像素问题

img标签在HTML5和HTML4.0.1的严格模式渲染的时候，下面会有几像素的空白。原因img标签默认为inlineinline元素一般为文字，小写字母g、y底部会多出一段，距离和字体大小有关解决方法设为块级元素img { display: block;}字体设为0.img-content{font-size:0}改变基线img { vert...

原创 js与或赋值原理

或赋值a=b||cb默认值c默认值a取值truetruebtruefalsebfalsetruecfalsefalsec从左往右只要有一个正确后面则不执行 执行到哪则返回哪与赋值a=b&&cb默认值c默认值a取值truetruectruefalsecfal...

原创 git 忽略配置文件

这里写自定义目录标题git的三种忽略文件方法方式对比assume-unchangedskip-worktreegit的三种忽略文件方法方式对比方法使用方式适用范围.gitignore根目录创建.gitignore文件全部忽略assume-unchangedgit update-index --assume-unchanged开发人员不会更改文件ski...

原创 commonjs、AMD、CMD

webpack运行在node.js上，所以模块化规范也同node.js 使用的是commonjs规范commonjs规范内容一个文件就是一个模块，模块间作用域互不影响模块的定义 module.exports模块的引用 require(‘标识符’)模块标识符服务端commonjs规范为同步加载，适用于服务端，在浏览器中js加载会阻塞页面渲染，因此同步不适用浏览器端产生了amd（...