- 博客(122)
- 收藏
- 关注
RSS订阅原创 关于useEvent的思考
useEvent这个Hook最近很火，我也查阅了一下这个Hook的相关资料。useEvent这个API实际上通常来说就是useCallback这个钩子的改良版。useCallback这个钩子开发者会怎么使用呢？其实主要就是为了保证函数引用不变使用。但是这种使用下会存在比较烦人的闭包问题：...
2022-06-23 22:51:09
377
1
原创 vue2、vue3、react虚拟domdiff算法的区别
vue3随着Vue3.0版本的发布，我们在使用或者对其源码进行阅读时会惊讶的发现，它又又又双叒叕变强了，尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升，它的更新机制会更加的快速敏捷。下面就抛砖引玉，给大家稍微介绍下在更新机制方面主要升级的两个点：节点移动优化要从一道算法题说起：在一个给定的数组中，找到一组递增的数值，并且长度尽可能的大。有点比较难理解，那来看具体例子：const arr = [10,9,2,5,3,7,101,18][2, 3, 7, 18]这
2022-01-17 00:15:43
1566
原创 taro原理
taro1/2taro1/2 是编译类型的小程序跨平台框架。taro是使用react进行小程序构建的。React 与小程序之间最大的差异就是他们的模板了，在 React 中，是使用 JSX 来作为组件的模板的，而小程序则是使用字符串模板的。1、模版转换taro首先要实现的就是进行模版转换，把 JSX 语法转换成可以在小程序运行的字符串模板。模版转换的实现：模版转换主要是通过静态编译实现的，分为解析、转换、生成，三个阶段。解析过程：babel 的核心编译器 babylon.
2021-12-14 00:25:27
1514
原创 webpack3升级为webpack4的实践
刚来到公司，接手了一个webpack3的老项目，打包需要100多秒，热更新日常不生效，需要刷新后等待15秒左右，所以我对它进行了升级，记录一下这次的升级过程和遇到的坑。先说一下效果，这次webpack升级提升了不少打包速度：生产打包提升了30%；开发打包提升40%，开发热更新提升70%。升级到 webpack 4 移除 CommonsChunkPlugin，默认使用 SplitChunksPlugin 分割代码 升级 html-webpack-plugin 引入 mini-css-extr
2021-09-30 18:41:42
437
原创 什么时候使用useCallback
刚开始使用hook的时候，听旁边的小伙伴说，useCallback的作用是缓存函数，可以不每次渲染的重新创建函数，提升性能，然后给函数式组件的每个函数都使用了useCallback，但是用了几天后觉得，不对呀，既然是这样 react为什么不把所有函数默认useCallback而让使用者去加，这样多此一举呢，于是自己就研究了一下，到底什么时候该使用useCallback。举个例子：function CandyDispenser() { const initialCandies = ['snick
2021-08-23 22:47:05
1642
1
原创 小程序原理
iOS ：小程序逻辑层的 JavaScript 代码运行在 JavaScriptCore（） 中，视图层是由 WKWebView 来渲染的 Android：小程序逻辑层的JavaScript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 MobileChrome内核来渲染的 开发工具：小程序逻辑层的JavaScript 代码是运行在 NW.js 中，视图层是由 Chromium() Webview 来渲染的渲染层的界面使用了WebView进行渲染 逻辑层采用JsCore线程运行JS.
2021-06-30 17:49:40
207
原创 抽象语法树
AST一、什么是AST抽象语法树在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译":分词/词法分析这个过程会将由字符组成的字符串分解成有意义的代码块,这些代码块统称为词法单元(token).举个例子: let a = 1, 这段程序通常会被分解成为下面这些词法单元: let 、a、=、1 ，空格是否被当成词法单元，取决于空格在这门语言中的意义。解析/语法分析这个过程是将词法单元流转换成一个由元素嵌套所组成的代表了程序语法结构的树,这个树被称为"抽象语法
2021-04-24 21:18:15
8378
原创 算法学习小结
做算法题的时候，我们一般都按照leetcode中的标签来分类，但这样分类并不是很好，用题的解法来分类，能让我们更快的掌握常见算法题的解决思路。1.滑动窗口滑动窗口可以看成数组中框起来的一个部分。在一些数组类题目中，我们可以用滑动窗口来观察可能的候选结果。当滑动窗口从数组的左边滑到了右边，我们就可以从所有的候选结果中找到最优的结果。滑动窗口一般表示成一个左闭右开区间，窗口的左边界和右边界永远只能向右移动，而不能向左移动。这是为了保证滑动窗口的时间复杂度是 O(n)O(n)。如果左右边界向左移动的话，这
2020-09-30 11:23:06
370
原创 深入浏览器重排与重绘
一.什么是重绘与重排浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的DOM元素disply值为none 在渲染树中没有对应的节点）。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义，理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示（绘制）页
2020-08-05 18:53:05
263
原创 从浏览器的多线程到js的单线程解析
大纲 区分进程和线程 浏览器是多进程的 浏览器都包含哪些进程？ 浏览器多进程的优势 重点是浏览器内核（渲染进程） Browser进程和浏览器内核（Renderer进程）的通信过程 梳理浏览器内核中线程之间的关系 GUI渲染线程与JS引擎线程互斥 JS阻塞页面加载 WebWorker，JS的多线程？ WebWorker与SharedWorker 简
2020-06-19 17:24:18
460
原创 vscode好用的插件推荐
使用vscode已经一年多了，发现了很多好用的插件，在这里总结一下。1.Auto Close Tag可以自动闭合标签。2.Auto Rename Tag自动修改闭合的标签。3.AutoScssStruct4Vue在vue中使用scss时，根据vue文件的模板template结构，自动生成对应的scss文件。4.Bracket Pair Colorizer括号颜色匹配，在括号嵌套较多时很有用。5.var-translate将汉字翻译为英文，并提供驼峰，短横线等多种格..
2020-06-06 00:20:14
1573
原创 Vue 的计算属性缓存的实现
前言很多人提起 Vue 中的 computed，第一反应就是计算属性会缓存，那么它到底是怎么缓存的呢？缓存的到底是什么，什么时候缓存会失效，相信还是有很多人对此很模糊。本文以 Vue 2.6.11 版本为基础，就深入原理，带你来看看所谓的缓存到底是什么样的。注意注意，这篇文章里我也写了 computed 的原理，但是这篇文章里的 computed 是基于 Vue 2.5 版本的，和当前 2.6 版本的变化还是非常大的，可以仅做参考。示例按照我的文章惯例，还是以一个最简的示例来演示。
2020-05-10 23:29:45
575
原创 Vue3.0响应式原理
最近几个月一直在搞脚手架工具，学习时间少了不少，感觉理论学习落下了很多，vue3就要发布了自己还没看过源码，所以决定研究一波。第一步当然是要把他的源码下载下来，https://github.com/vuejs/vue-next。我们可以将项目跑起来，可以看到生成了dist目录，在html文件中引入，我们就可以使用vue3啦，可以体验一波compositionApi。可以看到package文...
2020-04-06 21:19:57
613
原创 js二进制转换
String转换成Blob对象//将字符串 转换成 Blob 对象var blob = new Blob(["Hello World!"], { type: 'text/plain'});console.info(blob);console.info(blob.slice(1, 3, 'text/plain'));TypeArray转换成 Blob对象//...
2020-03-21 21:03:14
2901
原创 MAC下生成密钥，并使用ssh密钥登录
步骤一：打开终端，输入：ssh-keygen -t rsa -C "[email protected]"一路欢快的回车，所有默认都不用改，就可以生成密钥了。引号内是你唯一Email,这里可以作为以后Git远程仓库使用。步骤二：查看生成的公钥和私钥：ls ~/.ssh可以看到两个密钥文件：id_rsa（私钥） id_rsa.pub（公钥） ———— 我的本机的...
2020-03-20 17:59:59
1940
原创 IOS、iPhone移动端，表单input聚焦时页面放大的解决办法
最近的一个项目中，发现几个页面在使用 iPhone 访问的时候，点击input和textarea等文本输入框聚焦focus()时，页面会整体放大。经检查发现并没有什么特定的功能是让页面放大的，最后找到原因：苹果觉得点击输入框放大是一个“很好”的体验，就擅自把页面给放大了，单纯的用 meta 禁止页面放大是没有用的，可以使用下面两种方法解决。通过 mate 设置：<m...
2020-03-05 16:17:57
2838
原创 canvas图片合成
一、使用场景图片合成的使用场景是非常广的，虽说强大的PS能将任意图片组合在一起，但它也只能实现固定的几张图片的合成，而Canvas则能动态地将各种不同的图片合为一张图片。那么，何为动态合成呢？比如，我们要将用户的头像合到另一张图片上，这时候因为用户是不确定的，不同用户的头像不同，所以我们肯定不能用PS来做这件事，这时候就是Canvas大显身手的时候了。二、基本原理HTML5给我...
2020-02-08 21:20:24
511
转载 flex-basis
Oh My God，CSS flex-basis原来有这么多细节为了演示方便，避免无谓的干扰，本文所有的尺寸均指水平尺寸，对应CSS均是宽度相关，例如width/min-width/max-width。以前的我对flex-basis不屑一顾，以为就是个浮于表面的CSS属性。最近深入研究后才发现，自己那是朱砂当红土，珍珠当泥丸，钻石当玻璃，檀木当柴火——完全不识货！在Flex布局中，...
2020-02-06 00:47:04
28004
2
原创 js中相等性判断探索
最近发现一个比较神奇的问题如下：[] == false // true!![] == true // true一脸懵逼中。。。那么，现在就来从开始探索一下这道题的原理js比较操作js提供了三中不同的比较操作，分别是：* 严格相等 ("triple equals" 或 "identity")，使用 ===* 宽松相等 ("double equals") ，使用 ...
2020-01-21 22:16:28
199
原创 vue中css变量的使用
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="s...
2020-01-08 23:18:32
22317
3
原创 js的二进制
概述Blob: 前端的一个专门用于支持文件操作的二进制对象 ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组，但在API和特性上却有诸多不同 Buffer：Node.js提供的一个二进制缓冲区，常用来处理I/O操作它们之间的关系：下面就来一一介绍Blob我们首先来介绍Blob，Blob是用来支持文件操作的。简单的说：在JS中，有两个构造函数 File 和 B...
2019-12-18 22:31:06
411
原创 在vue中使用装饰器
在使用js写vue项目时，我们也可以使用装饰器来实现aop，如删除确认，可以把它提取出来。import { MessageBox } from 'element-ui';import Vue from 'vue'function confirmation(target, name, descriptor) { let oldFunction = descriptor.value;...
2019-12-12 01:24:35
2001
原创 js实现常用数据结构
在本文中，我们将要讨论并实现的数据结构是：栈 队列 链表 哈希表 树栈第一个数据结构是栈。它与队列非常相似，你之前可能听说过调用栈，这是 JavaScript 用于处理事件的方法。最后一个存入栈里的项目将是第一个被移除的项目。这被称为后进先出（LIFO）。 Web 浏览器中的后退按钮就是一个很好的例子：将你查看的每个页面添加到栈中，当你单击“返回”时，将从栈中弹出当前页面（最...
2019-11-26 22:00:46
997
原创 单元测试与E2E测试
编写一个最基础的测试以一个包含 E2E 测试常用操作的测试用例来介绍 Cypress 的基本使用。结合官方文档给的案例一起看风味更佳。打开、跳转网页：打开 eleme h5 订餐首页 滚动首页餐厅列表，是否正确滚动加载 填写搜索词，提交搜索，正确跳转页面 点击搜索第一项，页面正确展示添加测试文件在 cypress/integration 文件夹下新建测试文件。如 example...
2019-11-26 21:19:15
2373
原创 prefetch、preload、dns-prefetch
在使用Vue Router配置了异步组件后，即使没有激活这些异步组件，在浏览器中仍然可以看到请求这些组件。比如下面的配置：router.js:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { pa...
2019-11-19 11:54:06
1051
原创 动态规划
今天我们先从我们最熟的斐波那契数列数列开始。0,1,1,2,3,5,8,13,21,24,55, ...从数列中可以发现从第三个数开始的值是前两个值的和。递归解法function fib(n){ if(n < 2){ return n; }else{ return fib(n - 1) + fib(n...
2019-11-14 17:11:37
92
原创 Mac版本下的Chrome，双击html文件打不开
Mac版本下的Chrome，双击html文件打不开我们使用Mac做开发，不可避免的会使用到产品经理发来的原型，但是这个时候我们发现双击原型html文件，只会闪一下Chrome，并不能真正的打开Chrome浏览器!原因其实是因为在Mac OS系统下，在Finder(访达)中做任何操作，文件都会不可避免的被附加上一个特有的拓展属性(extend attributes)，可以通过终端命令ls -...
2019-10-25 15:04:58
2210
1
原创 vue diff算法
1. 当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后...
2019-10-20 22:04:28
178
原创 git提交规范
安装@commitlint/config-conventional、@commitlint/cli、husky、commitizen1.commitizennpm install -g commitizencommitizen init cz-conventional-changelog --save --save-exact提交时使用git cz2.husky就是一个h...
2019-09-29 22:36:19
243
原创 nginx常用配置总结
1.静态代理server { listen 80; server_name aaa.com; root /var/www/example; index index.html;}listen后的数字代表nginx监听的端口；server_name当我们将多个域名同时解析到80端口时，判断域名来对请求进行处理；root后代表访问这个端口是所访问的目录；第三...
2019-09-26 23:25:43
176
转载 react fiber架构
前言React16提出了Fiber结构，其能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度，非常强大。正文React是一个用于构建UI的JavaScript库，其核心是跟踪组件状态变化并将更新到view上。在React中，我们将此过程视为reconciliation。在调用setState方法后，框架会检查state或props是否已更改并在UI上重新呈现组件...
2019-09-25 21:39:52
316
原创 简单的seo（链接分享时的优化）
最近基本再用vue写项目，但是把vue写的网站用钉钉分享给别人的时候，网站简介上只有看着就很难受，可以看到这段话是vue-cli脚手架生成的用来处理浏览器不支持js时的一段代码，那么分享链接的这个简介是如何生成的呢实现原理钉钉会尝试抓取和分析钉钉APP输入框中的Html链接内容，并根据Open Graph Data协议提取其中的标签作为分享标签的内容。Open Graph Da...
2019-09-19 22:36:44
871
原创 关于npm
1.关于npm源npm config set registry http://registry.npm.taobao.org/npm config set registry http://registry.npmjs.org安装nrmnpm install nrm -g --savenrm use cnpm2.devDependencies 和 dependencies ...
2019-09-08 00:29:54
142
原创 自定义指令实现埋点解耦
公司的埋点方式是引入sdk注册到全局后，在需要埋点的地方使用js调用进行埋点，埋点代码完全混合在业务代码里，有时甚至得专门加个事件和方法来埋点。经过一番研究后发现，使用自定义指令可以很好地实现埋点代码和业务代码的分离。埋点主要有三种埋点，点击埋点，页面曝光埋点，DOM曝光埋点。页面曝光埋点可以直接配置自动监听无需在优化，主要是DOM曝光埋点和点击埋点需要优化。1.点击埋点优化在优化前，...
2019-08-23 16:10:55
553
原创 深入理解vertical-align和基线
最近css写的很多，经常会在div中放图片再配一些文字什么的，发现块元素内部有内联元素时，块元素的表现和内联元素的位置有一些奇奇怪怪的现象，看了张鑫旭老师的这篇https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/，收获很大。现象一、div中放一张图片，图片...
2019-08-21 18:33:44
690
原创 flex布局实现整体居中最后一行靠左
前几天要实现一个功能，页面要根据屏幕的宽度来决定一行显示几个元素，我最先想到的是左浮动，但左浮动时整体内容靠左不居中，很不美观，所以想要让页面不管显示几个元素，整体都是居中的。然后使用了flex布局来实现，但最后一行不满时，元素会贴两边展示，还是很难看。最后使用媒体查询实现了这个效果，但感觉这种实现方法很菜，后对此进行了研究。一、使用额外的空白标签给增加一行在flex布局容器中加入额外的标...
2019-08-19 01:49:27
5813
原创 React Work Loop 原理
背景 - 前端体验优化为了让 React 在检测到数据变化需要重新渲染界面的时候不会阻塞浏览器主线程，从而让用户交互体验更流畅，React 团队提出了 Work Loop 的概念，将任务拆分成小的模块，在每一个任务完成后都检测是否当前有优先级更高的任务（例如：用户与浏览器的交互），有则优先执行优先级更高的任务，没有则继续执行下一个任务。（声明：本文所解析的所有逻辑都是为了大家能更好的通...
2019-08-18 22:11:46
735
原创 vue小技巧
1.自动引入模块使用require.context遍历目录导入const path = require('path')const files = require.context('./modules', false, /\.js$/) let modules = {} files.keys().forEach(key => { let name = path.basen...
2019-08-06 20:04:37
332
转载 axios源码解析（转）
axios源码分析 - XHR篇文章源码托管在github上，欢迎fork指正！axios是一个基于 Promise 的http请求库，可以用在浏览器和node.js中，目前在github上有 42K 的star数备注：每一小节都会从两个方面介绍：如何使用 -> 源码分析 [工具方法简单介绍]一节可先跳过，后面用到了再过来查看 axios最核心的技术点是如何拦截请求响应...
2019-07-31 19:59:07
375
转载 cdn原理
在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应速度、优化现有Internet中信息的流动,需要在用户和服务器间加入中间层CDN. 使用户能以最快的速度，从最接近用户的地方获得所需的信息，彻底解决网络拥塞，提高响应速度，是目前大型网站使用的流行的应用方案.1. CDN 概述CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的...
2019-07-27 20:12:23
183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人