- 博客(118)
- 收藏
- 关注
RSS订阅原创 css的思考
读取css文件，通过parser将css解析为抽象语法树，将抽象语法树传递给任意数量的插件处理，通过诸多插件进行数据处理，插件见传递的数据就是ast树，将处理完成的ast转换为字符串。postcss提供了一个解析器，能够将css转换为抽象语法树，能够为css提供额外的功能，利用postcss的功能，开发一些插件，处理css。在vue中，使用了scope css的方式来保证样式的唯一性，标签上不重复的生成data属性表示唯一性，编译后的css上也会生成这个选择器。扩展内联样式限制：支持所有的css原生功能。
2024-10-14 20:26:39
1085
原创 React.memo和useMemo
React.memo是一个高阶组件，对组件进行性能优化，主要用于优化函数组件的性能，如果一个组件在相同的props下渲染出相同的结果，但是又不需要在组件更新的时候重新渲染，就可以使用react.memo来对其进行性能优化专门用于函数组件在默认情况下，react.memo只会对props进行，如果props的结果比较复杂或者包含了不可变的数据结构，需要传入第二个参数，一个比较函数，来定制更新时机。
2024-10-14 15:47:25
707
原创 前端埋点学习
前端数据埋点是在前端页面中通过代码的方式手机用户行为数据和页面性能的过程，通过在页面中插入指定的代码，实现实时监控用户在页面上的操作行为。
2024-10-12 20:07:30
1146
原创 链接防封，微信防封
链接防封跳出浏览器打开。域名检测和域名轮转防封，该系统设置为入口域名和落地域名两部分，当使用商营销宣传时，发的都是入口域名，用户点击入口域名后跳转进入落地域名页面，这种做法的好处是即使落地域名被用户举报或者系统检测被封，入口域名也可以多撑一段时间不被封，系统自动检测到落地域名被封后，从域名库中再次拿出新的域名替换掉原来的被封落地域名，从而保证营销系统的正常运转iframe网页嵌套指定路径跳转，如果用户不是从入口域名 A 的地址进入的 B 落地页，则 B 显示其他内容，换句话说，只有从 A 到 B，
2024-10-12 18:14:24
178
原创 浏览器唤起app
在实习的过程中，涉及到了这个模块，学习下。浏览器是不可能预知到本地是安装了某个app的，不能通过浏览器来预知本地是否安装，浏览器通过URL scheme打开app的，一个app可以设置一个或者多个打开自己的url scheme。浏览器尝试打开url scheme ,利用settimeout 和iframe来进行打开，window.hidden来判断唤起成功与否。
2024-10-12 12:04:03
474
原创 react-JSX
jsx在编译的时候会被babel编译为react.createELement方法在使用jsx的文件中，需要引入react。jsx会被编译为,所有jsx的运行结果都是react element。
2024-10-12 10:33:02
587
原创 react理念(一)
当遇到大计算量的操作或者设备性能不足的页面掉帧，会导致卡顿，发送网路请求的时候，需要等待数据返回才能进一步操作导致不能快速响应。叫做cpu的瓶颈和io的瓶颈。
2024-10-11 20:38:07
2110
原创 react生命周期
生命周期流程为外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传组件第一次挂载的时候： -> -> -> 组件更新的时候: -> -> -> -> 组件卸载的时候执行: 组件挂载: -> -> -> 组件更新: -> -> -> -> 组件卸载时执行: react 废弃了 componentWillMount componentWillReceiveProps componentWillUpdate 这三个生命周期钩子函数如果不初始化 state 或
2024-10-06 11:24:27
1057
1
原创 前端性能初探
提升稳定性，更快的发现异常，定位异常，解决异常，js错误，接口异常，资源异常，白屏等。关注用户体验，建立性能规范，长期关注优化，页面性能，接口性能，资源加载性能，卡顿监控了解业务数据，指导产品升级，pv uv 业务数据，行为监控。
2024-09-26 19:33:08
1042
原创 强缓存和协商缓存
服务器会根据这个值来判断资源是否更新，如果有更新，服务器会返回新的资源和新的etag，如果没有更新，则返回304 告诉浏览器中可以使用缓存中的资源。Last modified if modified since 类似于etag机制，但是last-modified记录的是资源最后修改的时间，会在请求头中携带ifmodified since字段，这个值为先前接收到的lastmodified ，会检查最后修改的时间是否在这个时间之后，如果是，说明资源有更改，返回最新的资源，如果不是，服务器返回304状态码。
2024-08-31 15:21:44
409
原创 html复习
Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。外链选择，友站友情链接。
2024-08-12 16:01:18
1070
2
原创 虚拟dom-Diff算法
diff是新旧内容之间的区别经计算，vue中的diff算法，就是通过一种简单而且高效的手段对比出新旧节点数组之间的区别以便以最小的dom操作来更新页面内容对比的是vnode数组同时存在新旧两组vnode数组真实的dom节点都是树的形式存在的，根节点都是, 为了保证虚拟节点能和真实dom节点一样，vnode也采用树形结构。
2024-08-10 20:08:39
1163
原创 webpack sourcemap
@FilePath: \undefinedc:\Users\zhangjiaxuan\Desktop\新建 文本文档.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-08-08 17:26:17
934
原创 webpack plugin
syncWaterfallHook是一个同步的，瀑布类型的hook，瀑布类型的钩子就是如果前一个事件的函数结果部位undefined，则result会作为后一个事件函数的第一个参数，也就是上一个函数的执行结果会成为下一个函数的参数。tapable是一个类似于nodejs的eventEmitter的库， 主要是控制钩子函数的发布喝定于，当时，tapable提供您的hook机制比较全面，分为同步和异步两个大类， 根据事件执行的终止条件的不同。BailHook: 顺序执行hook，遇到第一个结果result!
2024-08-08 15:54:44
614
原创 响应式系统原理 vue3 api
让一个响应式数据变成只读的。[深只读]深层次的也不可读。readonly函数只能将一个对象转换为只读对象，但是不能将一个数组或者map等其他类型的数据结构转换为只读对象，如果需要将这些数据结构转换为制度对象，可以使用readonly函数和deepReadonly函数的组合、属性是只读的，所有数据不可以被修改。
2024-08-01 16:44:35
425
原创 响应式系统实现computed-vue3
定义了 _value私有变量用于缓存上一次计算的值，定义了 _dirty变量用于表示是否需要重新计算值，为true时表示需要重新计算，默认是true；在构造函数中，定义了effect，ReactiveEffect第二个参数称为 scheduler调度器，当依赖属性的值发生变化时会触发该方法的执行；这篇主要是配置computed，vue2实现是通过lazy和dirty这两个变量控制。上面这个不是很好理解，用下面的理解。
2024-08-01 09:59:28
314
原创 响应式原理实现(3)vue2和vue3
实现回调函数输出value之前会执行一次evaluate。defineComputed 是将computed函数定义为data的属性，就可以和正常属性一样使用computed。
2024-07-31 16:58:36
286
原创 浏览器渲染原理
关键渲染路劲是浏览器将html css JavaScript转换为在屏幕上呈现的像素内容所经历的一系列不走。关键资源的数量: 可能阻止网页首次渲染的资源关键路径长度: 获取所有关键资源所需要的往返次数和总时间关键字节: 实现网页首次渲染所需要的总字节数，等同于所有关键资源传送文件大小的总和渲染层合并,对于页面中 DOM 元素的绘制(Paint)是在多个层上进行的。在每个层上完成绘制过程之后,浏览器会将绘制的位图发送给 GPU 绘制到屏幕上,将所有层按照合理的顺序合并成一个图层,然后在屏幕上呈现。
2024-07-30 16:02:03
928
原创 响应式原理实现(2)vue2和vue3
提供shallow，决定是否需要深度响应上面已经重写了array方法，不可以直接覆盖全局的array方法，如果当前value是数组，在observer中拦截array方法。上面代码中，实现了数组的操作方法，但是并没有给数组中的元素添加响应式，所以我们需要给数组中的元素添加响应式。如果是多维数组，则需要对多维数组中的元素进行依赖同时也需要对插入的数据进行依赖收集，如果是数组，进行数组的依赖收集。如果是数组，需要将数组中的元素进行响应式处理，对于新添加的元素也进行响应式处理。
2024-07-27 21:15:05
454
原创 响应式实现vue2和vue3
重写get和set方法，在调用数据的时候，将依赖进行收集，将依赖的函数执行将第一步和第二步的东西封装为dep保存当前正在执行的函数每个属性有一个subs数组，watcher会保存当前正在执行的函数，当读取属性的时候触发get，将当前watcher保存到subs数组中。这里需要考虑两件事情，1.Dep中不要重复收集watcher, 2.重置,如果该属性对dep中的watcher没有影响，watcher中的updateComponent不会获得属性，需要将watcher将dep中删除重置全量式
2024-07-26 19:43:17
340
原创 客户端识别和cookie机制
会对真正的URL进行扩展，web服务器会动态生成一些超链，维护url中的状态信息，改动的用户状态信息的URL称为胖URL。用户首次访问这个Web站点时，会生成一个唯一的ID，用服务器可以识别的方式将这个ID添加到URL中去，然后服务器就会将客户端重新导向这个胖URL。会话cookie是一种临时cookie，记录了用户访问站点的设置和偏好，用户退出浏览器的时候，会话cookie就被删除了。from首部包含了用户的Email地址，每个用户都有不同的Email地址，可以用这个地址作为可行的元端来识别用户。
2024-07-24 11:27:48
528
原创 微前端--qiankun(3)
当微应用信息注册完之后，一旦浏览器url发生变化，便会自动触发qiankun的匹配逻辑，所有的activeRule规则规则上的微应用就会加载到指定的container上，同时依次调用微应用暴露出来的钩子。创建一个隔离的dom子树，其中的样式和脚本不会影响外部的dom，通过再元素上应用shadow dom,可以将样式限定再shadow dom内部，实现样式的沙箱化。,vue会自动将改样式应用于当前组件的元素，并在编译的过程中为css规则添加要给唯一的属性选择器。单实例场景下的子应用和主应用的样式隔离。
2024-07-24 09:34:07
1188
原创 微前端--qiankun
qiankun分为accpication和parcel模式。基于路由工作，将应用分为两类，基座应用和子应用，基座应用维护路由注册表，根据路由的变化来切换子应用。子应用是一个独立的应用，需要提供生命周期方法供基座应用使用。和路由无关，子应用切换是手动控制的，具体是通过qiankun提供的loadMicroApp来实现的。
2024-07-23 18:17:43
935
原创 HTTP 缓存
web缓存是可以自动保存常见的文档副本的HTTP设备，当web请求抵达缓存时，如果本地有已经缓存的副本，就可以从本地存储设备而不是从原始服务器中提取这个文档。使用缓存有如下的优先。
2024-07-22 21:02:07
1312
原创 rollup打包工具
rollup是一个模块化的打包工具，会将javascript文件进行合并。比起webpack，webpack在打包的时候会进行代码注入(保障兼容性)，如果对于一些项目，特别是类库，没有其他的静态资源文件，就可以使用rollup。rollup支持es6模块，支持tree-shaking,不支持code-splitting,模块热更新tree shaking优化： tree shaking是一种优化技术，用于剔除未使用的代码，减少最终的文件大小ES6模块支持。
2024-07-14 15:47:08
1058
原创 script标签type属性
@FilePath: \javascript深入学习\script标签中的type的使用.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-07-13 09:52:40
699
原创 JavaScript设计模式 -- 代理模式
@FilePath: \设计模式\代理模式.md* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE。
2024-07-10 16:52:27
1111
原创 Mock.js学习
数据模板中的属性由3部分构成，属性名，生成规则，属性值属性名和生成规则之间用 | 分割。生成规则是可选的生成规则有7种生成规则的含义需要依赖属性值来完成属性值中可以有占位符属性值还原了最终的初始值和类型"string| 3": "知道了啊"})// 生成一个整数，属性为数字，在1-10位之间})// 生成一个小数，整数区间1-10， 小数部分2-4})// step递增 生成一个数组list，初始值为number，step不能为负值})// 生成一个布尔值})
2024-07-09 21:27:36
266
原创 html5中的iframe
iframe>浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
2024-07-05 14:41:46
866
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人