- 博客(332)
- 收藏
- 关注
RSS订阅原创 CSS 绘制几何图形总结
三角形border实现首先将元素内容宽高设置为0，设置每个border宽和样式后是四个三角形。等边三角形：通过设置border宽度比为：指定方向 / 非指定方向 = 即可。角落三角形：只设置相邻两个border的宽度，且其中一个设置为transparent。方法二：正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形
2022-10-04 18:15:50
502
原创 CSS文本与字体知识梳理
用于设置多行元素的空间量，如多行文本的间距。normal 样式指定文本字体样式为正常的字体，italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。rem（root em）为元素设定字体大小时，是只相对于HTML根元素，因此设置好根元素的font-size，那么其他元素上的 1rem = 根元素的font-size。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。
2022-10-03 14:00:04
403
原创 前端媒体查询知识梳理
由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的功能和设计），因此有可能滥用它们来构造“指纹”来识别设备，或者至少 将其分类为某些细节，这可能是用户不希望看到的。例如，如果启用了 Firefox 的“抵抗指纹”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。
2022-10-03 13:51:19
2959
原创 Ajax 必知必会
Ajax是异步的JavaScript和XML，就是使用XMLHTTPRequest对象与服务器通信。最大的优点是可以在不重载页面的情况下与服务器通信并更新部分页面内容。所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject对象）。
2022-09-29 14:27:50
498
原创 精通HTML页面的生命周期
HTML有四个重要的生命周期事件：DOMContentLoaded：DOM 完全加载以及解析时触发，而无需等/样式表/子框架里外部资源加载完成。此时可以查找DOM 节点，并初始化接口。在用户允许的前提下，Firefox，Chrome 和 Opera 都会在DOMContentLoaded触发时自动填充表单。
2022-09-29 11:06:45
638
原创 前端组件化埋点方案与实现
埋点，是收集产品的数据的一种方式，其目的是上报相关行为数据（PV/UV/时长/曝光/点击等），由相关人员以此分析用户的使用习惯，助力产品不断迭代和优化。对于开发来说，通常不仅仅需要完成基础的业务需求，还需要完成埋点需求，所以，追求的是简单快捷的埋点工作。而一个完整的埋点体系由以下三个部分构成：目前，前端埋点存在的痛点一般是：复杂场景的曝光埋点实现繁琐：分页列表、虚拟列表等；埋点代码的侵入性：尤其是曝光代码导致逻辑复用困难。埋点类型一般有：市场上常见的埋点方案：综上，需要的是一种简单快速且准确，同时埋点逻辑与
2022-06-17 17:26:18
2902
1
原创 前端骨架屏方案与实践
对于依赖接口渲染的页面，在拿到数据之前页面往往是空白的，为了提示用户当前正在加载中，往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言，实现比较简单；本文主要研究骨架屏的实现方案。目前有几种比较常见的骨架屏方案在最开始调研骨架屏方案的时候也注意到了，体验了一下发现并不能完全满足我的需求，对于骨架屏方案，我的期望是恰好调研骨架屏方案的那段时间正在处理Chrome扩展程序的工单，发现借助执行页面脚本的方案，完全可以通过扩展程序的实现，这样，不需要借助本地开发环境也可以渲染骨架屏了目前生成骨架
2022-06-13 19:27:51
2448
原创 前端夜间模式（换肤）方案与实践
支持暗色/深色模式，以及“一键换肤” 已经几乎成为了各家系统、应用以及 Web 站点的标配功能。那实现这样的功能的方案都有哪些呢？首先对概念进行统一：实现多套 CSS 样式，根据用户切换操作，通过动态修改 标签的 href 或动态添加删除 标签来加载不同的模式的样式，主要解决了多个模式被编译到一个文件中导致单个文件过大。将 css 部分直接拆分成 和 两个文件，通过 动态切换模式：1.3 优缺点优点是简单，缺点是维护成本高，具体表现在以下几个方面：通过 动态修改 上的 CSS 变量（
2022-06-11 20:51:46
1280
原创 多项目版本管理：monorepo 策略
一个产品会有多个项目，每个项目之间会存在版本同步的问题，如何在其中一个项目发布上线后，保证每个项目版本升级后的版本同步问题，提出的解决方案就是 monorepo 策略。monorepo 是一种将多个项目代码存储在一个仓库里的软件开发策略（mono 意为单一，repo 意为 仓库）。与之相对的是另一种流行的代码管理方式 MultiRepo，即每个项目对应一个单独的仓库来分散管理。通过 monorepo 策略管理代码的代码仓库的目录结构会是这样：不过，monorepo 不只是将不同子项目的目录汇集到一个目录之下
2022-06-07 16:07:14
6921
原创 前端性能优化梳理
性能优化的本质优化的目的是展示更快、交互响应快、页面无卡顿情况。做优化需要理解浏览器加载和渲染的本质，可以参考浏览器进程 和认识优化渲染性能的本质。雅虎军规包括7个类别35条军规：减少DOM节点数量：当遍历查询500和5000个DOM节点，进行事件绑定时，会有所差别。 当一个页面DOM节点过多，应该考虑使用无限滚动方案来使视窗节点可控（视频列表使用滑动窗口）。 减少cookie大小：cookie 传输会造成带宽浪费，影响响应时间。消除不必要的cookies； 静态资源不需要 c....
2022-05-31 21:17:56
361
原创 理解 DevOps —— CI 持续集成
DevOps 是 Development 和 Operations 的组合，即将软件交付过程中开发与测试运维的环节通过工具链打通，并通过自动化的测试与监控，减少团队的时间损耗，更加高效稳定地交付产品。CI(Continuous Integration)，即持续集成，指频繁地（一天多次）将代码集成到主干的行为。这里既包含持续将代码集成到主干的含义，也包含持续将源码生成可供实际使用的制品的过程。在 CI 阶段的实现至少应该有：静态代码检查：ESLINT/TSLINT 静态语法检查，验证 git co
2022-05-31 19:24:01
383
原创 使用 Error Boundaries 捕获 React 中的错误
在 React 项目中，处理错误以确保您的应用程序具有弹性、持续响应并提供最佳用户体验的最佳方法是什么？那离不开使用 Error Boundary。Error Boundary 是什么？错误边界是 React 处理应用程序错误的方法。它使得可以做出反应，可以显示错误，将其报告给错误报告服务，并从运行时错误中恢复，并在应用时提供备用用户界面。错误边界是在 React 16 中引入的，它是需要作为类组件编写的唯一组件（所以目前还没有钩子！），但绝对应该成为任何现代 React 应用程序的一部分。..
2022-05-31 16:17:54
392
原创 认识 Jamstack 架构
传统架构 LAMP 或 MEAN Stack 中，每当用户请求一个页面时，服务器就会查询一个数据库，并将结果与页面的标记和插件中的数据结合起来，在浏览器中生成一个新的 HTML 文档，而这个过程会增加页面加载时间。Jamstack 是由 Netlify 公司 2016 年提出的架构理念，JAM 具体含义是：JavaScript (J): 主要指运行在浏览器的逻辑代码，负责前端渲染、数据请求等逻辑(例如：React、Vue、Angular)； APIs (A): 可以通过 JavaScript
2022-05-30 22:32:07
419
原创 前端进度条实现与优化
进度条随着任务的进程而进行增长，任务暂停，进度条的动画也会随之暂停。比如视频进度条的主要实现功能：支持播放、暂停、重播播放结束后，播放次数+1，并重新开始播放
2022-05-30 16:23:32
1800
原创 babel-plugin-import 的组件按需加载原理
babel-plugin-import 按需加载是以组件为基本单位产出 js、css、less 文件，借助插件或者部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。首先是执行时机不同，babel-plugin-import 按需加载是在源码编写阶段或者 babel 编译 js 阶段，而 webpack 懒加载则是在构建生成打包产物阶段。其次是原理不同，babel-plugin-import 按需加载是在源码阶段就去掉了无关代码，而 webpack
2022-05-30 15:59:25
1870
原创 前端图片优化总结
图片加载数量多以及图片体积过大往往会影响页面加载速度，造成不良的用户体验。尤其在电商类/影视类项目，往往存在大量的图片，如 banner 广告图，菜单导航图，列表图，封面图等。整体优化方案总结如下：合适的图片格式WEB 图片格式有 JPEG/JPG、PNG、GIF、WebP、Base64、SVG 等，特点与适用场景总结如下：降低网络传输网络图片加载前，对图片URL进行预处理，预处理包括添加缩放参数，添加降质参数，添加WebP参数的方式减少图片网络传输大小，预计图片体积可以减少减少..
2022-05-30 15:17:50
1450
原创 文件上传与下载的场景梳理
文件上传单文件与多文件上传利用 input 元素的 accept 属性限制上传文件的类型、比如使用 image/* 限制只能选择图片文件；同时，为了防止修改文件后缀绕过限制，需要利用 JS 读取文件中的二进制数据来识别正确的文件类型。然后把读取的File 对象封装成FromData 对象，然后利用Axios 实例的post方法实现文件上传的功能。然后服务端使用 Koa 实现单文件上传的功能；多文件上传利用input元素的multiple属性。/** 客户端 */&l...
2022-05-29 21:19:33
283
原创 理解 React Firber
React 的设计理念是：React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。“快速响应“的制约因素有 CPU 和 网络：CPU的瓶颈：当项目变得庞大、组件数量繁多、遇到大计算量的操作或者设备性能不足使得页面掉帧，导致卡顿。IO的瓶颈：发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应，导致白屏。为此 react 引入 Time Slicing 时间分片 和 Suspense。
2022-05-28 22:47:19
665
原创 package.json 和 package-lock.json 解析
前端每个项目的根目录上有一个 package.json 文件，定义了当前项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等）。当运行 npm install命令时，会根据文件中的配置自动下载所需的模块配置项目所需的运行和开发环境。
2022-05-27 19:27:57
3289
原创 深入 webpack 核心原理
名词简介Entry：编译入口，webpack 编译的起点； Compiler：编译管理器，webpack 启动后会创建 compiler 对象，该对象一直存活知道结束退出； Compilation：单次编辑过程的管理器，比如 watch = true 时，运行过程中只有一个compiler 但每次文件变更触发重新编译时，都会创建一个新的 compilation 对象； Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系； Module：webpack 内部所有资源都会.
2022-05-27 11:18:31
235
原创 浅析浏览器 Web 视频播放器
音视频前置知识视频，是一系列连续播放的图片。码率，也叫比特率，是每秒视频的 bit 数，决定了视频是否清晰。比特率越高，压缩比越小，视频越清晰。100min/1080P/1GB的视频的比特率：// 帧率为 (数据量/时间)8589934592/6000 = 1.4Mbit/s每秒播放的图片数就是视频的帧率。如果视频（图片）的的尺寸是 1920*1080，即一张图片的尺寸是1920*1080*3 bytes，乘3是因为一个像素点3个比特，分别存放R，G，B，那么帧率60的19...
2022-05-26 18:48:34
1954
原创 理解 WebAssembly 原理
what?WebAssembly（缩写为 Wasm）是一种基于栈式虚拟机的二进制指令格式。Wasm 是一种底层类汇编语言，能在 Web 平台上以趋近原生应用的速度运行。C/C++/Rust 等语言将 Wasm 作为编译目标语言，可以将已有的代码移植到 Web 平台中运行，以提升代码复用度。Wasm 的特点：层次低，尽量接近机器语言，这样解释器才更容易进行 AOT/JIT 编译，以趋近原生应用的速度运行 Wasm 程序； 作为目标代码，由其他高级语言编译器生成； 代码安全可控，不能像真..
2022-05-26 13:55:37
308
原创 认识前端构建工具 Vite
是什么？Vite（法语意为 "快速的"，发音 /vit/）。由两部分组成：基于原生 ES 模块的开发服务器，，包括模块热更新（HMR）等功能。vite 解决了webpack中存在的HMR 速度与随着应用越大而越慢的问题。 基于 Rollup 的配置化的打包器（构建指令），可输出用于生产环境的高度优化过的静态资源。同时使用 esbuild 替代 Rollup 进行预打包（非生产环境），速度很快。Vite 是 Opinionated 的，通过约定保证了易用性——前端开发者常用的功能都是开箱即用...
2022-05-25 21:07:14
790
原创 Vue2 中的 Flow 是如何被快速重构为 TypeScript
Carlos Rodrigues把整个 Vue2 的代码库从原先的 flow 类型系统全部迁移到了 TypeScript，包括：代码格式化风格更新。 重构。 构建相关的改动。 代码库更新为 TypeScript 编写。如何做的呢？1. 首先把代码的类型全部改成 .ts，移除文件开头 flow 的标记，并且把类型的语法全部替换成 TypeScript：2. 用 TS 的 import type 语法重构了类型导入，更有助于区分导入的内容：3.更新单测工具，以及 TS ...
2022-05-25 15:19:36
132
原创 Vue 修饰符使用总结
修饰符是Vue的重要组成部分，利用好修饰符可以大大地提高开发的效率。v-modellazy 修饰符——改变输入框的值时 v-model绑定的值 value 不会改变，当光标离开输入框时才会改变：<input type="text" v-model.lazy="value">trim 修饰符——类似于JavaScript中的trim()方法，把v-model绑定的值的首尾空格给过滤掉：<input type="text" v-model.trim="value"&
2022-05-25 10:37:58
271
原创 定位页面组件在React项目中的位置
如果点击页面上的组件，在 VSCode 中自动跳转到对应文件，并定位到对应行号。在大项目的开发和维护过程中，拥有这样一个调试神器可以很好的节约时间。react-dev-inspector可以满足这个需求。原理构建时： 需要加一个 webpack loader 去遍历编译前的的 AST 节点，在 DOM 节点上加上文件路径、名称等相关的信息 。 需要用 DefinePlugin 注入项目运行时的根路径，后续要用来拼接文件路径，打开 VSCode 相应的文件。 运行时：需要在 Reac.
2022-05-24 21:12:01
671
原创 日常使用 TypeScript 的实践总结
Readonlyconst进行常量声明且不可修改，如果进行修改的话会直接 Cannot assign to 'a' because it is a constant.进行异常抛错。但是如果值是一个引用类型的话，依旧可以对其内部的属性进行修改。那么从只读的概念上来说，显然不具备当前的能力。可以使用以下四种方式对属性或者是变量进行声明达到只读的效果。/** 1. Readonly<Type> */interface X { x: number;}let rx: Readonl..
2022-05-23 11:47:02
1616
原创 深入理解 Axios
Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。拥有以下特性：支持 Promise API； 能够拦截请求和响应； 能够转换请求和响应数据； 客户端支持防御 CSRF 攻击； 同时支持浏览器和 Node.js 环境； 能够取消请求及自动转换 JSON 数据。HTTP 拦截器Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：请求拦截器：在请求发送前统一执行某些操作，比如在请求头中添加 token ..
2022-05-22 17:23:09
432
原创 认识 Svelte 实现原理
Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟（virtual）DOM 差异对比不同。<script> let count = 0;</script><input type=number bind:value={count}><button on:click="{() => count += 1}">..
2022-05-22 12:16:37
468
1
原创 浅析前端异常埋点系统
在长期生产 bug 并修复 bug 的循环中，上线产品不可避免出现异常。如何能快速定位到发生错误的代码位置、第一时间通知开发人员异常发生以及报错的堆栈信息、用户OS与浏览器版本等十分重要。而错误埋点追踪系统的出现就是为了应对上述问题的解决方案。前端异常捕获js 异常的特点是，出现不会导致 JS 引擎崩溃，最多只会终止当前执行的任务。在Javascript中，我们通常有以下两种异常捕获机制。1. try…catch 语句能捕捉到的异常，必须是线程执行已经进入 try catch 但 try..
2022-05-21 15:06:19
228
原创 认识 Deno
Deno 是一个简单、现代且安全的 JavaScript、TypeScript 和 WebAssembly 运行时，它使用 V8 并使用 Rust 构建，作者是 Ryan Dahl（也是 Node.js 的原作者）。基于此，Deno 在 Node.js 已经发展至今的情况下，引入了很多新功能：Deno 有默认安全的机制。访问文件系统，网络或运行环境需要被授权； Deno 对 TypeScript 的支持度是开箱即用的； 外部文件由 URL 明确引用。没有 package.json。 im...
2022-05-21 12:24:23
405
原创 一文理解 JS in CSS
CSS in JS是一种解决css问题想法的集合，它是将 CSS样式写在 JavaScript 文件中，而不需要独立出.css、.less之类的文件。将 CSS放在 JS中使我们更方便的使用 JS的变量、模块化、tree-shaking。还解决了 CSS中的一些问题，比如更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。实现CSS in JS的第三方库有像JSS、styled-components等。因此，JS in CSS就是可以在 CSS 中使用 JavaS...
2022-05-19 22:12:29
385
原创 CSS 新特性总结
CSS 伪类选择器:is() 和 :where():is() 将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素，其优先级是由它的选择器列表中优先级最高的选择器决定的，列表值中不能使用伪元素。:where()将会选择所有能被该选择器列表中任何一条规则选中的元素，其优先级为 0。:not() 和 :has():not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。:has() 至少匹配一个满足参数选择器的元素，而且能匹配父元素
2022-05-18 20:56:48
597
原创 Flex 布局指北
主轴（Main Axis）和交叉轴（Cross Axis）是 Flexbox 布局体系的概念。CSS 中除Flexbox 布局体系外，也有轴的概念：行内轴（Inline Axis），对标 Flexbox中的主轴；块轴（Block Axis），对标 Flexbox中的交叉轴。这些一切的对齐方式轴，会受以下属性影响：flex-direction（Flexbox 特有）书写模式 writing-modedirectionHTML的 dir 属性
2022-05-18 10:33:45
171
原创 浅析前端权限控制方案
在项目中引入权限控制方案，可以满足我们灵活的调整用户访问相关页面的许可。比如游客权限，登录后权限，管理员权限。虽然存在多种细分情况，但根本上都是角色权限控制。而且，真正对权限进行把关的是后端。前端做的权限控制大多是先接受后台发送的权限数据,然后将数据注入到应用中.整个应用于是开始对页面的展现内容以及导航逻辑进行控制,从而达到权限控制的目的.前端做的权限控制虽然能提供一层防护，但根本目的还是为了优化体验。
2022-05-17 20:23:39
414
原创 如何在Javascript中编写没有try-catch块的async/await
Promises 使得可以简化异步流程并避免回调地狱。async/await 使得可以以编写同步代码的方式处理异步代码。在 async/await 函数中，通常使用try/catch块来捕获错误，防止程序中断。但是如果存在多个 async/await，而且需要分开处理错误，多个try/catch 块就显得不太好了
2022-05-17 20:07:42
201
原创 使用拖拽过程的数据：基于 DataTransfer 的 Transmat库
包括文件上传和低代码平台组件，都有使用到拖拽功能。其实利用拖拽功能，还可以跨越浏览器的边界，实现数据共享。利用 Transmat 库就可以实现上述功能。还可以实现一些比较好玩的功能，比如针对不同的可释放目标，做出不同的响应。功能和使用场景Transmat 是一个围绕 DataTransfer API 的小型库 ，它使用 drag-drop 和 copy-paste 交互简化了在 Web 应用程序中传输和接收数据的过程。 DataTransfer API 能够将多种不同类型的数据传输到用户设备上的
2022-05-17 15:26:09
262
原创 一文理解前端水印
明水印（watermark）是一种容易识别、被夹于纸内，能够透过光线穿过从而显现出各种不同阴影的技术。水印的类型有很多，有一些是整图覆盖在图层上的水印，还有一些是在角落。可以通过绝对定位，来将水印覆盖到我们的页面之上。不过，直接覆盖上去是无法触发底下图层的事件的，要使用到 css 属性pointer-events。pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。...
2022-05-17 09:44:53
798
原创 深刻理解 koa2 的核心原理
基础结构和骨架首先，koa 是一个 node 框架：基于 node 原生 req 和 res，并基于封装的自定义的request和response对象封装成一个统一的context 对象。 基于 async/await（generator）的洋葱模型实现了中间件机制。
2022-05-16 21:00:57
259
原创 深入浅出理解微前端
微前端，即一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个庞大应用后出现的应用不可维护的问题。
2022-05-16 11:02:02
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人