- 博客(100)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 【前端监控系统】埋点数据上报的3种方式
前端监控的目的？提升用户体验更快的发现发现异常、定位异常、解决异常了解业务数据，指导产品升级——数据驱动的思想它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，为产品优化指明方向，为用户提供更加精确、完善的服务。前端监控的方向？数据监控（监控用户行为）性能监控（监控网页性能）异常监控（监控代码异常）前端监控的流程？采集数据>>上报数据>>分析数据>>报警（异常监控时）
2022-12-26 19:00:21
3320
原创 【性能监测】前端性能监测方法总结（非监测平台）
前言 前端性能是考验一个前端攻城狮技术至关重要的一个点。也许很多新生代农民工掌握或了解了一些前端优化的方法，但是在实际的项目工作中却难以一展拳脚。至此，了解优化方法重要，了解性能监测同样重要，正所谓，有病乱投医，你都不知道哪里有性能问题，怎么去进行针对性的优化呢？下面阿彬就为大家总结一下前端性能监测的一些实用方法。一、监测首屏加载性能 首屏加载时间是最影响用户体验度的一个指标，当用户打开一个网页时：小于100毫秒被认为是瞬时的；100ms到300ms的延迟是可感知的；一秒钟是用户思想不被打断
2021-11-30 11:45:01
4557
2
原创 2023 前端性能优化清单
本文将从三个角度（`页面渲染，打包优化，总体优化`）分析前端性能优化的一些方案。如有错误，欢迎指出，也可以在评论区提出你对性能优化的一些见解，相互学习，共同进步！
2021-10-27 17:18:08
1523
原创 ✊构建浏览器工作原理知识体系（浏览器内核篇）
为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆
2024-04-25 16:35:21
986
1
原创 ✊构建浏览器工作原理知识体系（开篇）
为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵💫，因为你没有形成一个完整的知识网络，你的记忆是碎片化的。正如人的神经网络，只有当你的记忆相互依赖，相互链接，才能形成长期稳定的记忆
2024-04-25 16:31:03
792
原创 js谐音梗创意小游戏《望子成龙》
时隔许久，终于再次上线了创意投稿大赛，又到了我最喜欢的环节。龙年伊始，我给各位设计了一款原创的小游戏，话不多说，直接进入正题，只求各位一个小赞👍灵感来源于一个成语“望子成龙”，我把它具象化，把成语的意思字面化。即看到孩子变成龙，从而我联想到如果看到孩子变成龙，即闯关成功，如果看到孩子变成了其他动物，则闯关失败。顺藤摸瓜，据此思路我想到了1，2，3木头人这款游戏，类似的规则进行二创，最终想到了我这款小游戏。具体游戏介绍可以看游戏首页简介。背景故事：有一天你被一条恶龙捉回了老巢，你发现它守着几颗蛋，盼望着它
2024-02-21 15:46:00
1226
原创 你忽略的那些 DevTools 调试技巧
作为一个前端开发人员，DevTools 是我们最熟悉不过的伙伴。无论是dom检查、调试bug，断点调试、性能检测等一系列操作都离不开它的帮助。 大家经常使用的 DevTools 功能大差不差，
2023-10-07 17:53:31
385
原创 猜猜 JavaScript 输出：(! + [] + [] + ![]).length
一起猜 最近看到一个很有意思的题，直接来看，下面这段代码的打印结果是什么？ 猜猜看，你的答案是什么，打在评论区。 我的答案是 undefined，正如我的英文名 为什么呢？因为我第一眼看到题目，只想到
2023-10-07 17:52:17
239
原创 前端自动化测试入门教程
如果项目中有一个非常重要的下单页面，经过长期的功能迭代重构，核心逻辑可能没变，但是新增了很多新功能，也修改了部分旧功能，已经是一个非常重要的屎山页面。这时候要你接手这个页面做一些调整，你能保证捋清并且
2023-10-07 17:51:43
360
原创 CSS高手必会秘籍《混合模式》
很多同学在开发中看到一些特殊的图形就发愁，都找设计出图怕显得自己水平低，百度查找解决方案又会浪费很多时间。而且最终通过copy实现效果，往往自己并没有学会，下次遇到还得靠百度。
2023-10-07 17:50:14
489
原创 原创动画《优弧，你小子！》
他说：优弧是个200来斤的胖子，他说：优弧是个漂亮的小姐姐。 而我说：优弧其实是汉子和妹子叠加的二重性存在，根据薛定谔定律，当你不知
2023-09-25 09:59:52
101
原创 CSS 实现祥云纹理背景
最近掘金出来一个中秋创意活动，我准备参加一下。作品方向选择用纯css做一个中秋贺卡，其中有一些中秋的元素和一些简单的动画，而贺卡背景的实现就是本文要讲的内容。
2023-09-18 16:07:07
580
原创 倾情奉献，纯css（无图，无JS）原创中秋贺卡！！！
纯CSS原创中秋贺卡，无图无JS，要素很多，观赏性也不错，欢迎大家点评提出宝贵建议～提前祝大家生活美满万年长，阖家幸福永平安！
2023-09-18 16:02:41
187
原创 “钉钉官网首页的炫酷动效” 被我用css新特性轻松破解啦～
为了向大家介绍 CSS 新特性【scroll-timeline】的强大效果，我特意破解了钉钉首页的动效，莫辜负！
2023-09-04 10:37:31
632
3
原创 CSS魔术师Houdini，用浏览器引擎实现高级CSS效果
在 JavaScript 中键入 CSS 值以及填充或发明新的 CSS 而不会影响性能终于成为可能。Houdini具有增强网络创造力的潜力。
2023-08-31 15:12:48
986
原创 【bug记录】ios动画闪烁，@keyframe动画在100%的时候设置为opacity:0，最后一帧会变成opacity:1
经过我的观察（下图是闪烁时的效果），很明显是在动画结束后，opacity突然会变成1导致的（动画100%时opacity设为0）。我本来以为可能是动画结束后会先显示下初始状态导致的，但是经过我实验，如果我在动画初始状态设置一些明显的样式，结束后依然只会影响到opacity。我尝试了以下，在保留原本波纹动画的基础上，又新增了一个动画，在99%-100%时将元素位移出屏幕，实际效果非常不好，也可能是我参数设置的不太好；我在动画100%处设置opacity：0的同时，再设置visibility： hidden。
2023-08-21 10:40:08
351
原创 听了稀土开发者大会，Get到了新知识点：web components
在6.30日的稀土开发者大会中，有位讲师分享内容是`Quark c`跨框架、跨端组件构建工具。底层基于浏览器原生 API: `Web components`。之前我没有听过这个概念，第一次听到瞬间眼前
2023-07-11 13:55:10
253
原创 只要你会vue，5分钟学不会 svelte 你来找我
本文通过和vue语法逐一对比的方式，可以让熟悉vue的同学快速上手svelte~虽然现在国内`svelte`不温不火，除了它自身存在的一些问题，主要还是生态不够完善。但是它在国外是非常火的，说不定哪
2023-07-03 12:01:21
529
原创 踩坑记录：nuxt3 - ssg 重构我的前端导航网站
不久前我利用周末搭建了个 万能导航网站，本来我以为不会有太大的访问量，主要是方便自己用。没想到用的人还不少，所以打算用nuxt3重构下，踩了不少坑，写文章记录下，希望能帮助到有静态部署ssg需求的同学
2023-06-27 17:00:02
1753
原创 css魔法：伪元素content内容竟然可以用css函数！
都2023了，很多同胞还不知道伪元素content里可以用css函数，本文将为你带来几个它超实用的场景，欢迎阅读点赞支持！
2023-06-12 09:53:26
937
原创 玩转css逐帧动画，努力成为更优质的Ikun~
css3的animation想必大家都知道吧，那steps逐帧动画你知道吗？对于我来说，实际工作及练习中也很少用到这种跳跃式变化的动画，而它start和end的解释又比较“不说人话”，以前用到steps动画的时候，常常是靠调试，来回设置start和end，主打的就是瞎猫碰上死耗子。虽然之前也看过关于他们区别的文章，但都是半知半解，过两天就剩零知零解了。最近忙里偷闲，我终于打算一探究竟了，我倒要看看start和end到底有什么区别！😠😠😠顺便写几个小demo造福一方～
2023-06-08 15:23:43
1725
原创 ⛳前端进阶：SEO 全方位解决方案
往期文章# 我给自己搭建的前端导航网站，你们都别用🤪# 浅谈 强制缓存/协商缓存 怎么用？# 2023 前端性能优化清单。
2023-06-08 15:22:54
5163
2
原创 我给自己搭建的前端导航网站，你们都别用
前段时间在工作的时候，因为遇到了一些之前没了解过的知识，所以化身百度cv工程师，上网冲浪寻找灵感（找源码copy🐶）。但是网上有好多重复或者低质量的文章，严重影响了我的cv效率。
2023-06-01 15:25:36
501
1
原创 2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
在搭建的过程中，一定要注意因为修改了项目根目录（root）所带来的问题，利用将路径重置到相对于项目根的位置！关于如何使用这个多页面脚手架，可以看 README.md 文件。github地址。
2023-04-18 17:05:46
13650
12
原创 BOM对象navigator：偷偷攒(cuán)了这么多招！
书接上回，上一篇更文我介绍了bom对象navigator的一些属性 API传送门，那么本文就继续来介绍一下它的一些“神奇”的方法 API。人总是对自己不了解的东西心生恐惧😱对于大部分前端仔来说，其实只要知道有这么个东西即可。大部分刁钻的需求，其实最难的是我们想不到实现方式，而不会不会用那都是后话了（不会可以百度cv 🐶）
2023-03-23 18:02:29
703
原创 navigator 拓宽前端视野
写本文的起因是最近做了一个共享屏幕在线演示ppt的需求，发现了navigator的新大陆。原来web端开启屏幕共享是如此的简单，在接触之前还以为是多么高大上的功能,需求评审时内心还有些慌张。人总是对自己不了解的东西心生恐惧😱因为在此之前，虽说我知道navigator记录了一些用户代理的信息，常用的也就是利用判断下当前浏览器所处的环境（好多前端仔都是这样吧～哈哈哈，如果你也是，评论区扣1，如果你深入了解过，评论区扣眼珠子）。而对它的其他API的了解少之又少。
2023-03-22 16:44:56
1923
原创 纯css实现坤坤经典动作-“铁山靠”
2023年2月16日，晴，今天没有工作，一直在掘金摸鱼，摸的我好累。不行！我得找点有意义的事情做！此时间，我发的一条沸点竟然有小黑子给我评论，\我看到之后气不打一处来，哥哥这么努力，还有这么多人黑我家哥哥,作为工作时间一坤年的，我要尽我的绵薄之力还原哥哥的舞姿！让你们臣服！
2023-02-17 10:19:13
11830
28
原创 移动端兼容性问题集锦
去年主要工作就是混合开发，写app内嵌的h5。在开发期间多多少少遇到些兼容性问题，最近工作比较清闲，整理下方便以后查阅，也希望能帮助到一些同学。并且本文会持续补充内容，欢迎关注我，另外我会更新一些前端方面的其他一些知识。
2023-02-15 10:45:37
3148
1
原创 分享SEO优化的8个技巧
SEO是Search Engine Optimization的缩写，直译过来就是“搜索引擎优化”的意识。故名意思，SEO是一种优化（提高）网站在搜索引擎内的自然排名的行为的统称。\当里个当，当里个当，闲言碎语不要讲，下面我就表一表seo的几种常见手段，啊真香～
2023-02-14 15:47:29
4855
原创 以掘金示例，利用内链/外链进行网站SEO优化
从自己网站的一个页面指向另外一个页面。通过内链让网站内部形成网状结构，让蜘蛛的广度和深度达到最大化。：在别的网站导入自己网站的链接。通过外链提升网站权重，提高网站流量。一般来说，内链和外链都能提升网站排名，在搜索引擎优化领域，还有的说法。
2023-02-14 15:45:27
636
3
原创 【bug记录】translateZ在z轴运动会裁去屏幕外的内容，有个边框（安卓异常，ios正常）
做完之后在电脑上看非常完美，提测之后，发现在安卓手机上，元素由内（translateZ为负值）往外（translateZ变为0）移动时，竟然有个边框，试着改了各种样式没试出来，无奈之下，写了个小demo，只将简单的元素进行z轴移动，发现并没有这问题。效果如下，这是从内到屏幕表面的元素（还有一层是从屏幕表面到屏幕外的元素，为了方便体现效果，我给隐藏了）。思考片刻之后，想到了可能是我设置了元素的blur模糊导致的，果不其然，去掉之后问题解决了！，然后我就瞎改一通，把它的所有父元素都加上了。加强元素的层叠关系。
2023-01-12 17:57:56
184
原创 前端实用的20个css技巧
你在使用flex布局的时候有遇到过这种情况吗？每行固定元素个数每行元素都是的效果（两端对齐，项目之间的间隔相等，即剩余空间等分成间隙）最后一行元素需要靠左对齐方法1: 使用js补齐元素，例如，每行展示3个元素，现在一共有5个元素，那么我们就可以在最后补一个同宽度的透明元素。方法2:设置为实现两端对齐效果，最后一行再特殊处理：思路为选中最后一个元素，设置其右边距，挤到只能容纳最后一行元素的宽度。jcode方法3:设置为flex-start,先将全部元素左对齐，然后计算出每个元素的间距，通过gap。
2023-01-04 14:03:08
5486
7
原创 async await函数和setTimeout套用问题
async await函数是generator函数的语法糖，可以看作是以同步的语法执行异步语句，解决了连续调用promise导致的回调地狱问题。一般工作中，我们往往在需要连续请求接口时使用async await语法糖。但是如果第二个要调用的接口需要延迟执行呢，很多同学就不知道怎么办了，甚至只能被迫改回.then嵌套的格式。
2022-12-23 17:34:28
2559
原创 前端本地存储数据库 IndexedDB 存储文件
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据。目前各浏览器都已支持，兼容性很好。
2022-12-19 11:34:11
1230
vue3操作dom怎么搞
2021-12-04
TA创建的收藏夹 TA关注的收藏夹
TA关注的人