- 博客(41)
- 收藏
- 关注
RSS订阅原创 webpack
是为现代js应用提供静态模块打包的工具可以将不同类型资源按模块处理进行打包打包后最终产出静态资源，最终产出的内容可以直接部署在静态服务器上使用webpack支持不同规范的模块化开发，例如esmodule,commonjs,amd规范等比如vue项目生成的public文件夹给我们这个index.html替换下npm run build会报错原因是因为会把./原封不动拿过来给BASE_URL,但是我们期望的是个字符串，所以说加个""就可以了。
2024-04-24 22:05:17
631
原创 HTTP1.0,HTTP1.1，持久连接，非持久连接，TCP，UDP，三次握手和四次挥手，HTTP与HTTPS，对称加密和非对称加密，状态码
但是对称加密的存在一个问题，就是如何保证秘钥传输的安全性，因为秘钥还是会通过网络传输的，一旦秘钥被其他人获取到，那么整个加密过程就毫无作用了。在HTTP1.0中，每个TCP连接都只能处理一项任务，也就是说每个连接都只能请求一个资源，这种方式会导致建立和关闭连接的开销过大，特别是在处理大量小文件的时候，连接的开销往往比传输文件的开销还要大。TCP 使用四次挥手的原因是因为 TCP 的连接是全双工的，所以需要双方分别释放到对方的连接，单独一方的连接释放，只代表不能再向对方发送数据，连接处于的是半释放的状态。
2024-02-27 15:05:12
1767
原创 js数组方法
如果只是删除元素而不添加新元素，splice方法会返回一个包含被删除元素的数组。增：可以向指定位置插入任意数量的项，只需提供3 个参数：起始位置、 要删除的项数、要插入的项。例如，splice(2,0,4,6)会从当前数组的索引位置 为2 的地方开始插入 4 和 6。删：可以删除任意数量的项，只需指定2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。改：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定。
2023-12-25 15:57:25
918
原创 怎么判断数据类型？
分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。Biglnt是一种数字类型的数据，它可以表示任意精度格式的整数，使用Biglnt可以安全地存储和操作大整数，即使这个数已经超出了Number能够表示的安全整数范围。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了。instanceof可以正确的判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。引用数据类型：对象，数组，函数。
2023-12-21 17:00:23
382
原创 flex:1
例1：设置父元素width=600px，三个子元素A、B、C，A的width为140px，flex为2 1 0%，B的width为100px，flex为2 1 auto，C不设width，flex为1 1 200px。举例：父元素width=400px，子元素A的width=100px，子元素B的width=200px。分配到的减小宽度 = 超出宽度*（自身宽度*（自身元素的flex-shrink值 / 所有子元素的flex-shrink值 * 自身宽度 的和））A的宽度：100+100=200px。
2023-12-18 10:58:23
877
原创 强缓存和协商缓存
在实际应用中，可以根据资源的更新频率和重要性来选择合适的缓存策略。某些常见的静态资源，如图片、CSS 和 JavaScript 文件，通常适合使用较长的强缓存时间，以减少对服务器的请求。而对于经常更新的动态内容，则可能需要更短的缓存时间或使用协商缓存机制来确保及时获取最新数据。需要注意的是，强缓存优先于协商缓存，即在强缓存有效期内，浏览器不会发送请求到服务器进行协商。强缓存和协商缓存在实际应用中的策略是根据具体需求和资源特性来确定的。如果没有更新，则返回 304 状态码，告知浏览器可以使用本地缓存。
2023-11-23 14:05:04
37
原创 领航项目总结
封装了自定义的节流hook，在需要搜索的业务场景下可以有效的节约资源，避免请求频发。对图片上传组件进行了二次封装，使其能够适用于业务场景。介绍：主要就是一个大数据的看板，根据不同的维度（时间，省区，指标）难点：后端一次性返回大量数据时，渲染卡顿，切换tab页面时也会卡顿。亮点：使用websocket长连接，来到一个数据的实时更新和渲染。克服：应用了虚拟列表的方案实现了对需要展示数据的显示，节约了资源。对一些公用组件的封装。
2023-11-23 13:41:59
42
原创 包管理工具内容
前端包管理器是用于管理前端项目依赖项（如库、框架和工具）的工具。它们有助于确保项目的依赖项始终保持最新、可维护和可复制。这些前端包管理器可以根据项目需求和团队偏好进行选择。npm和Yarn以及pnpm是最常用的，本文将具体介绍这3种包管理工具。以下是更详细的介绍npm、Yarn和pnpm。
2023-11-22 18:06:43
24
原创 事件循环，同步、异步，宏、微任务
同步任务是按照代码顺序执行的任务，执行结果会同步返回，而异步任务是不按代码顺序执行的任务，执行结果不会立即返回，而是通过回调函数或者Promise等方式返回。微任务和宏任务都是异步任务，宏任务是指在主线程之外的任务，比如定时器、事件回调等，而微任务是指在当前任务之后立即执行的任务，比如Promise的then方法和MutationObserver的回调函数等。宏任务和微任务的区别在于宏任务在任务队列中排队，每次只执行一个任务，而微任务在任务队列之后执行，每次执行所有微任务。
2023-11-22 16:21:59
840
原创 面试问题(深拷贝与浅拷贝，useRef，强缓存与协商缓存，类组件与函数组件)
前端面试，深拷贝与浅拷贝，useRef，强缓存与协商缓存，类组件与函数组件
2023-11-20 16:57:15
30
原创 关于http协议
HTTP协议(超文本传输协议HyperText Transfer Protocol)，它是基于TCP协议的应用层传输协议，简单来说就是客户端和服务端进行数据传输的一种规则。HTTP是一种(stateless) 协议,HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性，从而能够快速处理大量的事务, 提高效率。
2023-11-17 12:10:22
27
原创 前端优化方案
2、加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；DNS 预解析：浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。3、延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
2023-11-17 11:44:08
37
原创 客户端渲染和服务端渲染（CSR和SSR）
以VUE为例，通过接口更新到页面的数据后完整的页面展示；CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。目前使用MV*架构的项目，大都是前后端分离，数据都是动态生成，不利于SEO优化 利于首屏渲染性能高–首屏的页面加载来自于服务器，不依赖与服务端的接口请求再数据处理；例如SEO–因为访问一个请求，返回的就是页面全部的HTML结构，包含所需要呈现的所有数据，于是例如搜索引擎或者爬虫的数据抓取；
2023-11-17 11:41:13
61
原创 面试问题总结以及扩展11.14
Map和object的区别 Es6新增的特性 箭头函数和普通函数的区别 For in 和for of的区别 常用的hooks useRef的详细内容 React18新增的hooks了解吗 场景题：如何获取更新前的值 creatRef和useRef的区别 webpack的loader和plugins webpack配置 http协议 服务端渲染 浏览器缓存方式 Cookie、localStorage、sessionStorage的区别 ServiceWorker 首屏优化 性
2023-11-14 16:15:05
46
1
原创 promise的方法
Promise.all 方法，提供了并行执行异步操作的能力，并且在所有异步操作完成之后，统一返回所有结果。all 接收到的是一个数组，数组长度取决于 Promise 的个数。接收一个Promise[]返回一个Promise实例，当所有的 Promise 执行完毕并且都是fulfilled时，该实例的状态才会变为fulfilled只要队列中有一个实例的状态是rejected，那么该实例的状态也会变为rejected如果 Promise 队列中所有的实例状态都是fulfilled，那么。
2023-11-09 15:12:24
56
1
原创 React.memo总结
此方法是一个React顶层Api方法，给函数组件来减少重复渲染，类似于PureComponent父和shouldComponentUpdate方法的集合体。memo它是专门给函数组件用来减少子孙组件的非必要渲染。
2023-11-08 15:42:56
36
1
原创 react性能优化案例
钩子用于优化 React 组件的性能，在需要进行复杂计算或大量数据处理时，可以减少组件的渲染次数。它接受两个参数，第一个参数是一个函数，用于计算需要缓存的值，第二个参数是一个数组，用于指定当依赖项发生变化时需要重新计算缓存值。钩子所返回的缓存值，它表示根据参数计算得到的月/季/年时间类型的默认日期，可以在组件中使用。参数计算得到一个月/季/年时间类型的默认日期，并将其缓存起来。等，分别表示天、周、月、季、年等不同的时间类型；计算得到一个月/季/年时间类型的默认日期。参数表示时间类型，可能的取值为。
2023-11-06 18:00:48
28
原创 XMLHttpRequest 对象的状态
`0` (UNSENT): XMLHttpRequest 对象已创建，但尚未调用 `open` 方法。- `3` (LOADING): 响应正在接收中。`responseText` 属性已经包含部分数据。- `1` (OPENED): `open` 方法已被调用。请求已打开，但尚未发送。- `2` (HEADERS_RECEIVED): 请求已发送，响应头部已接收到。- `4` (DONE): 响应已完成且全部数据已接收到。
2023-11-02 18:22:06
43
1
原创 关于html-input输入框
当限制了input框的type为number后，在pc端确实可以限制输入为数字类型，但是在端，特别是ios系统下，依旧可以输入其他内容（字母，符号等），此时需要再添加一条属性：pattern="[0-9]*"这样就可以限制移动端只能输入数字了。
2023-10-12 15:26:26
41
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人