- 博客(51)
- 收藏
- 关注
RSS订阅原创 性能优化问题思考总结
在国际往返一屏项目中，由于去程和返程来回横滑切换时需要切换航班卡片展示形态，在一些热门航线如北京往返香港，去程列表航班卡片数百个，返程航班卡片数百个，一次切换形态，props发送变化会造成大量的父子组件重新渲染，组件的重新渲染又会引起大量曝光请求重新发送，使得页面性能消耗巨大，严重时能造成页面崩溃。线上版本中，无论是上下滑动还是左右横滑，都会发送大量曝光请求，当频繁滑动的时候，网络请求列表中同时发送的请求数量过大，导致页面卡顿甚至崩溃，避免大量曝光请求同步发送，本着。为确保提供良好的响应速度的用户体验，
2024-02-27 00:25:25
878
原创 记一次rax应用用户体验性能优化
对于前端开发攻城狮们来说，性能优化是一个永恒的话题。随着前端需求复杂度的不断升高，在项目中想始终保持着良好的性能也逐渐成为了一个有挑战的事情。本次分享简述我们在 Rax 项目中常用的一些性能优化方式，并将从近期的一个实际业务需求出发，讲述我在 Rax C端应用场景下所遇到性能问题排查时的心路历程。本次分享的优化内容，主要是指用户滑动屏幕浏览页面过程中所花费的单帧渲染耗时的降低比例。单帧渲染耗时通过 chrome dev tools 插件以及手淘端app dev tools测得。
2024-02-01 10:00:00
897
原创 精学JS：垃圾回收
本篇主要通过讲解 引擎底层的垃圾回收机制，了解更多的浏览器内核层面的东西，从而对 的内存管理以及内存溢出等形成一定的认识。在开始前，思考两个问题： 不管是什么样的计算机程序语言，运行在对应的代码引擎上，对应的使用内存过程大致逻辑是一样的，可以分为这三个步骤：与其他需要手动管理内存的语言不太一样的地方是，在 中，当我们创建变量（对象，字符串等）的时候，系统会自动给对象分配对应的内存。来看下面的例子。 当系统经过一段时间发现这些变量不会再被使用的时候，会通过垃圾回收机制的方式来处理掉这些变
2022-06-10 16:13:37
221
原创 精学JS：浏览器中的 EventLoop
无论是浏览器端还是服务端，都在使用 Eventloop，虽然两者机制不同，但都利用了 JavaScript语言的单线程和非阻塞的特点。 先讲解浏览器端的 Eventloop的运行机制，对浏览器端有了一定的理解之后，再设计一些 Node.js的 Eventloop的底层逻辑。 Eventloop 是 JavaScript引擎异步编程背后需要特别关注的知识点。JS在单线程上执行所有操作，虽然是单线程，但是能够高效地解决问题，并能给我们带来一种“多线程”的错觉，这其实是通过使用一些比较合理的数据结构来达到此效
2022-06-10 15:48:02
183
原创 精学JS：宏任务 & 微任务的运行机制
首先分析宏任务和微任务的运行机制，并针对日常开发中遇到的各种宏任务&微任务的方法，结合一些例子来看看代码运行的顺序逻辑，把这部分知识点重新归纳和梳理。 在日常开发中，例如 setTimeout和 promise都是经常会使用到的 JS方法。当这些方法变多了之后，再结合 JS的异步编程代码混合使用，最终的执行顺序也经常会让开发者迷惑，因此要把这些问题搞清楚，这部分还是有必要好好学习一下。在开始前请先思考一下：开始讲解正式内容之前，我们先看一段代码，算是开胃的前菜，如果之前对这部分知识稍有了解，一般都应该可以
2022-06-10 00:24:47
1575
原创 精学JS：浏览器引擎编译执行JS
分析浏览器引擎对 代码的编译情况，并结合日常的 开发经验，重新理解底层的编译解析机制。对其底层原理的理解，将有助于理解前端的跨端应用，以及一套代码生成多种小程序相关框架的底层逻辑.在开始前请先思考：当前百花齐放的编程语言，主要分为编译型语言和解释型语言。 像Java和 C++ 都是编译型语言；而 JavaScript和 ruby都是解释性语言，它们整体的执行速度都会略慢于编译型的语言。 为了提高运行效率，很多浏览器厂商在也在不断努力。目前市面上有很多种 JS 引擎，例如 JavaScriptCore、c
2022-06-09 21:21:06
348
原创 React：设计模式
与性能优化的视角相似，当我们谈论 React 设计模式时，实际上是在谈论“React 组件的设计模式”。在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：高阶组件（Higher Order Components）在概念上沿袭了高阶函数（Higher-Order Function）。这里再复习一下高阶函数的概念：接收函数作为输入，或者输出另一个函数的一类函数，就是高阶函数。 相应的，高阶组件指的就是参数为组件，返回值为新组件的函数。没错，高阶组件本质上是一个函数。下面是一个简单的高
2022-06-09 20:49:39
1513
原创 React：性能调优思路
React 应用也是前端应用，如果之前你知道一些前端项目普适的性能优化手段，比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等，那么这些手段对于 React 来说也是同样奏效的。 不过对于 React 项目来说，它有一个区别于传统前端项目的重要特点，就是以 React 组件的形式来组织逻辑：组件允许我们将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。因此，除了前面所提到的普适的前端性能优化手段之外，React 还有一些充满了自身特色的性能优化思路，这些思路基本都围绕“组
2022-06-09 17:54:18
189
原创 React：Redux中间件
结合 应用实例与 源码，对 中间件的实现原理进行分析。在此基础上，对“面向切面”这一经典的编程思想建立初步的认识。 在之前介绍 函数时，已经简单地提过中间件——中间件相关的信息将作为 函数的一个 类型的入参被传入。这里简单复习一下 的调用规则，示例代码如下： 可以看到，对外暴露了 这个方法。接受任意个中间件作为入参，而它的返回值将会作为参数传入 ，这就是中间件的引入过程。中间件的引入，会为 工作流带来什么样的改变呢？这里以 为例，从经典的“异步 Action”场景切入，一起看看中间件
2022-06-08 23:19:19
562
原创 React：Redux 设计思想
Redux 的设计在很大程度上受益于 Flux 架构，可以认为 Redux 是 Flux 的一种实现形式（虽然它并不严格遵循 Flux 的设定），理解 Flux 将帮助更好地从抽象层面把握 Redux。 Flux 并不是一个具体的框架，它是一套由 Facebook 技术团队提出的应用架构，这套架构约束的是应用处理数据的模式。在 Flux 架构中，一个应用将被拆分为以下 4 个部分。 这 4 个部分之间的协作将通过下图所示的工作流规则来完成配合：一个典型的 Flux 工作流是这样的：用户与 之间产生交互，通
2022-06-07 17:37:37
231
原创 React：组件间数据流动（下）
上篇文章中，讲述了 React 数据流方案中风格相对“朴素”的 Props 单向数据流方案，以及通用性较强的“发布-订阅”模式。本篇文章中将认识 React 天然具备的全局通信方式“Context API”，并对 Redux 的设计思想和编码形态进行初步的探索。使用 Context API 维护全局状态 Context API 是 React 官方提供的一种组件树全局通信的方式。在 React 16.3 之前，Context API 由于存在种种局限性，并不被 React 官方提倡使用，开发者更多的是把
2022-06-06 23:38:32
779
原创 React：组件间数据流动（上）
当我们谈论生命周期时，其实谈论的是组件的“内心世界”。但组件和人是一样的，它不仅需要拥有丰富的内心世界，还应该建立健全的“人际关系”，要学会沟通和表达。 下面将一起探索蕴含在 React 组件中的“沟通与表达”的艺术。我们知道，React 的核心特征是“数据驱动视图”，这个特征在业内有一个非常有名的函数式来表达： 上面表达式的含义反应了一个结论：React 的视图会随着数据的变化而变化。数据这个角色在 React 中的地位可见一斑。 在 React 中，如果说两个组件之间希望能够产生“耦合”（即 A
2022-06-06 23:02:07
185
原创 React：Fiber设计思想
React 团队在“React 哲学”中对 React 的定位： “快速响应”可以说是 React 团队在用户体验方面最为要紧的一个追求。正是出于对“快速响应”的执着，React 才会想方设法把原本 O(n3) 的 Diff 时间复杂度优化到了前无古人的 O(n)。 随着时间的推移和业务复杂度的提升，React 曾经被人们津津乐道的 Stack Reconciler 也渐渐在体验方面显出疲态。为了更进一步贯彻“快速响应”的原则，React 团队“壮士断腕”，在 16.x 版本中将其最为核心的 Diff
2022-06-06 12:56:48
193
原创 React：setState同步or异步？
‘最熟悉的陌生人’当你入门React的时候，接触的第一波API里一定有setState-----数据驱动视图。当你项目的数据流乱作一团的时候，始作俑者也往往是setState----工作机制太复杂，文档又不说清楚。setState 的工作机制渐渐与 React 调和算法并驾齐驱，成了 React 核心原理中区分度最高的知识模块之一。“神奇时刻”到底何时发生?state到底是在哪个环节发生了变化呢?所谓的“恰恰好”又如何界定呢?关于setState的问题，由下面一段代码说起：给出一个这样的 App 组
2022-06-06 00:21:36
588
原创 React：栈调和(Reconciliation)
“调和”和“Diff”“调和”又译为“协调”Virtual DOM是一种编程概念。在这个概念里，UI以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如ReactDOM等类库使之与“真实的”DOM同步。这一过程叫作协调(调和)。调和过程并不能和Diff划等号，调和是“使一-致”的过程，Diff是“找不同”的过程。Reconciler (调和器)的源码位于src/renderers/shared/stack/reconciler这个路径调和器所做的工作包括组件的挂载、卸载、更新等过程。如今大
2022-06-05 22:09:12
244
原创 React：真正理解虚拟DOM
在mvvm这个框架领域，到现在仍然存在一个及其热门的面试问题：为什么要使用虚拟DOM？一般的回答如下：本文将通过另一个视角，给出不同的答案，本文不局限于点对点看待问题本硕本身，而是放在一个足够长的、合理的上下文中进行讨论。在 React 中，render 执行的结果得到的并不是真正的 DOM 节点，结果仅仅是轻量级的JavaScript 对象，我们称之为 virtual DOM。虚拟DOM本质上是JS和DOM之间的映射缓存，在形态上是一个能够描述DOM结构的JS对象。虚拟 DOM 是 React 的一大亮点
2022-06-05 18:31:42
436
原创 React16：Hooks总览
React官网和2018年的React conf上都提到了动机这个东西，那么出现hooks的动机是什么？是什么推动了hooks的出现？先来看一下Hooks的动机。1.在组件间复用状态逻辑很难React没有提供可复用性行为“附加”到组件的途径，在写类组件的时候，一个类是一个闭包并且state在组件间传递并不怎么友好，虽然可以使用props和高阶组件来解决，但是这样会组件的结构更麻烦。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件
2022-06-01 23:04:38
432
1
原创 Vue — 详解mixins混入使用
前言当我们的项目越来越大，我们会发现组件之间可能存在很多相似的功能，你在一遍又一遍的复制粘贴相同的代码段（data，method，watch、mounted等），如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了Mixins特性一、什么是Mixins？mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、compone
2021-07-02 22:37:25
1588
3
原创 Vue 依赖注入 - Provide/Inject
# 背景 关于Vue组件的通讯方式相信大家能倒背如流父子组件：通过prop，$emit，【$root，$parent，$children】 非父子组件：Vuex实现，父子层层传递、中央事务总线Bus，$ref# 功能 通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系.
2021-06-27 19:20:20
349
原创 记一次promise不常见问题
记一次面试遇到的promise题目varp=newPromise().then(f1,f2).then(f3,f4)面试官：请问，假设promise中执行了reject，f2函数中调用了return false（并未调用resolve和reject），请问f3函数和f4函数哪个将会执行？我：？？？没执行resolve和reject，那么就不会转化fulfill状态或者rejected状态，f3和f4都不会执行吧面试官：你确定？好了，我们上代码验证var p = n...
2021-04-15 22:52:54
218
原创 手写promise
promise理解Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果：什么时候会用到过一段时间？是异步操作异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等Promise的状态一个Promise的当前状态必须为以下三种状态中的一种等待态（Pending）处于等待态时，promise需满足以下条件：可以迁移至执行态或拒绝态执行态（Fulfilled）处于执行态时，promise 需满足以下条件：不能迁移至其他
2021-03-06 20:30:39
110
原创 深入理解async/await来处理异步
目前async/await已经被标准化，我们需要尽快将学习进程提上日程。 先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行。下面写一个async函数：async function timeout() { return 'hello world';}复制代码语法很简单，就是在函数前面加上async关键字，来表示它是异步的，那怎么调用呢？async函数也是函数，平时我们怎么使用
2021-03-02 16:16:18
787
2
原创 解决TS报错Property ‘style‘ does not exist on type ‘Element‘
在使用queryselector获取一个dom元素，编译时却报错说property 'style' does not exist on type 'element'。原因：这是typescript的类型检查导致的，需要在querySelector方法前面加个类型断言。let frameContainObj = document.getElementById("model_view_container")let iframeObj= <HTMLElement>frameContainO
2021-02-26 20:39:10
5434
原创 wx:for,wx:for-items,wx:for-item,wx:key用法之我见
wx:for主要用于循环输出数组,对象等;const cityList= [ { "id": "35", "provincecode": "150000", "city": "广州", "code": "152900", "initial": "A" },{ "id": "38", "provincecode": "210000", "city": "深圳", "code": "210300", "initial": "A" }]页面代码: <view class=
2021-02-17 19:01:22
601
原创 Vue源码探秘之 数据响应式原理
Vue源码探秘之 数据响应式原理从MVVM模式说开去模板<p>我{{age}}岁了</p>数据变化this.age++;数据变化，视图会自动变化侵入式和非侵入式尤小右找到了“上帝的钥匙”Object.defineProperty() 数据劫持 / 数据代理利用JavaScript引擎赋予的功能，检测对象属性变化，仅有“上帝的钥匙”不够，还需要设计一套精密的系统Obj...
2021-02-11 11:24:06
217
原创 Vue源码探秘之 虚拟DOM和diff算法
Vue源码探秘之 虚拟DOM和diff算法请扪心自问：你到底懂不懂虚拟DOM和diff算法？？先简单介绍一下虚拟DOM和diff算法新虚拟DOM和老虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的DOM上。 • snabbdom是瑞典语单词，单词原意“速度”； • snabbdom是著名的虚拟DOM库，是diff算法的鼻祖，Vue源码借鉴了snabbdom； • 官方git：https://github....
2021-02-08 14:48:37
170
原创 Vue源码探秘之 mustache模板引擎
什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案 历史上曾经出现的数据变为视图的方法• 纯DOM法：非常笨拙，没有实战价值 • 数组join法：曾几何时非常流行，是曾经的前端必会知识 • ES6的反引号法：ES6中新增的`${a}`语法糖，很好用 • 模板引擎：解决数据变为视图的最优雅的方法mustache的基本使用• mustache官方git： https://github.com/janl/mustache.js • mustac...
2021-02-05 21:08:22
439
3
原创 express和koa
历史1. ExpressExpress是第一代最流行的web框架，它对Node.js的http进行了封装，用起来如下：var express = require('express');var app = express();app.get('/', function (req, res) { res.send('Hello World!');});app.listen(3000, function () { console.log('Example app list
2021-02-04 18:09:13
275
原创 前端各种表单校验规则JavaScript/TypeScript实现
import { Injectable } from '@angular/core';import { FormControl, AbstractControl, ValidatorFn } from '@angular/forms';import { isIPv4, isIPv6 } from './ip';const is: any = (window as any).is;const REGEXES = { positiveInt: /^[1-9]\d*$/, filePat.
2021-01-26 18:00:20
875
原创 jquery.fileDownload.js使用
jquery.fileDownload.js1，简短说明使用 jquery.fileDownload.js 增加前后端交互友好性2，实例filedownload组件HTML部分：<div class="download-container"> <!--初始化时显示--> <nz-dropdown *ngIf="!creatFileIng"> <button nz-button nzType="primary" .
2021-01-24 16:38:57
2797
3
原创 Angular路由守卫
一、路由守卫当用户满足一定条件才被允许进入或者离开一个路由。路由守卫场景：只有当用户登录并拥有某些权限的时候才能进入某些路由。一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。当用户未执行保存操作而试图离开当前导航时提醒用户。Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子实现上面场景。CanActivate: 处理导航到某路由的情况。 CanDeactivate: 处理从当前
2021-01-24 16:22:53
2162
1
原创 ng-zorro-antd中nz-table的问题
前端项目中，我们经常会使用阿里开源的组件库：ant-design，其提供的组件已经足以满足多数的需求，拿来就能直接用，十分方便，当然了，有些公司会对组件库进行二次封装，改造成极具自家风格的产品。在本系列的文章中，不谈高大上的东西，不深究底层源码，只分享一些项目中遇到的小问题。表格（table）——以为是组件库的bug，没想到……不知道正在阅读本文的读者有没有经历过：在使用<nz-table></nz-table>的时候，删除表格的最后一项时，展示“暂.
2021-01-22 09:48:08
1632
原创 cookie与session
cookie与session的区别cookie和session有着千丝万缕的联系，本文将详细介绍二者的区别。1、存储位置不同cookie的数据信息存放在客户端浏览器上。session的数据信息存放在服务器上。2、存储容量不同单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。3、存储方式不同cook
2021-01-10 11:37:59
91
转载 防抖和节流之我见
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。html 文件中代码如下<div id="content" style="height:150px;line-height:150px;text-align:cent
2020-12-02 21:39:23
86
转载 Http强缓存和协商缓存
本文主要讲解浏览器端的缓存，缓存的作用是不言而喻的，能够极大的改善网页性能，提高用户体验。1、浏览器缓存缓存这东西，第一次必须获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。下面用两幅图来描述浏览器的缓存是怎么玩的，让大家有个大概的认知。浏览器第一次请求时：浏览器后续在进行请求时：从上图可以知道，浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存，浏览器...
2020-12-02 21:11:41
93
原创 React学习笔记（day01）
React 构建用户界面的JavaScript库，主要用于构建UI界面。Instagram，2013年开源。特点：声明式的设计 高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。 灵活，跟其他库灵活搭配使用。 JSX，俗称JS里面写HTML，JavaScript语法的扩展。 组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react 单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据创建项目1.通过script引入使用，仅用于学..
2020-10-10 16:13:03
107
3
原创 前端优化网页加载性能
如何做到前端性能优化服务器角度采取CDN加速 开启gzip压缩 允许使用强缓存或协商缓存 增加服务器带宽客户端角度合理组织CSS、JavaScript代码位置 减少DOM操作、添加事件委托 部分操作可设置防抖和节流 对于可预见的操作采取preload或prerender的预加载 对于图片可以懒加载 合并CSS图片（精灵图/雪碧图） 减少使用iframe资源优化打包角度使用打包工具将Js文件、CSS文件和静态文件进行恰当打包处理。...
2020-10-04 16:25:04
83
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人