前言 上篇文章中有提到CSS值的处理过程，但如果想要确定一个元素的最终样式值可以不需要这么多步。实际上我们写的任何一个标签元素无论写没写样式，它都会有一套完整的样式。理解这一点非常重要‼️ 比如：一个简单的p标签 打开浏览器控制台，选中元素，切换到computed选项，勾选show all，这里就能 阅读全文
前言 最近遇到一个这样的问题，在一些机型上的loading转圈动画看起来有点抖，转起来像个椭圆，心想会不会是这个icon宽高不同造成的，但看了一眼代码里面宽高写的是一样，按理来说这个loading应该是一个正圆，旋转起来不应该抖才是的。 比如这样： <div class="w-20px h-20px 阅读全文
前言 上篇文章有涉及到Base64编码的内容，今天我们再来详细了解一下Base64的编码原理以及应用场景。 通过这篇文章你能够学习到： 什么是Base64，为什么需要Base64？ Base64的编码原理 Base64的应用场景 什么是Base64？ Base64是一种用于传输8bit字节数据的编码 阅读全文
前言 最近开发过程中遇到了关于使用base64加密传输遇到的神奇问题。需求就是用户的id在链接上露出时需要加密处理，于是后端把下发的用户id改成了base64加密处理后下发了，前端只需要把加密后的用户id原样传给后端就行。就是这个看似简单的流程，前端啥也没干只是原样透传，但后端有概率拿到的用户id不 阅读全文
前言 前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。 依赖： 指的是一些不会变动的一些模块，如：node 阅读全文
前言 接上篇文章，我们了解到vite的本地构建原理主要是：启动一个 connect 服务器拦截由浏览器请求 ESM的请求。通过请求的路径找到目录下对应的文件做一下编译最终以 ESM的格式返回给浏览器。 基于这个核心思想，我们可以尝试来动手实现一下。 搭建静态服务器 基于koa搭建一个项目： 项目结构 阅读全文
前言 随着Vue3的逐渐普及以及Vite的逐渐成熟，我们有必要来了解一下关于vite的本地构建原理。 对于webpack打包的核心流程是通过分析JS文件中引用关系，通过递归得到整个项目的依赖关系，并且对于非JS类型的资源，通过调用对应的loader将其打包编译生成JS 代码，最后再启动开发服务器。 阅读全文
前言 作为前端人员肯定经常遇到这样的场景：需求刚上线，产品拿着手机来找你，为什么页面打开这么慢呀，心想自己开发的时候也有注意性能问题呀，不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能，打开浏览器控制台一看，页面上的这些配图每张都非常大，心想这些配图都这么大，页面怎么快，那么我们有没 阅读全文
前言 什么是安全区域？ 自从苹果推出了惊艳的iPhone X，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域犹如手机的“神秘面纱”，遮挡了一部分屏幕，给开发者带来了新的挑战。 Android似乎对iPhone的设计 阅读全文
前言 写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。 webview的差异 在移动端上，我们的H5页面一般是运行在宿主APP提供的webview中，简单点理解，你其实可以把它当作浏览器， 阅读全文
前言 在小程序的日常迭代中，有一些场景我们可能需要在小程序发布后，用户能够马上感知并更新，比如上线新活动、修复高危漏洞等，如果用户因为各种原因未能及时更新小程序，这就可能导致一些功能无法正常使用或者存在安全隐患，因此，实现小程序的强制更新功能就显得尤为重要。本文将探讨小程序如何做到强制更新，以确保用 阅读全文
前言 随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。 在接下来的内容中，我们将逐一 阅读全文
前言 对于前端来讲，我们在操作cookie时往往都是基于document.cookie，但它有一个缺点就是操作复杂，它并没有像localStorage那样提供一些get或set等方法供我们使用。对与cookie的操作一切都是基于字符串来进行的。为了让cookie的操作更简便， Chrome87率先引 阅读全文
前言 想必大家在工作过程中都遇到过node版本带来的各种各样的问题，对于团队协作项目，你不能保证所有人的本地node版本都相同，所以在项目文档中往往会写上以下内容： 为与线上环境一致，请保证以下版本 node：15.x.x vue-cli：4.4.x 但这样并不能完全避免问题，比如多个不同项目中使用 阅读全文
前言 一个看似简单实则有坑的问题：空白网页的背景色是什么？ 大家是不是都会认为是白色，但事实并非如此，有时候我们眼睛看到的也不一定是真的🧐 页面根元素背景色 比如下面这段代码： <!-- ... --> <style> body { background-color: skyblue; } </s 阅读全文
浙公网安备 33010602011771号