- 博客(76)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 常见攻击方式及防范措施
本文将介绍常见的前端安全攻击方式，并提供相应的防范措施。攻击方式：攻击者将目标网页放置在透明的iframe中，并在上面覆盖伪装成目标网页的恶意页面，用户看似在点击无害的页面，实际在点击恶意页面。2、使用 CSP（内容安全策略）：CSP 可以指定页面允许加载的资源来源，限制脚本的执行，从而减少 XSS 攻击的可能性。场景：你在柜台签收快递，但黑客在签字板上覆盖了一层透明的玻璃，你以为签收的是快递，实际是其他的操作。攻击方式：网页上的按钮被透明的iframe覆盖，你以为签收的是快递，实际是贷款合同。
2025-04-14 16:37:44
371
原创 Web Worker
Web Worker的作用，就是为了Javascript创造多线程环境，允许在主线程的进程上创建Web Worker进程，允许在主线程的基础上，将一些任务分给后者运行，在主线程运行的同时，Web Worker线程也可以单独运行，两个互不干扰，等到Web Worker线程运行完了之后，再将结果反馈给主线程，这样最大的好处就是分担了主线程的压力，使主线程运行的更加的流程。上面代码中，Worker 线程内部新建了10个 Worker 线程，并且依次向这10个 Worker 发送消息，告知了计算的起点和终点。
2025-04-10 16:33:18
509
原创 账户互通-单点登录
用户第一次登录会收到认证中心的两个 token，假设用户过了一段时间去登录子系统，原 token 过期了，子系统告诉这个 token 失效，此时用户会将 刷新 token 发给认证中心去验证，认证中心会返回一个新的 token 给到用户，用户再去访问子系统就可以正常访问了。当用户访问某一个子系统时候，会带上token，子系统是会自己进行认证的，具体认证方式也有很多，比如和认证中心交互密钥，子系统拿到密钥之后可以自行认证用户的token是否是认证中心颁发的，一旦认证成功就可以正常登录。
2025-03-24 11:29:14
336
原创 如何让你的历史提交变成一天干净的时间线
1、在使用git rebase 前需要保证服务区是干净的，如果服务区有变更的文件，变基是不会成功的，可以提交文件或者暂存文件是服务区保持干净。往往在我们自己开发时候，别人可能先把功能开发完了就push到远程了，所以我们任务开发完成以后，往往需要先pull下再推到远程。比如说我们在开发需求的时候，别人提交了代码，此时你再提交时候，需要先拉取别人的代码再能提交自己的代码。我们都知道git pull是从远程拉取分支的，估计很少人知道，在拉取分支的时候，还进行了合并操作。这样我们的分支看起来就会特别的凌乱。
2025-02-13 15:31:48
280
转载 减少样式计算的范围和复杂度
JavaScript通常用来改变页面的视觉效果。比如通过改变style样式或者通过计算后改变页面布局，比如搜索或排序数据。长时间运行的JavaScript可能是导致性能问题的常见原因，应该尽可能地减少它的影响。
2024-12-20 15:50:48
29
原创 压缩图片相关
为此，只要在需要文件内容的地方提供对象 URL 即可。有个折衷的方案，我们可以设置一个阈值，如果 png 图片的质量小于这个值，就还是压缩输出 png 格式，这样最差的输出结果不至于质量太大，在此基础上，如果压缩后图片大小 “不减反增”，我们就兜底处理输出源图片给用户。为了避免压缩图片变形，一般采用等比缩放，首先要计算出原始图片宽高比 aspectRatio，用户设置的高乘以 aspectRatio，得出等比缩放后的宽，若比用户设置宽的小，则用户设置的高为为基准缩放，否则以宽为基准缩放。
2024-12-12 09:39:11
894
原创 前端灰度发布
但是这里存在一个问题，每一个页面都需要去获取灰度规则，然后判断是否灰度，这个灰度请求将阻塞页面的，可能会造成较差的用户体验，所以我们可以考虑使用客户端的localStrage来存储这个用户是否为灰度用户，而不是每次请求资源时都发请求去判断是否为灰度用户，然后定期的更新localStrage内存储的值，取代大量的请求造成的体验问题。上面的代码中，有A，B两个版本的界面，用户请求的资源在返回之前先通过getRule获取灰度规则，确定了是否在白名单里，然后决定返回那一套模板内容。
2024-12-11 10:55:06
925
原创 好用又有技巧的Javascript方法
) 操作符的功能类似于( . )链式操作符，不同之处在于，在引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。当我意识到逗号(,)是一个独立的操作符时，我感到很惊讶，而且从来没有注意到它的存在。逻辑运算符（ || ）：对于一组操作数的逻辑或（||，逻辑析取）运算符，当且仅当其一个或多个操作数为真，其运算结果为真。||= 空赋值运算符 ：逻辑空赋值运算符 (x ||= y) 仅在 x条件为假的时候对其进行赋值，与或的供能差不多。
2024-11-22 16:10:46
364
原创 一行代码实现字符串模版替换
我们在实际项目开发中，经常会遇到字符串模版替换的问题，在最开始的时候，我们使用“+”号进行拼接替换的，但实际项目中的情况比这更加复杂，可能有很多变量需要拼接替换，如果都使用+号的话，不仅仅替换起来比较困难，还很容易出错，出错后，定位问题也比较困难，后续的维护更是困难重重，即便后面有了ES6模版字符串，但针对复杂的字符串模版替换依然满足不了需求，比如，在搜索文章中，我们需要根据关键字找到对应的文章，并且筛选出文章后，在文章中筛选的关键字进行标红处理。方法五：使用正则表达式中的非贪婪模式来实现。
2024-11-21 16:21:25
168
原创 更简单快捷的处理URL参数
例如这里url.protocol的返回值是’https:’，ftp.protocol的返回值是’ftp:‘。URL构造函数中传入的地址必须是绝对地址，非绝对地址就会报错，如果第一个参数是相对地址，那么后面的base必须有是觉得地址，若第一个是觉得地址，第二个可不传参。host：URL地址中host主机地址，包括协议端口号，这里url.host的返回值是’www.zhangxinxu.com:80’。ftp协议中比较常见。例如这里url.port的返回值是’80’，ftp.port的返回值是’‘。
2024-11-15 16:35:55
1438
原创 覆盖CSS样式，抛弃important吧
在定义修改样式的时候，我们经常需要修改样式去满足UI不同的样式，在绝大部分情况下，当我们使用后面的样式覆盖前面的样式不生效的时候，就会简单粗暴的使用important来提高它的绝对地位，不允许修改。但在实际开发中，比如我们引用了第三方库的样式，此时如果要对样式进行修改，以上方法提高样式优先级都不太可行。所以往往我们在覆盖样式时候，除了加id class等样式名以提高样式等级之外，在权重等级相同的时候，只能使用先后顺序来覆盖样式。我之前写的样式呢，谁把我的样式覆盖了，无语。
2024-11-14 16:37:41
501
原创 通俗易懂的正则表达式
正则表达式的英文是regular expression简称regex。正则表达式就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，并让计算机用这个规则去检索符合规则的文本。创建正则表达式1、利用RegExp new RegExp(‘expression’)2、双反斜杠 / expression /属性解释：1、g 匹配全局2、 i 忽略大小写元字符：元字符是正则表达式中的特殊字符，用于定义某种特定的匹配模式。
2024-11-12 15:16:39
1242
原创 JavaScript void 运算符
void是一个一元运算符，接受单个操作数，可以是任何类型，返回一个 undefined。void 在表达式的左边，void 右边的表达式可以是带括号形式（例如：void(0)），也可以是不带括号的形式（例如：void 0）。在一些箭头函数中，若此函数没有对应的返回值，可能会造成一些不可预估的问题，安全起见，对没有返回的函数，可以在前面加上void。在使用立即执行的函数表达式时，可以使用void运算符让js引擎吧一个function关键字识别成函数表达式而不是函数声明。立即调用的函数表达式。
2024-11-07 15:54:13
412
原创 link与@import区别
1、本质区别: link属于html标签,link不仅能加载CSS文件，还能定义RSS、rel连接属性等。5、操作dom: link 支持使用javascript改变样式 （document.styleSheets），后者不可。2、加载顺序：页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。3、兼容性：mport只在IE5以上才能识别，而link是HTML标签，无兼容问题。4、权重：link方式的样式的权重 高于@import的权重。
2024-11-07 13:55:21
378
原创 你对Blob和File对象了解多少
File是JS中代表文件的数据格式，它继承自Blob对象，包含文件的元数据（像文件名。4、stream() 该方法将 Blob 的数据作为一个 ReadableStream 返回，允许你以流的方式处理数据，适合处理大文件。Blob和Flie在文件上传和二进制的数据处理的场景中使用非常的广泛，Blob应用范围更加的广泛，File更专注于文件系统的交互。Flie是Blob的子类，除了用于Blob的所有属性和方法外，还拥有文件的元数据。Blob是纯粹的二进制数据，可以储存任何类型的数据，但不具有文件的元数据。
2024-11-06 16:32:05
538
原创 前端页面是如何渲染的
假设dom解析完成时候，遇到js，js中的代码又是对当前dom进行大量的操作，这样就会造成页面严重的重排和重绘，严重影响性能。布局和绘制：在render树上来运行布局来计算每个节点的几何体，在Render树上会展示有那些节点和样式，但不包括每个节点的尺寸和位置信息，布局就是用来确认所有节点的宽度、高度、坐标等位置信息。在实际项目开发中，无论是vue还是react开发，js占比是远远重于html和css的，处理的时间也会更长，所以会造成页面的卡顿阻塞，在js下载执行完之前，用户什么也看不到。
2024-11-05 16:38:52
1143
原创 数组对象常用方法合集
end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组。通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组。将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。如果为负值，表示倒数。参数的逆运算，将一个数组转为用逗号分隔的参数序列。将两类对象转为真正的数组：类似数组的对象和可遍历。
2024-11-04 15:02:34
164
原创 一行代码实现垂直居中
2、在伸缩盒子中，设置此属性不生效，伸缩盒子中flex-wrap默认是nowrap属性，当设置了flex-wrap属性是nowrap时候，align-content属性不生效。但在 2024 年的Chrome 123 版本中， CSS 原生可以使用 1 个 CSS 属性 align-content: center进行垂直居中。1、由第一个例子可以看出，设置垂直居中，必须有设置对应的高度，居中方才生效，故此属性只针对块级元素和行内块元素生效，对行内元素不生效。
2024-11-04 14:59:46
344
原创 对象深浅拷贝
跟递归拷贝差不多 不一样的是这里面多了一个缓存 如果克隆过了 就不需要重复克隆了。如果解构的是单层对象 则以引用地址不共用。对象的解构赋值是浅拷贝 不能用于深拷贝。
2024-11-01 09:42:22
265
原创 scss小记
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。当一个样式与另一个样式基本相同的时候，只有少量的区别的时候，就可以用@extend来继承相同的部分 不同的部分额外定义即可。
2024-10-30 09:38:22
301
原创 npm 报错集合
编辑编辑当前报错的原因是在less-loader中找不到getOptions方法 应该是新旧版本更新 移除了一些方法属性 所以你需要降版本 降为5.0.0可用编辑编辑node-sass 版本过高 需要降低node-sass版本 降为7.0.3可用。
2024-10-30 09:38:01
611
原创 npm指令合集
package.json里面运行脚本规则是先在全局环境中去找，找不到就在当前环境下去找，也就是node_modules下的.bin文件，如： // “dev”: “./node_modules/.bin/gulp -v”,patch:6 小补办（打补丁）（一般是以偶数结尾 偶数为稳定版本 一般封顶的都是偶数）如果是&& 表示是串行的 一定是前面一个先执行 后面一个再执行。test和start可以简写 省略run。major:13 主版本号 （大更新）~:更新大版本加次版本。
2024-10-29 09:13:43
530
原创 JS知识点小记
（参考：MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER）答案是document. All，包含文档中每个元素的 HTMLAllCollection（来自 MDN:https://developer.mozilla.org/en-US/docs/Web/API/Document/all）。太奇妙了，是否存在不等于自身的值？
2024-10-29 09:13:03
333
原创 es6知识小记
/ 我们可以通过展开运算符向对象添加属性 const person = { id: ‘ak001’, name: ‘ak47’, …((age > 18 || isValid) && {cart: 0}) } console.log('p。传递给Array函数的参数个数不一样，其作用也不一样。幸运的是，我们可以使用 Array.of 来弥补 Array 的不足。我们可以使用 Array.from 方法，如“[].map”。**3）、Array.from的第二个参数 **
2024-10-28 09:21:33
307
原创 CSS函数
此函数用于访问元素属性的值。让我们通过例子来理解它attr函数不是CSS3或其他CSS的一部分，它仍然是CSS3的草稿，甚至最新的浏览器都还没有完全支持当前仅在content属性上支持attr()，该属性可用于伪元素(例如:before，:after)
2024-10-28 09:21:18
886
原创 HTML页面中的位置 ClientX ScreenX PageX OffsetX
特别需要注意的是，在双屏场景中，screenX 和 screenY 要考虑到屏幕顺序问题，如果主屏在右，副屏在左，那么副屏中的 screenX 为负值！ClientX： 鼠标相对于浏览器左上角X轴的位置，不随滚动条滚动而改变。ClientY： 鼠标相对于浏览器左上角Y轴的位置，不随滚动条滚动而改变。PageX： 鼠标相对于浏览器左上角X轴的位置，随滚动条滚动而改变。PageX： 鼠标相对于浏览器左上角Y轴的位置，随滚动条滚动而改变。OffsetX： 鼠标相对于事件源左上角的X轴的位置。
2024-10-26 18:17:15
257
原创 text-align的属性justify
justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。text-align常用的属性是left、center、right，具体的可参考css解释，今天重点记录的对象是。方案二：使用样式伪类的方法，使其变成非最后一行，推荐使用最后一种方式。针对多行文本最后一行文本两端对齐不生效的处理方案。基本原则就是使最后一行的文本变成非最后一行。方案一：添加一行元素使其变为非最后一行。
2024-10-26 18:16:45
627
原创 晦涩难懂的闭包
一个函数在调用完成后，会对应消除这个函数中的所有变量，但由于f1函数在完成后，其内部变量又在f2函数中有被引用到，f2函数会包含其他区函数的作用域，会比其他函数占用更多的内存空间，且不会在调用结束后被垃圾回收机制回收，造成了内存泄漏（我们都知道，函数中有一个return 可以返回函数中的任意变量，这样我们就可以访问到内部函数的变量了。如上案例中，f2函数是f1中的一个函数，并且f1函数访问了f2函数中的变量b，这样对于f2来说就是一个闭包。闭包就是有权访问另一个函数作用域中内部变量或数据的函数。
2024-10-25 10:52:50
286
原创 什么是纯函数
除了修改外部的变量，一个函数在执行过程中还有很多方式产生外部可观察的变化，比如说调用 DOM API 修改页面，或者你发送了 Ajax 请求，还有调用 window.reload 刷新浏览器，甚至是 console.log 往控制台打印数据也是 副作用。foo不是纯函数，foo函数的结果依赖于全局定义的变量，虽然a是个常量，但在一些特殊模式下，常量值也是可以修改的。foo不是纯函数，foo在调用的过程中改变了counter.x的值。foo是纯函数，foo的返回结果只依赖于参数x和y。
2024-10-25 10:51:55
206
原创 绝绝子工具
在网页开发中, 一比一的复制UI设计的时候 , 往往需要一些工具来帮助你精准的量尺寸, 这些测量都是手工的测量, 往往有误差 , 操作很繁琐 有了它 你按下ALT键 就可以很直观的帮助你看到精准尺寸使用方法可以在网页中直接引入网页中不支持直接 script 导入 可以找到源码 然后复制到浏览器的调试面板 的 console 上选择你要查看的元素 按住ALT建即可。
2024-10-25 10:51:15
880
原创 柯里化函数
柯里化函数的缺点：用到了arguments(使用arguments对象比直接操作命名参数慢)、递归、闭包等会带来性能影响。柯里化函数：将多个参数的函数转为可以分段传入函数参数的函数，可以减少对函数备份参数的传入。柯里化函数的优点：减少重复传递的不变参数。
2024-10-24 11:40:14
217
原创 ES6运算符
非空运算符有点像逻辑或运算符js 假值: 布尔值 false null undefined 数字 0 空字符串 ’ ’ NaN逻辑或: 当第一个参数满足以上所有假值之一的时候 取第二个参数的值非空运算符: 是当第一个参数值是undefined或null的时候 采取第二个参数值编辑。
2024-10-23 09:12:12
791
原创 CSSfilter实现磨砂效果
但是filter：blur设置磨砂效果，不仅会作用在自身元素上面，对子级同样生效，所以一般在自身元素上面实现自身效果同时要加上伪类。backdrop-filter属性出现后，磨砂效果就会更加逼真，并且设置磨砂效果对子级元素无任何影响，故简化了很多代码。以往我们实现磨砂效果一般是用背景透明度和阴影来实现的，但这种效果给人看起来比较僵硬，也无法更加灵活的变更效果。如今，filter属性可以实现磨砂效果，案例如下。
2024-10-22 11:02:12
445
原创 JS垃圾回收机制
内存管理与其他一些手动管理内存的语言不一样的是：javascript中，当我们创建变量的时候，会自动的给对象进行内存的分配以及闲置资源的回收，也就是说，不需要我们进行分配。也正是因为这样，容易给我们开发者造成误解，误以为是不用关心内存管理javascript的基础数据类型分为基础数据类型和引用数据类型，其分配机制如下：1、基础数据类型的内存保存在栈空间中，可直接通过值进行访问2、引用数据类型的值大小不固定，其引用地址保存在在栈空间中，引用所指向的值保存在堆空间中，需要通过引用来进行访问。
2024-10-22 10:14:56
778
原创 vue修饰符
这个我们以移动端监听元素滚动事件说明，在监听元素滚动事件的时候，会一直触发onscroll事件让页面变的越来越卡，因此在我们使用这个修饰符后，相当于给onscroll事件增加了.lazy修饰符。类似，只有再说鼠标离开光标的时候才会触发，也就是说在input事件的oninput书法的时候不会赋值，当onchange触发的时候才会进行赋值。v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。6、ctrl：ctrl按键。
2024-10-22 10:06:49
447
原创 滚动条样式
:-webkit-scrollbar-track-piece 内层滚动槽 （剩余可以滚动的区域）::-webkit-scrollbar-track 外层轨道（滚动条可滚动的整体区域）::-webkit-scrollbar-thumb 滚动的滑块（滚动的对象）::-webkit-scrollbar-button 滚动条两端的按钮。::-webkit-scrollbar 滚动条整体，可以设置宽度等。::-webkit-scrollbar-corner 边角。
2024-10-22 10:01:27
172
原创 切换主题的方案
首先把所有的样式文件在初始化的时候就加载进来，切换时候将指定的根元素类名进行切换，默认在根做作用域下定义好CSS变量，只需在不同的主题下更改CSS变量对应的取值即可。SCSS的混合+CSS类名切换，主要是将使用到mixin混合的地方编译为固定的CSS以后，再通过类名切换去做样式的覆盖。缺点：首屏加载时会牺牲一些时间加载样式资源（相对于前几种预设好的主题，这种方式的样式定义在首屏加载基本可以忽略不计）不同的样式定义不同的类名，切换主题，修改对应的类名即可。优点：实现了按需加载，提高了首屏加载时的性能。
2024-10-22 09:59:19
945
动画--太阳系行星公转
2022-04-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人