- 博客(76)
- 收藏
- 关注
RSS订阅
原创 React 程序打包为App流程
文章目录React 程序打包为App流程前言流程：实现过程:一、编写Web 端应该程序，配置package.json文件二、打包React Web应用程序三、使用HBulider 创建App项目，并导入React打包程序四、编辑manifest.json配置文件五、使用云端打包程序并且使用自定义证书六、Google开发者证书生成七、上传云端，下载apk八、执行测试后序React 程序打包为App流程前言 这篇随笔主要是解决本人对web程序打包为安卓APP好奇，通过本人的尝试完成APP打包发布，主要
2020-09-05 11:49:22
5438
1
原创 Beautiful Soup 基本使用方法
我们就来介绍一个强大的解析工具Beautiful Soup，它借助网页的结构和属性等特性来解析网页。有了它，我们不用再去写一些复杂的正则表达式，只需要简单的几条语句，就可以完成网页中某个元素的提取。 1、简介 简单来说，Beautiful Soup就是Python的一个HTML或XML的解析库，可以用它来方便地从网页中提取数据。官方解释如下：Beautiful Soup提供一些简单的、Py...
2018-06-06 17:45:14
65057
9
原创 无法在驱动器0的分区1上安装windows
在通过U盘或光盘安装win10系统时，不少用户遇到无法安装的问题，提示“无法在驱动器0的分区1上安装windows”，格式化分区1也不能解决，进而提示Windows无法安装到这个磁盘，选中的磁盘采用GPT/MBR分区形式，这是怎么回事呢？下面跟大家分析出现这个问题的原因以及解决方法。 一、原因分析win10系统均添加快速启动功能，预装的win10电脑默认都是UEFI引导和GPT硬盘，传统的引...
2018-06-02 23:19:32
36435
2
原创 React 使用合成事件（SyntheticEvent）
合成事件对象具有与原生事件对象相似的属性和方法，但也有一些额外的属性和方法，用于处理 React 特定的功能。例如，您可以使用event.target来访问触发事件的元素，event.preventDefault()来阻止默认行为，以及event.stopPropagation()来阻止事件冒泡。请注意，由于合成事件是 React 提供的跨浏览器抽象，它并不是浏览器原生事件对象。合成事件是一个封装了原生事件的对象，提供了一致的跨浏览器接口，使您能够在不同浏览器中以一致的方式处理事件。
2023-09-11 16:54:44
509
2
原创 Fiber 架构的起源和含义
在过去的 React 版本中，渲染过程是基于递归的，即组件树的遍历是通过递归函数来完成的。Fiber 这个名字来源于计算机科学中的 “Fiber”（纤程）概念，指的是一种轻量级的执行单元，可以在多个任务之间切换，并且可以中断和恢复执行。React 中的 Fiber 也是类似的概念，表示渲染过程中的任务单元，可以根据任务的优先级和时间片进行灵活的调度和中断。值得一提的是，Fiber 架构的设计和实现是一个非常复杂的过程，并且在不同版本的 React 中可能会有一些细节上的差异。
2023-09-08 10:37:43
478
原创 FiberNode结构解析
FiberNode（也称为 Fiber 节点）是 React Fiber 架构中的核心概念之一，用于表示组件的层级结构和渲染过程中的任务。
2023-09-08 09:37:40
585
原创 Fiber 架构实现流程
构建 Fiber 树：在进行首次渲染时，React 会构建一棵 Fiber 树，用于表示组件的层级结构和渲染顺序。它的目标是提高渲染性能和用户体验，通过将渲染工作分割成多个小任务，在不阻塞主线程的情况下逐步完成整个渲染过程。任务拆分：在渲染过程中，React 根据时间片（Time Slicing）的概念将渲染任务拆分为多个小任务（Fiber），每个小任务执行时间有限，并且可以中断和恢复。增量更新：在执行每个小任务时，React 会比较前后两次渲染结果，找出需要更新的部分，并对其进行增量更新。
2023-09-07 17:57:21
229
原创 对浏览器的缓存机制的理解
下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上次返回 200 的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取数据资源。服务器收到请求后，优先根据 Etag 的值判断被请求的文件有没有做修改，Etag 值一致则没有修改，命中协商缓存，返回 304；如果服务器收到的请求没有 Etag 值，则将 If-Modified-Since 和被请求文件的最后修改时间作对比，一致则命中协商缓存，返回 304；
2023-08-22 23:03:26
68
原创 如何实现浏览器内多个标签页之间的通信?
实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。
2023-08-22 22:44:05
134
原创 浏览器渲染进程的线程有哪些
当界面需要重绘或由于某种操作引发回流时，该线程就会执行。需要注意的是，由于浏览器对跨域请求进行了限制，在异步 HTTP 请求线程中发起的跨域请求需要经过浏览器的安全机制进行处理，一般需要设置相关的请求头或者使用 JSONP 等技术来解决。：GUI 渲染线程和 JS 引擎线程是互斥的，当JS 引擎执行时GUI线程会被挂起，GUI 更新会被保存在一个队列中等到JS 引擎空闲时立即被执行。：GUI 渲染线程与 JS 引擎线程的互斥关系，所以如果JS 执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。
2023-08-11 17:23:28
296
原创 网络劫持有哪几种，如何防范？
DNS 劫持由于涉嫌违法，已经被监管起来，现在很少会有DNS劫持，⽽http 劫持依然⾮常盛⾏，最有效的办法就是全站HTTPS，将HTTP 加密，这使得运营商⽆法获取明⽂，就⽆法劫持你的响应内容。使用HTTPS：HTTPS是一个安全的协议，对通信进行加密和身份验证，防止劫持者对数据进行篡改。警惕钓鱼网站和不安全的链接：劫持者可能会伪造合法的网站或链接，引导用户向其提供个人信息或下载恶意软件。网络劫持指的是网络中的某个节点对数据进行恶意篡改和篡改，以达到非法获取用户信息或者控制用户设备的目的。
2023-08-11 16:50:48
614
1
原创 有哪些可能引起前端安全的问题?
⼀种代码注⼊⽅式,为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯, 其注⼊⽅式很简单包括但不限于 JavaScript / CSS / Flash 等；
2023-08-10 22:56:03
586
原创 什么是 CSRF 攻击？
对 Cookie 进行双重验证，服务器在用户访问网站页面时，向请求域名注入一个 Cookie，内容为随机字符串，然后当用户再次向服务器发送请求的时候，从 cookie 中取出这个字符串，添加到URL参数中，然后服务器通过对 cookie 中的数据和参数中的数据进行比较，来进行验证。Samesite 一共有两种模式，一种是严格模式，在严格模式下 cookie 在任何情况下都不可能作为第三方 Cookie 使用，在宽松模式下，cookie 可以被请求是GET 请求，且会发生页面跳转的请求所使用。
2023-08-10 22:50:18
1906
原创 什么是 XSS 攻击？
可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。
2023-08-10 21:48:57
1109
原创 webpack 热更新的实现原理
webpack 的热更新⼜称热替换（Hot Module Replacement），缩写为HMR。这个机制可以做到不⽤刷新浏览器⽽将新变更的模块替换掉旧的模块。最后⼀步，当 HMR 失败后，回退到 live reload 操作，也就是进⾏浏览器刷新来获取最新打包代码。
2023-08-10 14:50:47
734
原创 节流和防抖
节流可以使用在 scroll 函数的事件监听上，通过事件。函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件。又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因。函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发。事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只。为用户的多次点击向后端发送多次请求。节流来降低事件调用的频率。
2023-08-09 21:35:59
121
原创 浅谈回流与重绘
浏览器针对页面的回流与重绘，进行了自身的优化——渲染队列浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。上面，将多个读操作（或者写操作）放在一起，就会等所有的读操作进入队列之后执行，这样，原本应该是触发多次回流，变成了只触发一次回流。当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。
2023-08-09 18:22:24
98
原创 前端懒加载
根据这个原理，我们使用 HTML5 的data-xxx 属性来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。
2023-08-09 17:59:53
753
原创 对 async/await 的理解
所以，async 函数返回的是一个 Promise 对象。单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有意思，Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。联想一下 Promise 的特点——无等待，所以在没有await 的情况下执行 async 函数，它会立即执行，返回一个Promise 对象，并且，绝不会阻塞后面的语句。
2023-08-08 21:22:06
316
原创 编写 Promise 方法
Promise 对象是异步编程的一种解决方案，最早由社区提出。Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变， 就凝固了，无法再被改变了。
2023-08-08 20:29:06
162
原创 对作用域、作用域链的理解
在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个 变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域 查找，依次向上级作用域查找，直到访问到 window 对象就被终止， 这一层层的关系就是作用域链。使用 ES6 中新增的 let 和 const 指令可以声明块级作用域，块级作用 域可以在函数中创建也可以在一个代码块中的创建(由{ }包裹的代 码片段)作用域链的作用是保证对执行环境有权访问的所有变量和函数的有 序访问，通过作用域链，可以访问到外层环境的变量和函数。
2023-08-07 18:25:17
87
原创 session-cookies 三个缓存 localStorage、sessionStorage、Cookies。
session-cookies 这个插件是用来汇总浏览器的三个缓存 localStorage、sessionStorage、Cookies。该插件注重使用方便快捷下面是一些API汇总说明。
2023-08-03 21:46:20
1204
原创 对原型、原型链的理解
特点：JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。=== null // true，所以，原型链的终点是 null。原型链上的所有原型都是对象，所有的对象最终都。是由 0bject 构造的，而 Object.prototype 的下一级是Object. prototype.由于 Object 是构造函数，原型链终点 Ob ject.prototype.那么原型链的终点是什么？如何打印出原型链的终点？
2023-07-27 23:33:34
453
原创 RESTful和RPC的区别
常用的HTTP方法有GET、POST、PUT、DELETE等，它们分别对应着资源的查询、新增、更新和删除操作。它采用标准的HTTP协议和常见的数据格式（如JSON、XML等），使得开发人员可以快速地开发出高效、可靠的Web服务，并且可以方便地与其他系统进行集成和交互。它是一种轻量级的、高效的、无状态的Web服务架构，可以用于设计和开发各种类型的Web应用程序和分布式系统。RESTful：是基于HTTP协议设计的，着重于资源的定义和管理，通过URL、HTTP方法和参数等方式进行资源的访问和操作。
2023-07-04 11:26:58
1008
原创 什么是哈希表
总结一下，当我们遇到了要快速判断一个元素是否出现集合里的时候，就要考虑哈希法。但是哈希法也是牺牲了空间换取了时间，因为我们要使用额外的数组，set或者是map来存放数据，才能实现快速的查找。如果在做面试题目的时候遇到需要判断一个元素是否出现过的场景也应该第一时间想到哈希法！
2023-06-27 14:08:25
125
原创 前端工程师如何突破瓶颈期
总之，前端工程师需要不断学习、不断提高自己的技能和经验，同时也需要开放自己的视野，与行业内的人士保持联系和交流，这样才能在职业生涯中不断进步和成长。本文由博客一文多发平台。
2023-05-30 17:08:15
255
原创 Spring Boot Actuator未授权访问漏洞和Apache Druid 漏洞修复
Spring Boot Actuator未授权访问漏洞详细描述 Actuator 是 springboot 提供的用来对应用系统进行自省和监控的功能模块，借助于 Actuator 开发者可以很方便地对应用系统某些监控指标进行查看、统计等。在 Actuator 启用的情况下，如果没有做好相关权限控制，非法用户可通过访问默认的执行器端点（endpoints）来获取应用系统中的监控信息。解决办法1.配置认证在项目的pom.xml文件下引入spring-boot-starter-security依赖
2021-06-24 11:35:00
9949
原创 老系统架构采用拦截器预处理入参解密
机会都是留给有准备的人的在采用拦截器预处理入参的时候，我们需要了解拦截器是什么东西，简单的说就是进入程序之前我们规定的必须要进行一些接口的过滤或者去预处理这个东西就产生了，实现方式我们通过WebMvcConfigurer 进行配置拦截器以及需要拦截的内容，在编写拦截器程序即可完成操作。自定义拦截器步骤如下：自定义一个实现了Interceptor接口的类，或者继承抽象类AbstractInterceptor。在配置文件中注册定义的拦截器。在需要使用Action中引用上述定义的拦截器，为了方便也.
2021-05-19 14:04:57
327
2
原创 获取HttpServletRequest 中Request PayLoad 格式入参数据
获取HttpServletRequest 中接收到的Request PayLoad 格式入参数据，首先是获取到request中的BufferedReader数据，然后在获取到对应长度的数据集，进行转换成JSON格式。// 获取HttpServletRequest 中Request PayLoad 格式入参数据 StringBuilder sb = new StringBuilder(); JSONObject builderJson = null; try(BufferedReader rea
2021-05-19 13:32:07
3015
原创 React获取服务器端时间以及自动更新
React 获取服务器端时间 思路：React获取服务器端时间，本质上就是给服务器端发送一个请求，然后从返回数据里面的headers里面获取到服务器date，然后更新服务器时间去格式化，获取服务器时间结束。按秒进行数据刷新，其实也很简单，就是使用定时器，进行动态递增即可，直接上代码。获取服务器时间的方法：changeTime = async () => { let leftTime = await axios.get('/').then(response => {
2020-10-21 15:48:05
1217
原创 database disk image is malformed
sqlite 出现这个问题的原因是由于，有写入数据时还未提交时，出现程序被异常停止，导致存在未提交问题。解决方案：导出数据重新创建sqlite进行数据导入即可。
2020-09-21 10:06:22
349
原创 Java服务器端获取客户端真实IP
Java服务器端获取客户端真实IP 这篇文章主要解决问题是Java程序开发过程中服务器端获取客户端真实IP地址问题。下面是我给出的解决方案。首先我们需要在nginx 做代理程序用代理配置设置header头；在程序使用HttpServletRequest 获取请求头中的携带ip的参数取获取IP地址，主要参数有一下；"X-Forwarded-For","Proxy-Client-IP","WL-Proxy-Client-IP","HTTP_X_FORWARDED_FOR","HTTP
2020-09-04 13:33:47
749
原创 React component development
组件的使用、开发、发布和规范Component，中文称为组件，或者构件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。Module, 中文为模块或模组。它的核心意义是分离职责，属于代码级模块化的产出。它本身是提供服务的功能逻辑，是一组具有一定内聚性代码的组合，职责明确。组件(Component)和模块(Module)又是一对容易混淆的名词，也常常被用来相互替换。个人总结，**从设计上来看，组件强调复用，模块强调职责(内聚、分离)，**或者说组件是达到可复用要求的模块。
2020-05-25 21:12:38
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人