- 博客(50)
- 收藏
- 关注
RSS订阅
原创 浏览器如何渲染页面
*的元素没有几何信息，不会生成到布局树，伪元素节点拥有几何信息，会生成到布局树。浏览器网络线程接收到html文档后，会生成一个渲染任务，并将其加入到渲染主线程的消息队列中，根据事件循环机制，渲染主线程从消息队列中取出任务，开启渲染流程。标签，主线程会停止解析HTML，转而等待JS下载完成，并将全局代码执行完成后，才会继续解析HTML，因为JS代码执行过程中可能修改当前的DOM树。例如节点的宽高，相对包含块的位置。完成绘制后，主线程将每个图层的绘制信息交给合成线程，剩下的工作由合成线程完成。
2024-08-13 20:14:59
308
原创 vuex和pinia的区别
vuex: state, getters, mutations(同步), actions(异步), moudles。Vuex主要模块有：state, getters, mutations, actions, modules。actions: 改变state的方法，同步异步都支持，无需commit和dispatch。getters: 依赖state属性的值，state的计算属性。getters: 依赖state属性的值，state的计算属性。state: 全局属性与状态，可以模拟分模块。
2024-08-30 11:24:54
369
原创 Vue3与Vue2特性对比
Teleport 是一种能够将的模板移动到 DOM 中除 Vue app 之外的其他位置的技术。通过createRenderer，可以构建自定义渲染器。可与现有的Options API一起使用。vue3组件现在支持有多个根节点。
2024-08-11 19:21:42
198
原创 前端性能优化方法
前端性能优化方法打包构建代码压缩（html, js, css）resolve 优化tree shaking代码分块提取组件的 CSS资源加载避免CSS阻塞尽快加载CSS避免JS阻塞使用 async、defer 进行异步加载减少回流和重绘图片压缩、雪碧图预加载 prefetch浏览器缓存代码编写事件委托节流和防抖路由懒加载图片懒加载组件按需引入、异步加载web worker多线程
2024-08-11 17:20:45
190
原创 JS排序算法
1. 冒泡排序for(let i = 0; i < n - 1; i++) { for (let j = 0; j < n - 1 - i; j++) { if (arr[j] > arr[j + 1]) { const temp = arr[j]; arr[j] = arr[j + 1]; ...
2022-06-28 20:28:29
164
原创 支付宝小程序唤起独立签约
支付宝小程序唤起独立签约，需要通过alipay.user.agreement.page.sign接口获取签约字符串signStr，然后调用my.paySignCenter API在支付宝小程序内唤起周期扣款签约页面。
2022-06-27 16:09:41
1338
原创 SQL优化几种方法
在项目维护过程中，经常会遇到一些因为数据库查询速度慢导致页面加载缓慢的问题。这种情况下我们主要考虑SQL优化，通常SQL优化的目的就是减少语句执行时间，提高代码的执行效率。面对执行时间较长的SQL语句，主要有以下几种思路：......
2021-11-08 20:47:42
1788
原创 支付宝小程序唤起支付
支付是小程序生态中的重要一环，但支付宝给出的文档确不够详细，大大增加了小程序的开发难度，本文旨在说明支付宝小程序唤起支付的详细过程，用以降低开发文档的阅读难度。小程序支付需要配置能力列表中的小程序支付能力和获取会员基础信息的能力。根据小程序API文档给出的说明，my.tradePay是用于发起支付的 API，实例代码如下：// .jsmy.tradePay({ // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no t
2021-10-31 11:46:19
9006
1
原创 css 特殊属性用法
1. vertical-align只能应用于内联元素和display为table-cell的元素。inline-block 元素没有包含内联元素或者overflow不是visible时，baseline位置就是底部margin位置，否则就是内容baseline位置。2. borderborder设置为transparent 可以用于增加button点击范围。3. inline-......
2020-11-15 11:33:54
165
原创 webpack4用法
1. entrywebpack的入口// 单文件写法entry: { index: '/app/index.js', about: '/app/about.js',}// 多文件写法，将多个文件打包到同一个bundle中entry: { index: ['webpack-hot-middleware/client', '/app/index.js'],...
2020-11-15 11:32:50
255
原创 如何使用EXISTS和IN的写出易于理解的SQL语句
使用EXISTS和IN的写出易于理解的SQL语句EXISTS的用法IN的用法EXISTS和IN的用法比较如何用EXISTS和IN写出易于理解的SQL语句我们在使用数据库查询语句时，经常会用到EXISTS和IN这两个关键字，但有些时候使用他们写出的SQL语句并不是很容易理解，接下来让我们探讨一下如何使用EXISTS和IN写出易于理解的SQL语句。EXISTS的用法EXISTS通常用于不需要JOIN另外一张表，但需要根据这张表的字段进行筛选时。例如：// 创建A和B两张表CREATE TABLE A(
2020-11-15 11:30:50
112
原创 跨数据库表同步
工作中经常会遇到因为数据量过大而带来的数据迁移与拆分，根据数据表中记录条数的不同，需要采取的策略也不尽相同。数据量较小的表例如：从数据库A中的tableA同步到到数据库B中的tableB1、为了保证保证数据库A和数据库B中的表可以保持准确可用，通常会在数据库B中建立一张临时表temp。2、将数据库A中的tableA表跟数据库B中的临时表比较，删除tableA中已经删除的数据，增加tableA中新增的数据，更新表中不同的数据。防止因数据库断开连接造成的问题。3、待临时表更新完成，在同步到t
2020-11-12 21:29:11
1334
原创 CSS网页变灰
IE7, 8, 9body { filter: gray;}IE10, 11由于grayscale.js会使页面渲染速度变慢，而且会在IE低版本下无效，所以要判断浏览器版本，给IE10, 11单独使用。<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/j...
2020-04-06 11:21:48
313
原创 装饰者模式
装饰者模式就是一种给对象动态添加职责的模式。装饰者模式能够在不改变对象自身的情况下，在程序运行期间动态的给对象添加职责。我们可以使用AOP来装饰函数：Function.prototype.before = function(beforeFunc) { var _self = this; // 保存原函数的引用 return function() { // ...
2019-06-01 21:42:15
149
原创 职责链模式
职责链模式的定义是：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。假设我们负责一个售卖手机的电商网站，经过分别交纳 500 元定金和 200 元定金的两轮预定 后（订单已在此时生成），现在已经到了正式购买的阶段。公司针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过 500 元定金...
2019-05-30 21:34:11
195
原创 发布-订阅模式
发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。发布—订阅模式可以广泛应用于异步编程中，这是一种替代传递回调函数的方案。 比如，我们可以订阅 ajax 请求的 error、succ 等事件。或者如果想在动画的每一帧完成之后做一 些事情，那我们可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发...
2019-05-27 22:30:41
239
原创 策略模式
策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。策略模式可用于缓动动画，表单验证等方面。下面的代码是用于表单验证的策略模式。/*******************策略类********************/var strategies = { isNonEmpty: function(value, errorMsg){ ...
2019-05-26 16:47:39
107
原创 单例模式
JavaScript单例模式的核心是确保只有一个实例，并提供全局访问。var getSingle = function(fn) { var result; return function() { return result || (result = fn.apply(this, arguments)); }}...
2019-05-26 15:33:08
106
原创 原型模式
原型模式是一种用于创建对象的模式，原型模式不关心对象具体类型，而是通过克隆一个已有对象来创建新的对象。JavaScript原型继承遵循以下规则：所有数据都是对象。 得到一个对象，不是通过实例化类，而是通过克隆一个对象生成的。 对象会记住他的原型。 当一个对象无法响应一个请求时，会将该请求委托给自己的原型。...
2019-05-26 14:46:27
102
转载 实现new操作符
new操作符返回一个对象，所以需要在函数内部返回一个对象。这个对象，也就是构造函数中的this，可以访问到挂载在this上的任意属性。这个对象可以访问到构造函数原型上的属性，所以需要将对象与构造函数链接起来。只有返回值是对象，才进行正常处理。const create = (constructor, ...args) => { let obj = {}; Ob...
2019-05-19 10:59:49
215
转载 JavaScript深度优先遍历和广度优先遍历
深度优先遍历DFS假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起始点，重复上述过程，直至图中所有顶点都被访问到为止。// 用递归进行深度优先遍历function deepFirstSearch(node...
2019-04-14 14:08:06
1843
转载 节流和防抖的个人见解
防抖（debounce），是指在触发事件后n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。function debounce(func, wait) { let timer; return function () { const context = this; const args = arguments; ...
2019-04-14 13:31:05
97
转载 ['1', '2', '3'].map(parseInt) what & why ?
parseIntparseInt函数接受一个字符串作为参数，返回一个指定基数的整数 。const intValue = parseInt(string[, radix]);string：要被解析的值。radix：一个介于2和36之间的整数，默认为10。返回值：整数或者NaN。mapmap方法对数组中的每一项执行函数，返回一个由每一项执行函数的结果组成的数组。va...
2019-04-14 11:57:31
190
转载 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
key的作用就是给每一个VNode一个唯一的key，通过key可以更准确更快的拿到VNode。vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应的旧节点。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。在不带key的情况下...
2019-04-14 11:24:30
2308
1
转载 DOM中的范围
DOM2级遍历和范围模块定义了范围（range），通过范围可以选择文档中的一个区域，而不必考虑节点的界限。在常规的DOM操作不能有效地修改文档时，使用范围往往可以达到目的。<!DOCTYPE html><html> <body> <p id="p1"><b>Hello</b> world!<...
2019-03-31 22:09:11
345
原创 js数组相关操作
一、创建一个新的数组有两种方法：1. 字面量表示法const array = ['red', 'green', 'blue'];2. 构造函数创建const array = new Array();二、向数组中插入/删除元素删除数组中的第一个/最后一个元素// shift删除数组的第一个元素，并返回第一个元素的值const first = ['red', '...
2019-03-10 11:34:21
584
原创 图标与内容文字垂直对齐
1.如果图标较小，可以使其高度为1ex(即字母x的高度)，由于字母x是一个标准居中的字母，所以图标与文字天然居中对齐。.icon { display: inline-block; width: 20px; height: 1ex; background: url(arrow.png) no-repeat center;}2.如果图标较大，推荐使用ver...
2019-02-25 22:02:11
619
原创 设置元素垂直水平居中
// 垂直居中的几种方式// 1.元素的宽高已知，可以用绝对定位，top/left设为（50%-高/宽的一半）实现.main { position： absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em;}// 2.宽高未知，利用绝对定位以及t...
2019-02-25 21:40:45
203
原创 text-align: justify列表的两端对齐布局
通过设置inline-block与justify实现列表的两端对齐布局，但是处于列表最后一行的元素却无法对齐，我们通过在最后一行放置一个高度为0，宽度100%的inline-block不可见元素来充当最后一行，可以使得所有的可见元素实现两端对齐的布局。ul { text-align: justify; }ul > li { display: inline-block; }span...
2019-02-19 22:09:05
458
原创 隐藏logo对应元素内的文字
1. display/visibility直接隐藏文字, 但屏幕阅读设备会忽略。display: none;visibility: hidden;2. font-size设置为零，文字会直接被隐藏掉。font-size: 0;3. text-index元素设置一个较大的文字缩进，会使得文字移出屏幕，屏幕阅读设备无法读取文字。text-indent: -9999px;...
2019-02-18 21:58:55
657
原创 触发层叠上下文的CSS属性
层叠上下文，又称stacking context，是指元素在垂直于屏幕的z轴上的排列布局。其中影响层叠上下文的属性包括以下几种：1. flex元素的子元素，同时z-index不是auto2. opacity值不为1的元素3. transform值不为none的元素4. position值为relative/absolute/fixed的元素当元素发生层叠时，当具有明显的层叠...
2019-02-18 21:46:22
567
转载 overflow: hidden;实现选项卡切换
锚点定位触发条件：1.URL 地址中的锚链与锚点元素对应并有交互行为；2.可 focus 的锚点元素处于 focus 状态。通过overflow: hidden;将其他选项卡隐藏，利用label和input的对应关系，使得点击label时input元素获得焦点。同时设为overflow: hidden;的元素依旧可以滚动，因此可以实现选项卡切换功能而不需要使用JavaScript。&l...
2019-02-16 18:09:29
294
转载 BFC 自适应布局
BFC全称为block formatting context，块级上下文结构，具有BFC结构的元素的内部元素不会影响外部元素的布局和结构。BFC可以由以下几种方式触发：<html>根元素 float不为none overflow不为visible position除relative和static display的值为inline-block或table-cellBFC...
2019-02-10 14:39:54
351
转载 marin实现的有趣效果
1. 等高布局// margin和padding高度抵消，但多了9999px可用高度，overflow使得视觉上等高。.container { overflow: hidden;}.column-left,.column-right { margin-bottom: -9999px; padding-bottom: 9999px;}// table-cell...
2019-02-08 10:19:07
233
转载 padding属性有趣的用法
1. 用padding实现三条杠菜单按钮.menu { width: 18px; height: 2px; padding-top: 4px; padding-bottom: 4px; border-top: 2px solid #f40; border-bottom: 2px solid #f40; background-clip: content-box; ...
2019-01-27 11:10:40
299
翻译 浏览器检测
根据浏览器特征来判断浏览器通常情况下比navigator对象更为有效。// Opera 8.0+const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;// Firefox 1.0+const i...
2019-01-19 09:38:29
374
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人