背景尽管 SPA（单页应用）通常为用户提供了流畅的操作体验。但我们也经常收到用户反馈页面问题，最终发现只是资源缓存或者过时资源，需要强制刷新为应对这一问题，我们开发了一个升级提示组件，用来通知用户页面有更新，需及时刷新。实现原理要实现版本提示功能，基本逻辑包含三部分：获取当前版本号定时检查版本号比较...

AST（Abstract Syntax Tree，抽象语法树）是一种在计算机科学中表示源代码语法结构的树状数据结构。通过 AST，可以理解代码的结构和含义，实现代码分析、转换和操作。基于 AST 的替换方案可以快速而准确的对大量代码进行修改，提高开发效率和代码质量。

在我们日常工作中有很多场景需要使用代理服务，比如说前端开发环境的 proxy 正向代理，比如说常见的 nginx 反向代理，比如常见的 cdn 等等。但是还有很多场景也可以使用代理服务。

前两天遇到一个小需求，需要将横屏图片转为竖屏展示。整理一下相关内容。通过 csstransform rotate 来控制展示时显示效果一般是在图片审核等场景，实现一个类似的功能。方便审核人员查看图片测试传送门：[链接]transform scale 来控制展示时显示效果测试传送门：[链接]「蹭热点，请给我一面国旗@微信官方」 这是之前仿头...

昨天晚上为了参加「探索编码世界之旅 - 记我的第一份编程工作」，撸了一篇文章结果发现目录结构没有层级起初怀疑是我标题级别设置异常，通过反复查看 markdown 原文，并无异常然后又对个人的历史文章，及月榜文章进行查看，层级全部丢失通过上面的操作，我们已经可以确定只有两个可能：「官方故意拍平层级」或者「层级计...

Hello，小伙伴们 ～ SegmentFault 思否 7 月写作挑战赛来咯我先把前面 11 个人的文章都看了，然后开始写我的回忆录。不知道你还记得第一次接触编程时的心情吗？不知道你是否还记得，但是我一直记得，并且会一直记得。我也有边城大佬的困惑「到底哪一份才算是第一份呢？」第一次看到 Code我最早见到的 Code 是在杂志《黑...

我们日常工作中虽然会遇到很多 BUG，我们也熟练掌握使用搜索引擎解决开发中的问题。但是当遇到线上 BUG 应该如何排查呢？我将我过往遇到的一些异常整理了出来，并将我遇到的干扰项以及问题点都做了详细记录。希望对你有所帮助排查路径确定是否变更导致？如果是变更导致需要及时回滚止损。非变更导致可以排查一下异常版本...

顺利入职。把我最近找工作的心得记录下来。工作交接确定 lastday整理手头工作，相关对接人、交接人放文档中工作交接过渡阶段。做好被咨询者，该拉人拉人，该拉群拉群平时沟通顺畅的同事如果没有 WX 可以加一个属于自己的资料整理备份（公司的就别动了，法务警告⚠️）仓库权限、系统权限、手续等等，该交接就可以交接了门...

往年的我早早就参与了活动，今年不知道为什么，直到 2023.01.09 原来这就是答案。虽然果只有一个，但是因会有很多可能，不管怎么说反正是润

最近 「SegmentFault 思否社区 10 周年「问答」打卡」 十分火热，但是有一个小问题，经常不知道是否完成今天的 KPI，以及小尾巴是否正常添加，那我们今天来做个小工具。

前几天被人问，「如何把元素固定在容器底部」。（本来想直接把 demo 地址给他，结果没找到，那么今天我们来补一下）Demo 地址想法&思路如果是页面底部，我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。但是他要的效果是基于父级容器，那么我们必须要使用其他手段来定位了relative 来限制 absolute，...

最近有个项目（就叫他 P 项目）做了一次 UI 视觉统一。之前是个小项目用的是默认主题 theme-d ，这次需求还针对性的发布了一套 theme-p 主题。然后出事故了，更新了主题之后我们的 dialog 显示异常了。使用控制台查看样式通过查看样式我们发现都是 UI 的样式，并没有我们手动覆盖的样式。但是这里有一个异常点有四个生效...

节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。

这是之前朋友问我的一个功能：他觉得看网页有时候注意力会被转移，希望可以有个蒙层帮助他集中注意力反手我就用 box-shadow 把功能写了出来。 {代码...} 因为 z-index 无法超过非 static 层级导致的 bug在我测试中发现了一些比较阴间的效果所以我们要小改动一下。直接给父级 ZIndex 全部提升。 {代码...} 因为 overflow ...

