- 博客(106)
- 收藏
- 关注
RSS订阅原创 Vue2-虚拟滚动
<template> <div class="scroll-container" ref="scrollContainer"> <div class="scroll-viewport" :style="{transform: `translateY(${offset}px)`}"> <div class="scroll-item" v-for="item in visibleData" :key="item[keyValue] || item
2022-05-05 14:51:37
833
原创 Events
function EventEmitter() { this._events = {}; } EventEmitter.prototype.on = function (eventName, callback) { if (!this._events) { this._events = {}; // EventEmitter被继承时，继承者也可以使用 } let events = this._events[eventName] || []; ..
2022-04-28 15:12:02
90
原创 从输入URL到浏览器显示页面发生了什么以及优化
从输入URL到浏览器显示页面发生了什么？输入url地址，浏览器进程会准备一个渲染进程用于渲染页面，同时网络进程会加载资源，最终将加载的资源交给渲染进程来处理网络七层模型(物-数 网(ip) 传(tcp:安全可靠、分段传输 udp:可能丢包、不分包) 会-表-应(http))先去查找缓存，检测缓存是否过期，有缓存直接返回缓存中的内容；看域名是否被解析，DNS协议，将域名解析成ip地址(DNS是基于udp) -> ip+端口号如果请求是https SSL协商通过ip地址寻址，排队
2022-04-27 16:50:58
253
原创 垃圾回收机制
垃圾回收机制在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。新生区通常只支持 1～8M 的容量，而老生区支持的容量就大很多了。对于这两块区域，V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。副垃圾回收器，主要负责新生代的垃圾回收。主垃圾回收器，主要负责老生代的垃圾回收。副垃圾回收器新生代中用 Scavenge 算法来处理。所谓 Scavenge 算法，是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域
2022-04-27 10:34:20
189
原创 http缓存
http缓存浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中强缓存Expire(http1.0) 服务其返回该请求结果缓存的到期时间Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，那么如果客户端与服务端的时间因为某些原因（例如时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存则会直接失效Cache-Control(http1.1)public：所有内容都将被
2022-04-25 14:57:05
106
原创 浏览器进程与线程
浏览器浏览器从关闭状态进行启动，然后新开1个页面至少需要1个网络进程1个浏览器进程1个 GPU 进程以及1个渲染进程，共 4 个进程；后续再新开标签页，浏览器、网络进程、GPU进程是共享的，不会重新启动，如果2个页面属于同一站点的话，并且从a页面中打开的b页面，那么他们也会共用一个渲染进程，否则新开一个渲染进程。最新的 Chrome 浏览器包括1个浏览器（Browser）主进程1个 GPU 进程1个网络（NetWork）进程、多个渲染进程和多个插件进程。各个进程：浏览器进程：主要负
2022-04-25 11:13:59
318
原创 http发展
http1.0 http1.1 http2.0比较http0.9只有get请求 没有headerhttp1.0有header、request、response、http版本号(根据header的不同处理不同的资源)增加了状态码不足：每发一次请求需要建立一次链接，而且是串行请求http1.1实现连接复用 connection: keep-alive增加pipeline管线化(一个请求发出去，不用等结果就可以发送第二个)支持chunked response(分段传输)增加
2022-04-25 08:48:42
703
原创 浏览器渲染（层叠上下文）
整体流程1、解析HTML，构建DOM树 --> DOM2、解析CSS，生成CSS规则树 --> CSSOM3、合并DOM树和CSS规则，生成Render树（页面布局） --> layout4、绘制Render树（paint），绘制页面像素信息 --> paint5、显示DOM -> CSSOM -> layout(renderObject) --> paint(PaintLayer渲染层(stacking contest（层叠上下文）
2022-04-21 09:29:41
190
原创 js阻塞dom的构建 && CSS通过js来阻塞DOM的构建 && async、defer
js阻塞dom的构建 && CSS通过js来阻塞DOM的构建JavaScript脚本由于可能会修改DOM，因此会阻塞DOM的构建，这一点我们都知道；而CSS并不会操作或者改变DOM，因此通常我们认为CSS不会影响DOM的构建，只会影响后续的布局、绘制等过程，即会影响DOM的渲染。但其实CSS可以通过JavaScript来阻塞DOM的构建。因为JavaScript是可以改变样式的，也就是具有修改CSS规则树的能力，而JavaScript脚本里是否有改变样式的操作，这一点在执行JavaS
2022-04-21 09:27:56
1134
原创 层叠上下文(stacking context)
z-index 属性设定了一个定位元素(position不等于static)及其后代元素或flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示z-index 属性指定：盒子在当前层叠上下文中的层叠层级。盒子是否创建一个本地层叠上下文。当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的sta..
2022-04-18 20:24:09
246
原创 Vue3求最长递增子序列
function getSequence(arr) { let len = arr.length; const result = [0]; // 这里放的是索引 let p = arr.slice(0); // 用来记录前驱节点的索引， 用来追溯正确的顺序 let lastIndex; let start; let end; let middle; for (let i = 0; i < len; i++) { const arrI = arr[i]
2022-03-29 10:01:16
687
原创 promise模拟
const PENDING = "PENDING";const FULFILLED = "FULFILLED";const REJECTED = "REJECTED";// 决定then返回的promise的状态function resolvePromise(x, promise2, resolve, reject) { if (promise2 === x) { return reject(new TypeError('循环引用')) } if (typeof x ===
2022-03-22 14:09:18
546
原创 浏览器事件循环及宏任务微任务
浏览器事件循环进程： 计算机分配和调度任务的最小单位；浏览器是一个多进程模型，每个页卡都是一个独立的进程（稳定）每个浏览器进程含有哪些线程：(主线程是单线程的)GUI渲染线程 页面渲染、绘图、3d动画js渲染引擎 执行js代码，当js执行时，渲染线程会挂起 -> 渲染时不能执行js事件触发线程 EventLoopwebApi也会创建线程 事件、定时器、ajax…webworker宏任务 微任务
2022-03-21 14:02:10
998
原创 buffer
bufferbuffer可以存储数据,可以和字符串相互转化读取操作不指定编码时,读取结果是buffer类型buffer是16进制的buffer代表的是内存，一旦声明好，不能去扩展(随意更改大小);如果要更改buffer的大小，可以截取内存（改小）或者创造一个大的内存空间，将数据拷贝过去(改大)常用apips: Buffer为类上的方法， buffer为实例方法Buffer.alloc 和 Buffer.allocUnsafetips:Buffer 模块预先分配了大小为 Buff
2022-03-10 09:32:32
165
原创 offsetX、clientX、pageX、screenX
offsetX、clientX、pageX、screenXoffsetX / offsetY事件发生时鼠标相对于事件源元素的坐标，事件源元素就是绑定事件的那个元素pageX / pageY鼠标相对于网页的位置，它的位置是跟滚动条相关的clientX / clientY鼠标相对于当前可见区域的位置(无论滚动条如何滚动，只要鼠标的位置仍然相对于浏览器在这个位置，这个点的位置就是不会变的)screenX / screenY鼠标相对于电脑屏幕的位置，只有当浏览器窗口变化，鼠标仍相对于
2021-05-19 18:06:49
162
原创 scroll**、client**、offset**
scroll**、client**、offset**clientHeight --> padding + contentoffsetHeight --> border + padding + contentscrollHeight --> padding + content + scrollTop(即展示区的总高度，包含滚动条的内容)clientTop --> borderoffsetTop --> 距离父元素的偏移量scrollTop --> 滚动卷去的高度
2021-05-17 17:21:59
86
原创 flex布局
flex布局：转自这里注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效设置在容器上的6个属性：flex-direction:row | row-reverse | column | column-reversejustify-contentflex-start | flex-end | center | space-between | space-around;align-itemsflex-start | flex-e
2021-05-17 15:07:37
76
原创 BFC(块级格式化上下文)
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
2021-05-17 11:25:59
66
原创 JavaScript设计模式与开发实践（四）-- 设计原则和编程技巧篇
单一职责原则(SRP)SRP原则体现为：一个对象（方法）只做一件事情。缺点：单一职责原则指导我们把对象划分成较小的粒度，这可以提高对象的可复用性。但越来越多的对象之间可能会产生错综复杂的联系，如果修改了其中一个对象，很可能会影响到跟它相互引用的其他对象。SRP原则在很多设计模式中都有着广泛的运用，例如代理模式、迭代器模式、单例模式和装饰者模式。最少知识原则最少知识原则要求我们在设计程序时，应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的相互联系。常
2021-03-03 11:28:48
111
原创 JavaScript设计模式与开发实践（三）--设计模式篇
模板方法模式定义：模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。钩子方法var Beverage = function() {};Beverage.prototype.boilWater = function() { console.log('把水煮沸');};Beverage.protot
2021-03-02 17:50:24
117
原创 JavaScript设计模式与开发实践（二）--设计模式篇
设计模式将不变的部分和变化的部分隔开是每个设计模式的主题单例模式 – 性能优化，减少创建的开销定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点实现：用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象惰性单例：惰性单例指的是在需要的时候才创建对象实例var getSingle = function(fn){ // 创建实例的方法用参数 fn 的形式传入 var result; return function(){
2021-03-02 17:49:49
164
1
原创 JavaScript设计模式与开发实践（一）
JavaScript设计模式与开发实践this、call和applytips如果构造器(构造函数)显式地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题var MyClass = function(){ this.name = 'sven'; return { // 显式地返回一个对象 name: 'anne' }};var obj = new MyClass();
2021-02-25 11:08:07
318
原创 webpack配置
/** * 开发环境的配置: 能让代码运行即可 * 整体流程: 源代码 --> webpack(+自动化) --> bundle(输出文件) */const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const
2021-02-20 18:14:08
68
原创 redux&&react-redux&&redux-thunk
react redux react-redux redux-thunkreact --> UIredux --> 存储数据(可以理解为一个数据库)react-redux --> redux搭配react使用的库(redux写起来比较麻烦，react-redux封装好一些方法便于开发)redux-thunk --> 中间件，可以dispatch异步请求reduxredux中的reducer为什么是纯函数?不考虑性能的话，写不纯的reducer来变动数据在技术上是可行的
2021-02-20 16:51:41
108
原创 函数柯里化
函数柯里化柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术柯里化的目的是，减少代码冗余，以及增加代码的可读性，还可以用于优化比较耗时的计算，通过将计算结果缓存到内存中(闭包)// ES6函数柯里化const fn = a => b => c => { console.log(a + b + c);}fn(1)(2)(3) // 6...
2021-02-20 16:01:21
63
原创 npm包
npm包发布与自测相关命令：npm init 初始化项目 (1.0.0)npm adduser 添加账号(第一次发布)npm login 登录(非第一次发布包)npm publish 发布npm unpublishnpm view versions 查看已发布的版本号npm version <update_type> 修改版本号update_type:patch：补丁 (1.0.1)minor：小修小改 (1.1.0)major：大改 (2.0.0)发
2021-01-29 17:52:20
77
原创 immutable Data 和 immerjs
拓展：immer 和 immutable Data参考了这里immutable data(不可变数据)：不可变数据指的其实就是当你修改一个数据的时候，这个数据会给你返回一个新的引用，而自己的引用保持不变// npm i -S immerimport produce from 'immer';const array = [{value: 0}, {value: 1}, {value: 2}];const arr = produce(array, draft => { // 第一个参数
2021-01-27 16:35:01
148
原创 umi -- 插件
umi插件plugin-access启用方式： 有src/access.ts时启用des:约定了 src/access.ts 为我们的权限定义文件，该文件需要默认导出一个方法，导出的方法会在项目初始化时被执行。该方法需要返回一个对象，对象的每一个值就对应定义了一条权限。// src/access.tsexport default function(initialState){ // initialState是通过初始化状态插件@umijs/plugin-initial-state 提供的数据，
2021-01-27 16:32:52
1860
1
原创 react路由之react-router && react-router-dom
react路由 – react-router && react-router-dom参考文章点击这里同级路由des: 不同路径对应不同的组件(页面),路径改变,整个页面都改变/ --> App/repos --> Repos/about --> About<Router history={hashHistory}> <Route path="/" component={App} /> <Route path
2021-01-26 19:09:30
59
原创 umi --api
API基本APIdynamic动态加载组件(通常搭配import语法)使用场景：组件体积太大，不适合直接计入bundle，以免影响首屏加载速度。例如：某组件 HugeA 包含巨大的实现 / 依赖了巨大的三方库，且该组件 HugeA 的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic 就该上场了。// 封装异步组件 AsyncHugeAimport { dynamic } from 'umi';export default dynamic({ loader: async fu
2021-01-25 17:58:17
398
原创 TypeScript高级
TypeScript高级类型-Partialdescription: 将泛型中的字段转为可选的假设有一个定义 user 的接口：interface IUser { name: string age: number department: string}经过 Partial 类型转化后得到type optional = Partial<IUser>// optional的结果如下type optional = { name?: string | undefi
2021-01-25 11:13:42
59
原创 TypeScript基础(三)--泛型
泛型// 泛型函数function identity<T>(arg: T): T{ console.log(arg) return arg}function log<T>(arg: Array<T>): Array<T>{ console.log(arg) return arg}// 泛型接口interface identityInterface<T> { (arg: T): T}let identity
2021-01-25 11:01:11
34
原创 TypeScript基础(二) -- 接口
接口description:对值所具有的结构进行类型检查注意：传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且检查其类型是否匹配(话虽如此,但是引用没有被检查的属性时还是会报错hhhhh,所以最好要做到一一对应)// 注意：interface LabelValue { label: string}function print(labelObj: LabelValue){ console.log(labelObj)}只读属性(readonly)
2021-01-22 17:51:03
88
原创 TypeScript基础(一)
基础类型基本类型：boolean、number、string数组：let list: number[] = [1,2,3,4] 或者 let list: Array = [1,2,3,4]元组：let x: [number,string] = [1,‘vapour’] (元组类型允许表和表示一个已知元素数量和类型的数组，各元素的类型不必相同)枚举：(提供一个映射关系，即MALE映射0，FEMALE映射1，通过Sex[0]或者Sex[MALE]取值)enum Sex { 'MALE',
2021-01-22 17:50:16
79
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人