- 博客(2397)
- 收藏
- 关注
RSS订阅
原创 我在小公司，当了五年的前端切图仔
我正在参与CSDN《新程序员》有奖征文：征文链接回顾自己的职业生涯，不知不觉当中，原来自己已经当了五年的程序媛了。五年仿佛一瞬之间的事情，但这一瞬间，深深回顾起来，却有着千言万语也道不完的故事~毕业之后初次入行2016年的那个难忘的夏天，暑假放假了，大家都高高兴兴的背起行囊，回家度过人生中最后一个有暑假的学生时代了。我也不例外，收拾好行李，却被一个电话告知，家乡处于一个暴雨抗洪的阶段，十几年难得一见的暴雨，已经淹没了回家必经的道路了，也就是说，回不去了。就这样被迫留在学校，想着呆在学校的两个月的无聊
2021-07-14 17:39:56
3499
37
原创 什么是浏览器的同源策略（Same-Origin Policy），以及如何通过CORS（跨源资源共享）解决跨域访问的问题
如果服务器设置了合适的CORS头部，浏览器在收到响应时会检查该头部的值，如果当前页面的域名在允许的访问列表中，就会允许跨域访问。同源策略的目的是保护用户的隐私和安全，防止恶意网站获取或篡改其他网站的数据。CORS是一种机制，允许服务器在响应中设置一些特殊的HTTP头部，以授权其他域名下的页面访问自己的资源。需要注意的是，CORS是在浏览器端实施的安全机制，服务器需要进行相应的配置以支持CORS。同源策略规定，当一个页面加载了来自特定源的资源后，该页面只能与同源的资源进行交互，而无法直接访问其他源的资源。
2024-04-09 16:04:09
133
原创 什么是虚拟DOM（Virtual DOM），以及它在React或其他前端框架中的作用？
通过使用虚拟DOM，框架可以避免频繁的实际DOM操作，从而提高页面的渲染性能。另外，虚拟DOM的比对算法通常是高度优化的，只需要对比树的结构和属性的变化，而不是每个具体的DOM元素。在传统的前端开发中，当页面中的数据发生变化时，通常需要直接操作实际的DOM元素来更新页面。这会导致频繁的DOM操作，而DOM操作通常是相对较慢的，尤其是在大规模的数据变更时。虚拟DOM的作用是在数据变化时，通过对比新旧虚拟DOM树的差异，仅对真正需要更新的部分进行实际的DOM操作，以减少不必要的性能开销。
2024-04-09 16:03:03
764
1
原创 什么是盒模型（Box Model）并说明其组成部分？
在CSS中，可以使用box-sizing属性来定义元素的盒模型类型。还有一个常用的值是border-box，它使得元素的宽度和高度包括了内容区域、内边距和边框的总和，更方便进行布局计算。每个HTML元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型的大小可以通过宽度（width）和高度（height）属性来定义，而内边距、边框和外边距的大小会影响盒子在页面中的布局和相互之间的间距。
2024-04-09 16:02:06
286
原创 单页应用（SPA）和多页应用（MPA）的区别和优缺点？
页面的切换和内容更新不需要重新加载整个页面。2：较少的网络传输：因为只需要加载一次HTML页面，后续的数据交互通常是以JSON等数据格式进行，相比MPA减少了网络传输的数据量。2：SEO困难：由于SPA的内容是通过JavaScript动态生成的，搜索引擎对于内容的抓取和索引存在一定的困难。1：用户体验相对较差：由于每次页面切换都需要重新加载整个页面，用户体验可能相对较差，特别是在页面切换频繁的情况下。2：开发和维护工作量大：由于每个页面都是独立的，需要开发和维护多个页面，增加了开发和维护的工作量。
2023-11-20 10:46:10
507
原创 什么是回调地狱（Callback Hell）？如何解决它？
在传统的回调函数编程模式中，为了处理异步操作的结果，通常需要将下一个操作嵌套在当前操作的回调函数中。随着异步操作的增多和复杂度的提高，回调函数的嵌套层级会不断增加，导致代码变得冗长、难以阅读和调试。通过使用Promise，可以将异步操作的结果以链式的方式进行处理，而不是嵌套的回调函数。回调地狱（Callback Hell）是指在异步编程中，多层嵌套的回调函数导致代码难以理解、维护和扩展的情况。通过采用上述方法，可以有效地避免回调地狱问题，使异步代码更加清晰、可读性更好，并提高代码的可维护性和扩展性。
2023-11-20 10:40:02
795
原创 什么是虚拟DOM（Virtual DOM），说说工作原理
4：对比和更新：将新的虚拟DOM与旧的虚拟DOM进行对比，找出它们之间的差异（称为DOM Diffing）。通过虚拟DOM的这个过程，可以最小化对真实DOM的操作，减少不必要的重绘和回流，从而提高性能。这个过程是非常高效的，因为操作的是内存中的JavaScript对象，而不是直接操作真实的DOM。6：应用变更：将生成的DOM操作应用到真实的DOM上，只更新需要变更的部分，而不是整个页面重新渲染。3：生成新的虚拟DOM：在状态变化后，会生成一个新的虚拟DOM，这个新的虚拟DOM会反映出更新后的状态。
2023-11-20 10:37:09
145
原创 防抖和节流是什么？有什么应用场景？
防抖是指在事件被触发后，延迟一定时间执行回调函数。如果在延迟时间内又有相同事件被触发，那么会重新计时，直到延迟时间内没有再次触发事件，才会执行回调函数。窗口调整（resize）事件：当窗口大小调整时，使用防抖可以避免频繁触发回调函数，而是在用户停止调整窗口大小后执行相关操作。输入框搜索建议：当用户在输入框中连续输入时，使用防抖可以避免频繁触发搜索请求，而是在用户停止输入后一段时间再发送搜索请求。页面滚动事件：当用户滚动页面时，使用节流可以避免过于频繁地触发回调函数，而是在一段时间内执行一次，减少性能消耗。
2023-11-20 10:14:37
108
原创 如何提⾼webpack的打包速度?
使用Webpack的动态导入功能（如使用import()）可以将代码拆分成更小的块，只在需要时加载。DllPlugin可以将第三方库或公共模块提前打包成单独的文件，并生成一个预编译的清单文件。使用Webpack的多线程或多进程构建可以利用多核处理器的优势，加快构建速度。确保使用的Loader是高效的。如果项目文件存储在慢速的文件系统上（如虚拟机或网络共享），可以尝试将项目文件移到本地的快速文件系统上，例如SSD。确保使用的是最新版本的Webpack，因为每个版本都会带来性能改进和优化。
2023-11-20 10:10:03
599
原创 文件上传如何做断点续传?
2: 上传过程管理：为每个chunk维护一个上传状态，记录已成功上传的chunk和尚未上传的chunk。当用户恢复上传时，可以根据已上传的进度，从断点处继续上传未完成的chunk。上传状态管理：在上传过程中，根据服务器返回的响应，更新每个chunk的上传状态。断点续传是一种文件上传的技术，允许在上传过程中出现网络中断或其他问题时，能够从断点处继续上传，而不是重新上传整个文件。4：上传完成：当所有chunk都上传完成后，服务器端可以根据上传的chunk重新组合文件，并完成上传过程。
2023-11-13 14:58:52
157
原创 搜索请求如何处理（防抖）？
在处理搜索请求时，可以使用防抖（Debouncing）技术来避免频繁触发搜索请求，提高性能和用户体验。防抖技术的基本思想是延迟执行请求，直到一定的静默期过去，确保用户停止输入后才触发搜索请求。如果在延迟期间再次调用新函数，计时器会被重置。这样，只有在用户停止输入或点击按钮 delay 毫秒后，才会执行真正的搜索请求。它返回一个新函数，该函数在被调用时会启动一个计时器，延迟 delay 毫秒后执行 func。通过将搜索请求的触发函数包装在防抖函数中，可以有效控制请求的频率，减少不必要的请求次数。
2023-11-13 14:57:43
207
原创 表单可以跨域吗?
如果目标域（服务器）配置了正确的CORS响应头，浏览器可以在发送表单请求时进行跨域访问。例如，设置为Access-Control-Allow-Origin: https://example.com允许来自https://example.com域的请求。默认情况下，表单提交是不允许跨域的。浏览器会执行同源策略（Same-Origin Policy），限制来自不同源（协议、域名和端口）的请求访问和操作页面的内容。可以在同源的服务器端创建一个代理，将表单请求发送到目标域，并将响应返回给客户端。
2023-11-13 14:51:48
153
原创 promise、async有什么区别？
async函数是返回一个Promise对象的函数，其中的await关键字可以暂停函数的执行，等待一个异步操作的结果，并将结果作为返回值。Promise通过链式调用的方式组织和控制异步操作的流程，可以使用.then()方法返回新的Promise对象，从而实现串行或并行的操作。Promise是一种用于处理异步操作的对象，它表示一个可能还未完成的操作，并提供了链式调用的方式来处理操作的结果（成功或失败）。在使用async/await时，实际上是在使用Promise来处理异步操作，只是代码风格更加简洁和易读。
2023-11-13 14:51:11
126
原创 redux请求中间件如何处理并发?
在 Redux 中处理并发请求通常使用中间件来实现。常见的中间件库包括 Redux Thunk、Redux Saga 和 Redux Observable。这些中间件提供了不同的方法来处理并发请求。
2023-11-13 14:50:42
109
原创 介绍css3中position:sticky？
position: sticky 是 CSS3 中的一个定位属性，用于创建一个在滚动过程中相对于容器固定位置的元素。它可以将元素的定位设为相对定位（relative）或固定定位（fixed），具体取决于滚动的位置是否超过了容器的特定阈值。2：滚动过程中的行为：当元素滚动到容器的阈值位置时（由 top、bottom、left、right 等属性定义），元素将固定在容器中的指定位置，不再随滚动而移动。3：继续滚动的行为：当滚动超过容器的范围时，元素将恢复正常流位置，重新随滚动而移动。
2023-11-13 11:14:08
119
原创 React怎么做数据的检查和变化？
对于复杂的数据检查和变化逻辑，你可以编写自定义的函数或组件来处理。可以在组件的生命周期方法（如 componentDidMount、componentDidUpdate）或 useEffect 中检查数据的变化并执行相应的逻辑。也可以根据具体的业务需求，编写数据监听器或观察者模式来监听数据的变化。
2023-11-13 11:13:29
746
原创 使用import时，webpack对node_modules里的依赖会做什么?
3: 模块路径：如果你导入的模块是通过模块路径（如 lodash、react 等）导入的，Webpack 会根据配置中的解析规则来解析这些模块。1: 核心模块：如果你导入的模块是 Node.js 的核心模块（如 fs、path 等），Webpack 会直接将其视为核心模块，不会进行解析和处理。如果使用了 Webpack 的别名（alias）功能或其他自定义的解析规则，Webpack 会根据这些配置来解析模块路径。如果找到匹配的模块，Webpack 会将其打包到输出的 bundle 文件中。
2023-11-13 11:13:20
201
原创 Redux中间件是什么东西，接受几个参数（两端的柯里化函数）?
第二个参数 next 是一个函数，它代表当前中间件链中的下一个中间件或 Redux store 的 dispatch 方法。通过将中间件作为参数传递给 applyMiddleware，可以将这些中间件应用到 Redux store 中，以便在数据流中对 action 进行处理。applyMiddleware 函数接受一个或多个中间件作为参数，并返回一个增强后的 store 创建函数。第一个参数 store 是 Redux store 的引用，它提供了获取状态和分发 action 的方法。
2023-11-13 11:13:04
69
原创 中间件是怎么拿到store和action，然后怎么处理?
2: next：是一个函数，它代表当前中间件链中的下一个中间件或 Redux store 的 dispatch 方法。通过调用 next(action)，中间件可以将 action 传递给下一个中间件或 reducer 进行处理。第一个中间件接收到的 action 是最先被派发的，最后一个中间件接收到的 action 是最后被派发的。loggerMiddleware 中间件打印了要处理的 action，并在调用 next(action) 后打印了更新后的状态。
2023-11-13 11:12:26
119
原创 jsonp方案需要服务端怎么配合?
因此，在使用 JSONP 方案时，需要谨慎考虑安全性和适用性，并确保与服务端配合良好。前端定义的回调函数会被调用，并将服务端返回的数据作为参数传递给回调函数。服务端需要解析请求中的回调函数名，并使用该名称来包裹返回的数据，以实现 JSONP 的跨域响应。服务端返回的数据应该是一个函数调用，将数据作为参数传递给回调函数。在使用 JSONP 方案时，需要服务端进行相应的配合。标签，并将请求的 URL 设置为带有回调函数名的特殊形式，以发起 JSONP 请求。将数据包裹在回调函数中，并作为响应返回给前端。
2023-11-13 11:10:55
211
原创 pureComponent和FunctionComponent区别?
PureComponent 和 FunctionComponent 是 React 中两种不同的组件类型，它们有一些区别和特点。
2023-11-11 15:43:24
121
原创 怎么实现this对象的深拷贝?
上述代码定义了一个deepCopy函数，它递归地复制对象的每个属性，并返回一个深拷贝的对象。要实现this对象的深拷贝，你可以使用一些常见的深拷贝技术，例如递归复制或使用JSON.parse()和JSON.stringify()方法。这种方法使用JSON.stringify()将对象转换为字符串，然后使用JSON.parse()将字符串解析为新的对象。这种方法可以实现简单的深拷贝，但是有一些限制，例如无法拷贝函数和特殊类型的对象（如Date对象）。
2023-11-10 17:28:57
253
原创 dev-server是怎么跑起来?
dev-server是一个开发环境下的轻量级服务器，常用于运行和调试前端应用程序。在上述示例中，contentBase指定了静态文件的根目录，port指定了服务器监听的端口号，open设置为true表示自动打开浏览器。2： 配置dev-server：在项目的webpack配置文件中，添加devServer选项来配置dev-server。1：安装dev-server：首先，你需要在项目中安装dev-server的npm包。3： 启动dev-server：在终端中运行以下命令，启动dev-server。
2023-11-10 17:23:49
135
原创 数组常用的合并方法有哪些?
4： concat()和spread operator的结合使用：结合使用concat()和展开运算符可以合并多个数组。2： spread operator（展开运算符）：使用展开运算符(…)将多个数组合并到一个新数组中。3： push()：使用push()方法将一个数组的元素添加到另一个数组的末尾。这些方法都可以实现数组的合并，你可以根据具体的需求选择合适的方法来合并数组。1：concat()：将多个数组或值合并到一个新数组中。
2023-11-10 17:13:41
165
原创 React-hooks有哪些 包括用法是什么？
React Hooks是React 16.8版本引入的功能，它允许你在函数组件中使用状态（state）和其他React特性，而无需编写类组件。这些是一些常用的React Hooks，但还有其他一些可用的Hooks，如useCallback、useMemo、useRef等，它们提供了更多的功能和灵活性。4： useReducer：用于在函数组件中管理复杂的状态逻辑，类似于Redux的reducer。3： useContext：用于在组件中访问React的上下文（context）。
2023-11-10 17:07:13
237
原创 如何配置React-Router？
3：导航链接和路由参数：在需要导航的地方使用Link组件来创建链接，并使用exact属性确保只有在路径完全匹配时才进行渲染。2：创建路由组件：在你的应用程序中创建路由组件，用于定义不同URL路径下的页面组件。在上述例子中，About组件内部定义了两个子路由/about/company和/about/team，根据路径匹配对应的子组件进行渲染。在上述例子中，App组件是根组件，Switch组件用于包裹Route组件，根据URL路径匹配对应的页面组件进行渲染。
2023-11-10 17:05:20
123
原创 现在有一个100tb的文件，让你一分钟之内把这个文件遍历出来，怎么做
将文件分割成较小的数据块，并创建索引以加快查找速度。可以根据文件的特性和数据结构选择适当的分片和索引方式。例如，对于文本文件可以使用行号作为索引，对于二进制文件可以使用固定大小的块作为分片和索引。遍历一个100TB的文件并在一分钟内完成是一个巨大的挑战，因为这需要高效的存储和处理能力。使用压缩算法来减小文件的大小，从而减少遍历所需的时间。同时，可以使用索引技术来快速定位和访问文件中的关键数据。选择适当的算法和数据结构来处理文件的遍历。以上方法可能需要强大的计算和存储资源，并且需要合理的系统架构和算法设计。
2023-11-10 16:59:16
175
原创 进程、线程区别，举个生动的例子？
每个进程有自己的执行状态，通过操作系统的调度，可以在多个进程之间切换。线程是进程内部的执行流，多个线程在一个进程内并发执行，共享进程的资源。1：定义：进程（Process）是正在运行的程序的实例，它拥有独立的内存空间和系统资源。线程（Thread）是进程内的执行单位，一个进程可以拥有多个线程，它们共享进程的内存空间和资源。线程是进程内调度的单位，多个线程共享进程的资源，线程之间的切换开销较小。总结：进程是独立的执行单位，拥有独立的资源，而线程是进程内的执行单位，共享进程的资源。
2023-11-10 16:56:39
76
原创 浏览器的核心线程和核心进程有哪些？
1： 渲染线程（Main Thread）：渲染线程是浏览器中最主要的线程，负责处理用户界面、页面布局、样式计算、绘制等任务。5： 异步HTTP请求线程：异步HTTP请求线程用于处理异步的网络请求，例如使用XMLHttpRequest对象或Fetch API发送的请求。6： Web Worker线程：Web Worker线程是一种独立的后台线程，用于执行耗时的计算任务，以避免阻塞渲染线程。2： 浏览器进程：浏览器进程是控制整个浏览器的进程，负责管理和协调其他进程的工作。
2023-11-10 16:55:20
124
原创 说说tcp三次挥手，为什么不能两次？
TCP（传输控制协议）是一种可靠的面向连接的协议，用于在网络中传输数据。TCP的连接的关闭是通过三次挥手（Three-Way Handshake）来完成的，这是由于TCP的全双工通信特性以及保证数据可靠传输的需求。下面是TCP三次挥手的过程：1：第一次挥手（FIN）：当一方（假设为客户端）想要关闭连接时，它将发送一个带有FIN标志的TCP段，表示它已经完成了数据的发送。2：第二次挥手（ACK）：另一方（服务器）接收到FIN后，会发送一个确认（ACK）给客户端，表示已经收到了客户端的关闭请求。
2023-11-10 16:52:58
43
原创 node有哪些框架可以处理脚本攻击（或者是库）？
Express.js是一个流行的Node.js Web应用程序框架，它提供了一组易于使用的API来构建Web应用程序。Koa.js是另一个轻量级的Node.js Web框架，它由Express.js的原始开发者创建。Koa.js的中间件系统可以用于处理各种安全问题，如XSS攻击、CSRF攻击等。Helmet是一个Node.js的安全中间件，它帮助你设置各种HTTP头，以增强应用程序的安全性。在Node.js中，你可以使用cors库来处理CORS相关的安全问题，如控制哪些域名允许访问API、处理预检请求等。
2023-11-10 16:51:41
88
原创 前端安全方面有哪些攻击方式？
CSRF攻击是指攻击者通过欺骗用户在受信任网站上执行恶意操作，从而利用用户的身份和权限发送请求，例如更改用户密码、转账等。攻击者通常通过伪造请求或利用用户的会话信息来实施攻击。攻击者通过尝试多个可能的密码组合，或使用强力计算机系统进行大量尝试，以猜测用户的密码或破解密码。XSS攻击是指攻击者通过在网页中注入恶意脚本，使得用户在浏览器中执行该脚本，从而窃取用户敏感信息、篡改页面内容或进行其他恶意行为。攻击者可以通过修改URL参数的值来改变应用程序的行为，例如访问未授权的资源、执行未经授权的操作等。
2023-11-10 16:49:46
667
原创 Vue的状态管理有哪些？
通过Composition API，你可以使用ref、reactive等函数来定义和跟踪状态，使用computed函数来计算派生状态，以及使用watch函数来监听状态的变化。Vuex是Vue官方提供的状态管理库，用于管理Vue应用程序中的状态。Pinia是一个专为Vue 3设计的状态管理库，它提供了类似于Vuex的API和概念，但具有更好的类型推断和性能优化。Pinia使用Vue的响应式系统来跟踪和更新状态，并提供了一些API和工具来访问和修改状态。它适用于简单的状态管理需求，不需要引入额外的状态管理库。
2023-11-10 16:45:27
229
原创 除了http还有哪些通信协议？
1：HTTPS：HTTPS（HTTP Secure）是HTTP的安全版本，通过使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）协议对通信进行加密和认证，确保数据在传输过程中的安全性和完整性。7：WebSocket：WebSocket是一种全双工通信协议，它在浏览器和服务器之间建立持久性的连接，实现实时的双向通信。2：FTP：FTP（File Transfer Protocol）是用于在计算机网络上进行文件传输的协议。
2023-11-10 16:43:18
1100
原创 React状态管理有哪些？
通过创建一个Context对象，你可以在需要共享状态的组件中使用Provider提供状态，并在其他组件中使用Consumer或useContext钩子来获取状态。MobX是一个简单、可扩展的状态管理库，它使用观察者模式来自动追踪状态的变化并更新相关组件。通过使用@observable注解标记状态，@observer注解标记组件，以及@action注解标记更新状态的方法，MobX可以实现响应式的状态管理。Zustand是一个轻量级的状态管理库，它提供了简单的API和Hooks来管理React组件的状态。
2023-11-10 16:39:44
304
原创 vue、react数据绑定的区别？
需要注意的是，虽然 Vue 支持双向数据绑定，但在 React 中也可以实现类似的效果，例如使用受控组件（controlled components）来实现表单元素与数据的双向绑定。受控组件通过将表单元素的值保存在 React 组件的状态中，并通过事件处理函数更新状态，从而实现了数据的双向绑定。Vue 提供了 v-model 指令用于实现双向数据绑定，可以通过它绑定表单元素的值到 Vue 实例的数据属性。Vue 会自动追踪数据的依赖关系，并在数据变化时更新相关的视图。
2023-11-09 17:06:28
431
原创 浏览器输入url，到看到页面会发生什么？
9：下载资源：在渲染页面的过程中，如果页面包含其他的资源（如 CSS 文件、JavaScript 文件、图像等），浏览器会根据 HTML 中的链接和脚本标签等信息，继续发送请求并下载这些资源。6：服务器发送响应：服务器处理完请求后，会生成一个 HTTP 响应，包括响应状态码（如 200 OK）、响应头（如内容类型、缓存控制）和响应体（包含请求的内容）等信息。7：接收响应：浏览器接收到服务器发送的响应后，会根据响应头中的内容类型决定如何处理响应，例如渲染 HTML、执行 JavaScript、下载文件等。
2023-11-09 17:05:11
221
原创 什么是 CSRF 攻击？如何防止 CSRF 攻击？
CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的网络安全攻击方式，攻击者利用用户已经通过认证的身份在受信任网站上执行未经用户授权的操作。综合采用以上多种防御措施可以有效地降低 CSRF 攻击的风险，开发人员在设计和开发应用时应该充分考虑到这些安全问题，并采取适当的防护措施。
2023-11-07 17:23:54
245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人