node 里面写的一个 js 文件里面的方法，这个 js 文件里面有声明一个 var 全局变量（global），然后上面说到的方法就是先判断全局变量是否有值，要是就值就直接返回，要是没有值就通过接口去获取值； 然后在页面上特定的一个操作之后，会把这个全局变量的值清空为null，然后就走上面的获取接口的值本地正常，服务器上错误

前两天北京下雪了，很冷。2022 招聘季，好像也比往年冷一些。2021 年 K12 的大量裁员，腾讯、快手、字节、滴滴、蘑菇街也在裁员。想要换工作的同学应该准备些什么呢？面试流程是什么样子的？如何应对面试呢？怎么样可以提高成功率？如果你关心上面的问题，并且你的目标位置不超出我的能力范围（高级工程师、阿里P6、字节...

Lighthouse 目前已经集成在新版本 Chrome DevTools 中，也可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。

为什么我说 CDN 可以提速不全对？脱离剂量谈毒性,都是耍流氓（这里指脱离环境一把梭哈不现实） CDN 是指是什么？CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取...

因为 JS 精度问题 0.1 + 0.2 == 0.30000000000000004 ，可以不可以得出一个正确的值。0.1 + 0.2 == 0.3

回忆今年感觉过的更快了，又到了年度写总结的时候。先来快速过一下回忆一下今年离开了工作五年的公司。入职了一个大一点的公司租的房子也换了，租金暴涨输出内容文章产出惨不忍睹，只有个位数。问答也不如去年，只有 500+，不过也算一日一题吧。分享、调研等对内输出前半年还在做，后半年换工作了频率减下来。出游的话，...

哈喽，大家好又是我。昨天有个人在群里问：“基于 elementUI 如何实现拖动修改列宽度，并同步在多个表格中”。这个功能其实听常见的，在不同的使用者眼中关注点就应该是不一样的。比如：项目的主管，更关心进度前端开发，关心设计稿、接口什么时候提供后端开发，关心前端什么时候写完，什么时候联调测试人员，关心什么时候...

我们也想做一个展示我们设计稿（定宽，不定高）的页面，瀑布流是很棒的一种方案。瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上图来看看我们说的瀑布流布局是...

哈喽大家好啊。前半年还挺忙的，一直也没有发文章，有老哥想我了嘛。这两天发现老有人私信问我 PDF 相关的内容。那么好，为了我能安心摸鱼，我准备出一篇文章来介绍一下如何使用 PDFJS 。PDF.js 是什么？PDF.js 由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台，用于解析和呈现 PDF。预览 PDF使用 ifra...

祝思否生日快乐，越办越好，越做越大哈哈。2016-07-12 加入思否社区，在思否社区快五年了，也算是见证了思否社区的成长，功能也越来越多的，有点评、课堂、视频、直播等等。当然我还是一直是问答区的忠实用户（还是那个不变的少年啊）。也见证了凉了的产品「付费问答」(因为凉了所以没有链接了)，格子广告好像也没了。五...

又到了一年一度写总结的时候，趁着热度我也来混一波阳光普照。今年总结起来其实蛮简单的居家隔离、远程办公、疯狂加班。对，今年的一年就是这么平淡无奇。比如现在的我就是在切完元旦活动，但是又不能睡觉的时候，来写年度总结。思否去年是问答区的「Top Writer」，今年不知道还能混上不。刚才看了一下今年回答了 38*20=...

我们先来说一下限制条件可以使用 css、html、js元素为一个 100*100 的红色矩形，里面包含一个 50*50 黑色矩形只要在页面上看不到就算隐藏测试地址：[链接]实现隐藏页面元素移动到屏幕外面，眼不见心不烦marginleft + positiontransform:translate使用特性displayvisibilityopacityoverflow:hidden + 0宽高transform:scal...

一般用于审核后台，比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。JS 获取图片宽高获取 naturalWidth（callback 版本）方案为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同？naturalWidth 标识图片的原始宽高。width 因为历史问题，标识的其实是 DOM 元素宽高。因为 img 标...

我们一直解题的方案是根据一个顺口溜：一三五七八十腊，31天永不差，四六九十一，每月30天，惟有二月二十八，闰年要把日加一。（我搜的，具体怎么背我忘了）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

今天面试了一个人，居然不知道如何将伪数组转换为数组？什么是伪数组？有 length 属性，而且也是数值下标的对象。不具备 Array.prototype 上的方法常见伪数组argumentsdocument.getElementsByClassName$('div')伪数组转换为数组输出伪数组 {代码...} 使用 Array.from （ES6+）（babel-polyfill） {代码...} 使用 ... 展...