web - 随笔分类 - 竹千代

React Query使用

摘要：1. React Query 里的核心概念 QueryClient：数据缓存的主体，存所有 queryKey → queryState。不同QueryClient主体之间的数据是不会共通的，除非hydrate到同1个QueryClientProvider节点树里（相同于同1个React Conte 阅读全文

posted @ 2025-08-23 10:11 竹千代阅读(59) 评论(0) 推荐(0)

SEO和Search Ranking

摘要：一、SEO SEO是没有一个统一、可靠的“基准得分”来衡量所有网站，但是google给出了很多工具、最佳实践。工具： lighthouse: 本地开发阶段检测，确保最完整基本要求使用方式：打开 Chrome 浏览器，进入任意网站页面右键 > 检查（或按 F12） > 选择「Lighthous 阅读全文

posted @ 2025-08-07 22:54 竹千代阅读(20) 评论(0) 推荐(0)

react的渲染过程

摘要：一、过程说明 React 的渲染流程可以分为三个阶段：调和阶段（Reconciliation Phase）/ Diff 阶段找出需要更新的部分，不直接操作 DOM；是一个可以中断的过程（React 18 使用 Fiber 架构进行调度）；会生成一个更新的「虚拟 DOM 树」；最终形成一个阅读全文

posted @ 2025-04-23 07:43 竹千代阅读(74) 评论(0) 推荐(0)

React Fiber的时间分片调度逻辑

摘要：一、大概代码 function workLoop(deadline) { let shouldYield = false; while (nextUnitOfWork && !shouldYield) { nextUnitOfWork = performUnitOfWork(nextUnitOfWo 阅读全文

posted @ 2025-04-23 07:03 竹千代阅读(25) 评论(0) 推荐(0)

用户认证（Authentication）的方式

摘要：一、App Secret Key + HMAC App Secret Key主要是用于识别用户身份 HMAC，一般是用SHA256算法对消息进行加密，防止消息被篡改、回放等优势：简单，一般会用于读取api鉴权。比如微信获取头像接口、google map api。劣势：App Secret K 阅读全文

posted @ 2024-12-24 19:46 竹千代阅读(94) 评论(0) 推荐(0)

React全栈开发

摘要：一、Redux 使用Redux相对于context api的优势：单一数据源：使用全局唯一的状态树来存储应用程序的状态，使得状态管理更加集中和一致。使用Context API时，状态可能会分散在多个上下文中。分离关注点：通过actions和reducers将状态更新逻辑与组件逻辑分离。使用Con 阅读全文

posted @ 2024-04-30 07:27 竹千代阅读(74) 评论(0) 推荐(0)

前端生成图片方案

摘要：一、canvas画图api ctx.drawImage ctx.fillText ctx.toDataURL 二、html+css构建的页面，用html2canvas导出 /*图片跨域及截图模糊处理*/ let shareContent = domObj,//需要截图的包裹的（原生的）DOM 对象阅读全文

posted @ 2024-01-17 00:51 竹千代阅读(199) 评论(0) 推荐(0)

H5秒开性能统计

摘要：一、白屏时间 timing.responseStart - timing.navigationStart 展示index.html了(有内嵌样式也会展示了) 二、内容可见时间 timing.domComplete- timing.navigationStart index.html关联的资源(不包括阅读全文

posted @ 2020-04-30 09:53 竹千代阅读(395) 评论(0) 推荐(0)

代码检查

摘要：一、用eslint+prettier做静态词法分析和格式统一 https://blog.csdn.net/weixin_37939942/article/details/89353248 阅读全文

posted @ 2019-06-16 10:12 竹千代阅读(129) 评论(0) 推荐(0)

web数据层管理思想

摘要：https://zhuanlan.zhihu.com/p/28958042 https://github.com/xufei/blog/issues/42 阅读全文

posted @ 2019-04-19 19:02 竹千代阅读(126) 评论(0) 推荐(0)

浏览器渲染原理

摘要：一、JS/CSS等对浏览器渲染影响 https://juejin.im/post/59c60691518825396f4f71a1?from=singlemessage https://www.cnblogs.com/Jm-jing/articles/6974029.html 阅读全文

posted @ 2019-01-26 18:04 竹千代阅读(125) 评论(0) 推荐(0)

原型

摘要：阅读全文

posted @ 2019-01-08 22:30 竹千代阅读(124) 评论(0) 推荐(0)

Web安全

摘要：一、XSS 本质上，就是针对html代码，进行了注入 1、反射型把用户的输入，直接放到了html页面上面。比如把input的输入，绑定到span中。 2、存储型把用户的输入，存储到数据库中；后再传到前端页面展示。防御方法： 1、输入长度限制构造xss攻击，需要拼接额外字符，一般比较长 2、阅读全文

posted @ 2018-07-08 08:29 竹千代阅读(119) 评论(0) 推荐(0)

vue-router实现原理

摘要：https://github.com/DDFE/DDFE-blog/issues/9 阅读全文

posted @ 2018-07-02 06:56 竹千代阅读(114) 评论(0) 推荐(0)

d3js可视化策略

摘要：d3js是数据驱动图形的思路。基本可以这么理解，有什么样的图形，后面基本就有类似结构的数据。大概思路步骤如下：一、适配数据格式这一步主要是为第二部服务，第一步的结果作为第二部的入参。比如，画层级图，需要特别的输入格式，如 d3.hierachy 如果第二步的数据正合适，第一步可以省。二、数据阅读全文

posted @ 2018-03-24 11:35 竹千代阅读(132) 评论(0) 推荐(0)

HTTP的缓存策略

摘要：etag 与 if-match https://www.cnblogs.com/huangzhilong/p/4999207.html https://juejin.im/post/5c136bd16fb9a049d37efc47 参考：https://aotu.io/notes/2016/09/2 阅读全文

posted @ 2017-11-18 10:14 竹千代阅读(125) 评论(0) 推荐(0)

vuex实现原理

摘要：一、Store的层次结构 Store，负责管理整个数据访问、修改等；提高API； State，数据结构；所有的getters、mutations，全部都注册到store里；结构大概是： { 'xxx': [f1, f2] } state是层层嵌套注册在根state中，结构大概是： {'xxx': 阅读全文

posted @ 2017-11-10 23:10 竹千代阅读(797) 评论(0) 推荐(0)

Vuejs的virtualDom原理及diff算法

摘要：https://segmentfault.com/a/1190000008782928 阅读全文

posted @ 2017-09-26 19:24 竹千代阅读(266) 评论(0) 推荐(0)

Vuejs的$nextTick原理

摘要：本质： nextTick，本质上是一个异步API，表示当前同步流程执行完成后再调用传入的函数。根据环境不同，异步API的实现可以分别通过： setTimeout(0)， new Promise()， MutationObserver等流程说明：如下图：参考：https://chuckliu. 阅读全文

posted @ 2017-09-21 15:30 竹千代阅读(276) 评论(0) 推荐(0)

Vuejs的$watch实现原理

摘要：大概原理如下面代码所示： Watcher的相关实现原理，参见我的另一片博客: vuejs的双向绑定实现原理阅读全文

posted @ 2017-09-19 15:51 竹千代阅读(393) 评论(0) 推荐(0)

竹千代

公告

随笔分类 - web