- 博客(75)
- 收藏
- 关注
RSS订阅原创 requestIdleCallback
利用浏览器的空余时间执行任务，如果有更高优先级的任务要执行时，当前执行的任务可以被终止，优先执行高级别任务。
2023-11-16 08:39:51
189
原创 React Virtual DOM及Diff算法
在React中， 每个DOM对象都有一个对应的Virtual DOM对象，它是DOM对象的JavaScript对象表现形式，其实就是使用JavaScript对象来描述DOM对象信息，比如DOM对象的类型是什么，她身上有哪些属性，它拥有哪些子元素。可以把Virtual DOM对象理解为DOM对象的副本，但是它不能直接显示在屏幕上。
2023-11-14 17:39:05
461
原创 12 Web全栈 组件化设计（3）
编写帮助文档最极简的方式就是直接使用MarkDown语法编写项目的readme.md说明文件，这种方式效率高，开发速度快，不过复杂功能的UI组件无法直接在MD文件中使用所以会导致文档不生动，提高学习门槛。还有其他方式就是通过网页制作的方式直接通过我们的UI组件库创建一个新项目，通过编程的方式编写组件库的开发文档，这种方式可以非常生动的描绘组件库的文档，不过开发过程复杂，没有任何可复用的编码，所以性价比极低。
2023-07-07 14:53:04
701
原创 11 Web全栈 组件化设计（2）
npm pack命令可以将node的项目在本地构建成安装包，类似于java项目中构建jar包的过程，在命令行工具中输入npm pack后会生成.tgz文件， 如果需要安装这个npm到全局，只需要npm i <tgz文件地址> -g。nrm是适用nodejs开发的一个可以在shell中运行的命令行工具，他的主要作用就是帮助开发者切换和管理大量的npm镜像地址，保证在合适的时机适用最简单的命令随时切换镜像地址而不需要花费精力去记住大量的命令和信息。解析package.json中的bin配置。
2023-07-05 10:05:20
123
原创 10 Web全栈 组件化设计
前端技术体系庞大，层级也非常分明，在架构设计领域中不能一概而论，任何应用种类都有自己独立的架构体系。比如在前端开发领域，在框架基础上进行应用构建的开发者锁思考的问题，与在组件库设计方面的开发者所思考的问题是完全不同的。所以在架构设计方面是由层次划分的，答题可以分为四个层次。即应用在整个系统内的关系，如与后台服务器通信，与第三方集成即应用外部的整体架构，如多个应用之间如何共享组件、如何通信等即应用内部的模块架构，如代码的模块化、数据的状态的管理等。即从基础设施来保障架构实施。
2023-07-04 16:25:15
357
原创 09 Web全栈 亘古不变的JavaScript
基于以上，我们要确认一个统一的思想就是，作为业务开发者，重点是在各种框架的运用上，而作为架构师和技术专家，重点反而在基础编程思想和基础编程技术上。只有基本功扎实并且有国人思想的人才能构建出令大部分程序员折服的框架，并且能为现代应用开发在技术产出环节上帮助到更多的开发者，这个就是架构师、技术专家的作用。
2023-07-04 15:03:28
180
原创 08 Web全栈 软件架构（思维认知）
不以实现为目的的架构都是耍流氓，所以任何软件架构，软件开发和互联网行业中的目的都是落地和实现。一个无法上线的应用架构，算不上好的软件架构一个没有人能完成开发的软件架构，算不上具有可行性的软件架构一个在现在技术上不可行的架构，算不上合理的软件架构。所以一旦我们谈及软件架构，需要讨论的第一个重点就是因地制宜。比如在一些互联网公司的软件架构，都属于行业的顶级架构设计方案，但是该架构在中小型企业并不适合的架构，结合以上三点。
2023-07-03 15:44:44
298
原创 07 Web全栈 ES6规范（Proxy与Reflect）
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。（不建议使用）创建一个可撤销的Proxy对象。
2023-06-29 09:40:04
568
原创 06 Web全栈 ES6规范(可迭代协议和迭代器协议)
迭代器协议不可能知道一个特定的对象是否实现了迭代器协议，然而创造一个同事满足迭代器协议和可迭代协议的对象是很容易的。这样就允许一个迭代器能被不同希望迭代的语法方式所使用。因此，很少只实现迭代器协议而不实现可迭代协议。for…of / … / Array.from 使用了迭代器协议[] / Set / Map / generator 实现了Iterators。
2023-06-28 17:05:54
480
原创 05 Web全栈 面向对象编程/原型链/继承
什么是面向对象编程编程思想面向过程：关注的是动词，分析出解决问题所需要的所有步骤，针对所有步一一实现一些函数，按照顺序来调用函数面向对象：关注的是主谓，把构成这个问题的事务，拆解成一个个对象，这一个个对象是为了描述这个对象在当前问题中的各种行为方式面向对象的特性封装：让使用对象的人不用去考虑内部的实现，对象对外暴露出一些api，提供给使用方使用。继承：为了代码的复用，从父类继承他允许继承的属性和方法多态：不同的对象作用于同一个操作，然后产生不同的结果。多态的思想实际上把“想做什么”和“谁去做”
2023-06-28 10:29:10
243
原创 04 Web全栈 闭包/this指针
当函数执行时，会创建一个执行上下文的环境，分为创建和执行两个阶段创建阶段创建阶段，指函数被调用但还未执行任何代码时，此时创建了一个拥有3个属性的对象代码执行阶段代码执行阶段主要的工作是1、分配变量、函数的引用、赋值；2、执行代码函数作用域变量是在定义时栈向外找，不是调用时向外找let 经过babel编译 直接编译成var， 但是会有很多hack技巧高级程序设计中，闭包是指有权访问另一个函数作用域中的变量的函数，可以理解为能够读取其它函数内部变量的函数this场景1：函数直接调用 -> 全局或un
2023-06-27 14:54:44
161
原创 03 Web全栈 浏览器内置对象/事件/ajax
浏览器是一个JS的运行时环境，它基于JS解析器的同时，增加了许多环境相关的内容，用一张图表示各个运行环境和JS解析器的关系如下：我们把常见的，能够用JS这门语言控制的内容称为一个JS的运行环境，常见的运行环境又Nodejs，浏览器，小程序，一些物联网设备等等，所有运行环境都必须有一个JS的解释器，在解释器层面符合ECMAScript规范，定义了JS本身语言层面的东西如关键字，语法等等。在每个环境中，也会基于JS开发一些当前环境的特性，例如Nodejs中的global对象，process对象，浏览器
2023-06-27 10:36:26
547
原创 02 Web全栈 模块化
在web开发的早期，为了团队协作和代码维护的方案，许多开发者会选择JavaScript代码分开写在不同的文件里面，然后通过多个script标签来加载他们
2023-06-26 13:21:13
372
原创 01 Web全栈-Promise
javascript是一门单线程语言，所以早期我们解决异步的场景时，大部分情况都是通过回调函数来进行。例如在浏览器中发送ajax请求，就是常见的一个异步场景，发送请求后一段时间服务器响应之后我们才能拿到结果，如果我们希望在异步结束之后执行某个操作，就只能通过回调函数这样的方式进行操作如果后续还有内容需要在异步函数结束时输出的话，就需要多个异步函数进行嵌套，非常不利于后续的维护。（回调地狱）
2023-06-21 13:38:18
343
原创 7、深入掌握TS-声明文件
关键字declare 表示声明的意思 我们可以用它来做出各种声明declare let/const 声明全局变量declare function 声明全局方法declare class 声明全局类declare enum 声明全局枚举类型declare namespace 声明含有（子属性）全局对象interface/type 声明全局类型为什么interface/type不用declare？js中没有这两种类型。
2023-06-20 10:53:30
396
原创 5、深入掌握TS-泛型
一组具有相同名字，不同参数列表和返回值无关并且具有一个实现签名和一个或多个重载签名的函数。表示获取一个类或对象类型或者一个接口类型的所有属性名[key] 组成的联合类型。实现签名参数及返回类型 必须完全兼容重载签名。实际应用：要求创建对象的时候都统一打印一句话。可以代表任意一个类的函数类型。
2023-06-19 10:04:57
75
原创 1、深入掌握TS
方法参数不能定义为具体类型，只能初级使用number string基本类型替代，降低了代码的可读性和可维护性。any和unknown可以是任何类的父类(等号左边)，所以任何类型的变量都可以赋值给any类型或者unknown类型的变量。Object：除了null 和 undefined不能赋值其他都可以。新的接口只是在原来接口继承之上增加了一些属性或方法，这时就用接口继承。enum：即是数据类型，也是变量。{}: Object的简写方式。另一种定义对象类型的类型。
2023-06-14 14:13:27
1036
翻译 webpack究竟解决了什么
webpack最初的目标就是实现前端项目的木块化， 也就是说他所解决的问题是如何在前端项目中高效的管理和维护项目中的每一个资源。如果要搞明白webpack， 就必须先对他想要解决的问题或者目标有一个充分的认识， 带着问题再去理解他的很多特性， 学习思路会更清晰， 理解也会更深刻。模块化的演化过程随着互联网的深入发展， 前端技术标准发生了巨大的改变。 早起的前端技术标准根本没有预料到前端...
2020-04-20 10:05:40
993
翻译 前端路由原理解析和实现
什么是前端路由？路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。如何实现前端路由？要实现前端路由，需要解决两个核心： 如何改变 URL ...
2019-06-05 15:57:55
395
2
翻译 JavaScript是如何工作的（二）
对于任何一个程序员来说， 最关注的两个问题无非就是：时间复杂度和空间复杂度。第一部分介绍了V8为改进JavaScript执行时间所做的速度提升和优化， 第二部分则将着重介绍内存管理方面内存堆每当你在 JavaScript 程序中定义了一个变量、常量或者对象时，你都需要一个地方来存储它。这个地方就是内存堆。当遇到语句 var a = 10 的时候，内存会分配一个位置用于存储 a 的值...
2019-06-05 15:31:08
148
翻译 JavaScript 中的异步模式
JavaScript 中的各种异步模式Callback我们知道在 JavaScript 中，函数是一等公民，当一个函数传入另外一个函数当作参数时，我们就可以把这个函数叫做 Callback 函数。而这里的「另外一个函数」也有一个常见的名字，Hight order function 高阶函数。需要澄清的一点是，Callback 并非都是异步执行的。比如在我们常用的Array.protot...
2019-06-04 09:48:49
344
翻译 Chrome Devtools Performance使用指南
运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevTools Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标...
2019-06-03 17:49:06
287
转载 Performance、LightHouse 与性能 API
性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具供大家选择，本节我们就一起来研究一下这些工具的用法。可视化监测：从 Performance 面板说起Performance 是 Chrome 提供给我们的开发者工具，用于记录和分...
2019-06-03 16:14:43
385
原创 事件的节流与防抖
// 节流函数1 function throttle (fn, interval) { // last 上次触发回调的时间 let last = 0; return function () { let context = this let args = arguments let now = +new Date() ...
2019-06-03 15:21:39
112
原创 首屏优化实践——lazy-load
首先新建一个空项目，目录结构如下：我们在 index.html 中，为这些图片预置 img 标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
2019-06-03 14:22:05
144
翻译 回流（Reflow）与重绘（Repaint）
回流：当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改了元素的宽高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会收到影响）然后在将计算的结果绘制出来。这个过程就是回流（也叫重排）。重绘：当我们对DOM的修改导致了样式的变化 却并未影响几何属性（比如修改了颜色或背景色）时， 浏览器不需要重新计算元素的几何属性，直接为该元素绘制新的样式（跳过了回流环节）。...
2019-06-03 13:51:53
194
翻译 Event Loop 与异步更新策略
Vue 和React都实现了异步更新策略。虽然实现的方式不尽相同， 但都达到了减少DOM操作 避免过度渲染的目的。通过研究框架的运行机制， 其设计思路将深化我们对DOM优化的理解， 拓宽我们对DOM实践的认知。Event LoopMicro-Task与Macro-Task事件循环中的异步队列由两种：macro（宏任务）队列和micro（微任务队列）。常见的macro-task比...
2019-06-03 13:09:19
173
翻译 DOM 优化原理
DOM 为什么这么慢因为收了“过路费”把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS...
2019-05-31 16:43:01
141
翻译 浏览器背后的运行机制
浏览器的心浏览器的心， 说的就是浏览器的内核。在研究浏览器微观运行机制之前， 我们首先要对浏览器内核有一个宏观的把握。许多工程师因为业务需要， 免不了需要去处理不同浏览器下代码渲染结果的差异性。这些差异性正是因为浏览器内核的不同而导致的——浏览器内核决定了浏览器解释网页语法的方式。浏览器内核可以分两个部分：渲染引擎和js引擎。早期渲染引擎和JS引擎并没有十分明确的区分，但随着JS引擎越...
2019-05-31 16:12:47
184
翻译 服务端渲染
服务端渲染的探索与实践服务端渲染（SSR）近两年炒得很火热，相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”（服务端渲染的运行机制）、“为什么”（服务端渲染解决了什么性能问题 ）、“怎么做”（服务端渲染的应用实例与使用场景）这三个点，对服务端渲染进行探索。服务端渲染是一个相对的概念，它的对立面是“客户端渲染”。在运行机制解析这部分，我们会借力客户端渲染的概念，来帮大家理解服务端...
2019-05-31 09:38:49
221
翻译 JavaScript 究竟是如何工作的？（一）
什么是 V8？JavaScript运行的背后发生了什么？1.编程语言是如何工作的？在开始讲解 JavaScript 之前，我们首先要理解任意一门编程语言的基本工作方式。电脑是由微处理器构成的，我们通过书写代码来命令这台小巧但功能强大的机器。但是微处理器能理解什么语言？它们无法理解 Java，Python 等语言，而只懂机器码。用机器语言或汇编语言编写企业级代码是不可行的，因此我们需...
2019-05-31 09:19:55
480
翻译 CDN的缓存与回源机制解析
CDN（Content Delivery Network, 内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本， 因此服务器可以根据哪些服务器与用户距离更近， 来满足数据的请求。 CDN提供快速服务， 较少受高流量影响。为什么要用CDN缓存、本地存储带来的性能提升，是不是只能在“获取到资源并把它们存起来”这件事情发生之后？也就是说，首次请求资源的时候，这些招数都...
2019-05-30 11:12:47
7530
翻译 本地存储——从 Cookie 到 Web Storage、IndexedDB
故事的开始：从 Cookie 说起Cookie 的本职工作并非本地存储，而是“维持状态”。在 Web 开发的早期，人们亟需解决的一个问题就是状态管理的问题：HTTP 协议是一个无状态协议，服务器接收客户端的请求，返回一个响应，故事到此就结束了，服务器并没有记录下关于客户端的任何信息。那么下次请求的时候，如何让服务器知道“我是我”呢？在这样的背景下，Cookie 应运而生。Cooki...
2019-05-29 16:02:12
239
翻译 浏览器缓存机制介绍与缓存策略剖析
缓存可以减少网络IO消耗，提高访问速度。浏览器缓存是一种操作简单，效果显著的前端性能优化手段。对于这个操作的必要性，Chrome官方给出的解释更具有说服力通过网络获取内容即速度缓慢，又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信， 这会延迟浏览器获得和处理内容的时间， 还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面很多时候，...
2019-05-29 09:47:01
123
Electron开发仿网易云音乐播放器（视频）
2023-02-28
高级前端进阶必修，自主打造高扩展的业务组件库 （视频）
2023-02-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人