- 博客(32)
- 收藏
- 关注
原创 post为什么会发送两次请求?
同源策略是一个重要的安全策略,它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。如果两个 URL 的协议、主机和端口都相同,我们就称这两个 URL 同源。协议:协议是定义了数据如何在计算机内和之间进行交换的规则的系统,例如 HTTP、HTTPS。主机:是已连接到一个计算机网络的一台电子计算机或其他设备。网络主机可以向网络上的用户或其他节点提供信息资源、服务和应用。使用 TCP/IP 协议族参与网络的计算机也可称为 IP 主机。
2024-03-27 09:16:57
1314
原创 前端涨薪功法:为什么你写的代码运行慢?
时间复杂度分析是一种用于衡量算法执行时间的方法。它帮助我们确定算法在执行时所需的时间资源。时间复杂度是指算法所需的操作次数,随着输入大小的增加而增加的速率。强调的是一个相对于输入数据规模大小,所需时间的趋势在进行时间复杂度分析时,我们通常关注算法的最坏情况。这是因为算法的最坏情况给出了算法的最大执行时间。确定算法的基本操作,例如赋值、比较、循环等。确定每个基本操作的执行次数。将每个基本操作的执行次数相加,以确定算法的总操作次数。确定算法的最大执行次数,并将其表示为时间复杂度。i <= n。
2024-03-26 08:30:00
1325
原创 学会Sass的高级用法,减少样式冗余
你可以使用@function指令定义自己的Sass函数。h1 {// 等同于 font-size: 2em;
2024-03-25 09:02:39
2140
原创 用 JavaScript 发起 HTTP 请求的几种方法
我们刚刚了解了在 JavaScript 中最常用的创建 HTTP 请求的几种方式。
2024-03-22 08:30:00
6002
1
原创 面试官常问的一些初中级前端知识点
一个盒子由四个部分组成:content、padding、border、margin。两种盒子模型:W3C 标准盒子模型、IE 怪异盒子模型标准盒子模型 width / height 只是内容高度,不包含 padding 和 border 值;IE 怪异盒子模型 width / height 包含了 padding 和 border 值面试的题目大都是开发中会使用到的,回答的时候要讲重点,逻辑清晰即可。
2024-03-21 08:30:00
1144
原创 为什么面试官都爱问websocket?
WebSocket 是一种在单个 TCP 连接上进行全双工通信的应用层协议,它弥补 HTTP 协议在持久通信能力上的不足,允许服务器主动向客户端推送数据,并且简化了客户端和服务器之间的数据交换。在 WebSocket 通讯中,浏览器和服务器只需完成一次握手,便可创建持久性连接。WebSocket最大特点是服务器可以主动向客户端推送信息,同时客户端也能够主动向服务器发送信息,实现了真正的双向平等对话,属于服务器推送技术的一种。webSocket就是服务器和客户端相互主动传输信息的约定协议。
2024-03-20 08:30:00
1496
原创 实现扫码登陆
3、解决了上面提到的问题,就在以为万事大吉,只待提测的时候。在跟后台联调的过程中发现定时器每1s请求一次接口,发现很多接口没等响应就开启下一次的请求,很多请求都还在pending中,这样是不对的,对性能是很大消耗。所谓的轮询就是,由后端维护某个状态,或是一种连续多篇的数据(如分页、分段),由前端决定按序访问的方式将所有片段依次查询,直到后端给出终止状态的响应(结束状态、分页的最后一页等)。试了下确实达到效果了,但其实这个问题产生的具体原因我还是有些模糊的,希望遇到过相关问题的大佬能指点一下,感激不尽!
2024-03-19 08:30:00
1167
原创 面试官问我String能存储多少个字符?
我们重点关注下长度为 length 的那个bytes数组,这个数组就是真正存储常量数据的地方,而 length 就是数组可以存储的最大字节数。对于s1,一个字母d的UTF8编码占用一个字节,65534字母占用65534个字节,长度是65534,长度和存储都没超过限制,所以可以编译通过。对于s2,一个中文占用3个字节,21845个正好占用65535个字节,而且字符串长度是21845,长度和存储也都没超过限制,所以可以编译通过。所以在最坏的情况下,一个最大的字符串要占用4GB的内存。
2024-03-18 08:59:00
618
原创 面试常问:为什么 Vite 速度比 Webpack 快?
通过使用export和import语句,ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时,开发者实际上是在构建一个依赖关系图,不同依赖项之间通过导入语句进行关联。主流浏览器(除IE外)均支持ES Modules,并且可以通过在 script 标签中设置来加载模块。默认情况下,模块会延迟加载,执行时机在文档解析之后,触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前,对项目中所需的依赖项进行预先的处理或构建。
2024-03-17 08:30:00
771
原创 面试官:手写下防抖节流
防抖节流的目的都是为了控制函数执行的频率,但是二者原理不同,防抖是一种延迟策略,即一段连续的触发事件结束后,等待一段时间再去执行;节流是一种控制函数执行频率的策略,一段时间内只执行一次。这两个东西面试容易让你手写代码,建议大家自己多尝试下自己去写函数。
2024-03-16 08:30:00
503
原创 前端跨域的几种方式
跨域是指在浏览器你执行脚本时,通过等方式请求不同源(协议、域名、端口)的资源。同源策略是浏览器的一种安全机制,它限制了网页中的脚本只能与同源(相同协议、域名、端口)的资源进行交互,防止恶意网站获取用户的敏感信息或进行攻击。在同源策略下。浏览器允许脚本访问同源的资源,但不允许访问不同域的资源。跨域请求会触发浏览器的安全机制,导致请求被拒绝。例如,如果网页在域名A下加载了一个脚本,而在这个脚本尝试访问域名B下的资源,浏览器阻止这个跨域请求。
2024-03-15 08:30:00
1529
原创 你对前端网站性能优化有何见解?
尽量少用页面中的自定义字体,自定义字体通常需要通过 HTTP 请求来加载,而每个额外的 HTTP 请求都会增加页面加载时间。尽量考虑使用 Web 安全字体(如 Arial、Helvetica、Times New Roman 等)这些一般会装在大部分设备上的字体作为备用字体,无需额外下载。
2024-03-14 08:30:00
1185
原创 前端是时候正式认识一下package.json了
天天见,知道个scripts,但真的还不算认识它!这两天因为想分享一些小工具,发个包啥的,所以就整理了关于的一些基础知识,现在我反正是正儿八经的认识了,如果像以前的我一样跟它不是很熟的朋友可以看下。
2024-03-13 08:30:00
1137
原创 ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
ES2016(ES7)中新增了如下特性👇方法用来判断一个数组或字符串中是否包含一个指定的值返回值: 如果包含返回,否则返回。语法: fromIndex大于等于数组长度,返回 计算出的索引小于0 如果为负值,使用计算出的索引作为新的,如果新的为负值,则搜索整个数组。 幂运算符,相当于ES2017(ES8)新增了以下特性👇 是 声明的函数, 函数是 构造函数的实例,其中允许使用 关键字。返回值:一个语法:举例:返回值:方法返回一个给定对象自身可枚举属性的键值对数
2024-03-11 10:00:43
1342
原创 想要白嫖正则是吧?这一次给你个够!
对正则阅读有障碍的同学可以借助这个网站/,将正则可视化,从此爱上读正则!可视化后,直接看图说话,小白都会,真滴 tql!!好了,冲了!
2024-03-10 08:30:00
1140
1
原创 如何让自己的前端知识更全面
要想自己的前端知识学的扎实,我们就一定要形成这样一个个知识图谱,里面从基础概念到应用到原理,让自己的知识脉络形成一张网,然后我们不断地在这张网上进行修补或扩充。”站点,它不再是专注开发中的各个知识细节,而是从整个前端开发知识体系出发,以网带面,做到各个知识点的链接和覆盖。还有一点就是,你可以从这个网站上看到很多代码的动态演示效果,这也是我目前在探索的领域,希望以生动直接的方式来讲解知识点。平时写博客记录的是零碎的知识点,我们还要做一个这样的知识图谱站,系统去梳理某个知识领域的所有知识点。
2024-03-09 08:15:00
550
1
原创 如何避免前端请求明文传输
使用 HTTPS 协议发送请求,所有的数据都会在传输过程中进行加密,从而保护数据不以明文形式传输。这样即使数据被截获,黑客也无法直接获取到数据的内容。在前端对敏感数据进行加密处理,然后再发送请求。可以使用一些加密算法,如 AES、RSA 等,将敏感数据进行加密后再发送到服务器。这样即使数据在传输过程中被截获,也无法直接获取其内容。在发送请求之前,前端对请求参数进行签名处理,并将签名结果和请求一起发送到服务器。服务器端根据事先约定的签名算法和密钥对请求参数进行验证,确保请求的完整性和可靠性。
2024-03-08 09:57:41
2925
1
原创 你知道移动端适配吗?
100vw 相当于整个视口的宽度 innerWidth,1vw 相当于视口宽度的 1%,将 px 转换为 vw 即可完成适配,其实上面的 rem 就是模仿 vw 方案。rem 单位是相对于 html 元素的 font-size 来设置的,通过在不同屏幕尺寸下,动态的修改 html 元素的 font-size 以此来达到适配效果。思路:通过监听屏幕尺寸的变化来动态修改 html 元素的 font-size 大小。思路:通过媒体查询来设置不同尺寸屏幕下 html 的 font-size。
2024-03-07 08:30:00
1065
1
原创 中高级前端工程师必备14种性能优化方案
浏览器在下载和解析script文件的时候会停止html的解析和 CSSOM 的构建。所以,在以前我们通常喜欢把< script >标签放在html的最后面。当然,不想将< script >标签放在后面又不想让script的下载和解析影响html的渲染,也有方案。在script标签中加上defer属性即可。script标签的defer属性可以让script异步加载并在DOM构建完成和CSS渲染完毕之后再执行。写文章 - script标签中的async和defer标签到底是干什么的?
2024-03-06 08:30:00
3610
1
原创 uniapp分包
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。出现这几个字的原因是由于用户刚进入的界面必定是主包,而在用户进入分包的时候,由于分包资源还未下载,所以微信官方便贴心的提示用户正在加载分包资源。9、要清楚的是分包是一种不得已而为之的手段,确保在分包前项目中静态资源已优化完毕,且没有大量注释或无用代码也是一种手段。2). 分包:除主包外的所有页面都应放置在分包内,为避免读者混淆,本文会将该分包定义为。
2024-03-05 10:24:03
1711
1
原创 React-Redux使用
官方推荐的编写 Redux 逻辑的方法。包封装了核心的redux包,包含我们认为构建 Redux 应用所必须的 API 方法和常用依赖。Redux Toolkit 集成了我们建议的最佳实践,简化了大部分 Redux 任务,阻止了常见错误,并让编写 Redux 应用程序变得更容易要写任何的 Redux 逻辑,你都应该使用 Redux Toolkit 来编写代码创建 Redux Toolkit 来消除手写 Redux 逻辑中的「样板代码」,防止常见错误,并提供简化标准 Redux 任务的 API。
2024-03-04 09:30:57
1307
1
原创 解析 Pinia 和 Vuex,带你全面理解这两个 Vue 状态管理模式
和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现方式,那么我们肯定要先在我们的中引入这两个状态管理器(实际项目中千万不要即用Vuex又用Pinia,不然你会被同事请去喝茶的。下面就让我们看下它们的使用方式吧。
2024-03-02 12:02:44
1120
原创 React Router v6 指南
React Router 创建于 2014 年,是一个用于 React 的声明式、基于组件的客户端和服务端路由库,它可以保持 UI 与 URL 同步,拥有简单的 API 与强大的功能。大多数现代 React 项目使用 npm、yarn、pnpm 等包管理器来管理项目依赖项。// npm// pnpm// yarnreact:18.0.0react-dom:18.0.0:6.3.0:6.3.0- public- src- App.tsx:为 React 应用提供了路由的核心功能;
2024-03-01 09:53:35
1201
1
原创 最全的git命令(详细)和对常见git操作流程讲解
Git是分布式代码托管的标杆, git命令博大精深,各种玩法,可能很多人对git命令还停留在三段式(git pull 、git commit、git push),这样应付正常的提交没啥问题,但如果团队引入了分支、标签概念,需要不同分支进行各种复杂操作,暂存区和远程仓库联动操作,这时候相信不熟悉git命令的程序员肯定会手忙脚乱,很容易出错。;表示显示所有提交过的用户,按提交次数排序。(我也是把这文章当做字典查阅)
2024-02-28 09:33:33
3469
原创 webpack配置---实现某文件夹文件不进行打包
from配置的是不被压缩的文件夹的位置(相对于配置文件来说的位置),本例中webpack配置文件与静态资源文件夹均在项目根目录下。to属性配置的是打包后静态资源文件夹里的文件被放到打包文件夹下的隶属文件夹名。static目录下的文件不可通过require或者import的方式引入文件,否则该文件就会参与打包。这时候我们可以通过webpack的插件copy-webpack-plugin,保留某一文件夹下的的所有文件。2. 在项目下新建一个文件夹用于存储不想被编译的文件,如‘static’。
2024-02-27 09:50:09
1024
1
原创 读懂vue3的生命周期
在Vue3中,一些常见的钩子函数发生了变化。例如,vue2中的created和beforeCreate钩子函数被替换为了setup(),并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同
2024-02-26 16:33:57
1728
1
原创 React Hooks 完全使用指南
React HooksHook 是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是 React 团队在 React 16.8 版本中提出的新特性,在遵循函数式组件的前提下,为已知的 React 概念提供了更直接的 API:props,state,context,refs 以及声明周期,目的在于解决常年以来在 class 组件中存在的各种问题,实现更高效的编写 react 组件
2024-02-26 16:21:54
1450
1
原创 Vite 配置:这些配置日常开发够用了!
相信大部分兄弟都体验过Vite了,都知道它很快。在学习的时候,官网上的各种配置也是看的眼花缭乱,不知道哪些是必要掌握的。为了提高效率,我把常用的一些配置梳理一下,希望对大家有所帮助。
2024-02-26 15:58:40
1920
1
原创 webpack4.X 5.X-- 打包结果优化
Tree-shaking意为摇树,作用是剔除没有使用的代码,以降低包的体积,它是基于ES Module 规范来实现的,所以**Tree Shaking 只支持 ESM 的引入方式,不支持其他的引入方式。所以,ESM 下模块之间的依赖关系是高度确定的,鉴于此,webpack可以在运行过程中静态分析模块之间的导入导出,确定 ESM 模块中哪些导出值未曾其它模块使用,并将其删除,以此实现打包产物的优化。鼠标hover上去可以看到每个依赖的体积大小,从上往下,表示依赖的嵌套关系。
2024-02-26 10:02:19
985
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人