梨逍遥

代码改变世界，程序员创造未来

梨逍遥

浏览器浏览器渲染原理渲染引擎解析 HTML：将 HTML 转换为 DOM 树（Document Object Model）。解析 CSS：将 CSS 转换为样式规则，并应用到 DOM 树。构建渲染树：根据 DOM 树和样式规则生

本文转载自：https://mp.weixin.qq.com/s/xvAJtv1RyOq7rBwaq_tm0Q 1. 使用 JSX 简写尽量对布尔变量使用 JSX 简写。假设你想控制一个导航栏组件的标题可见性。「不好的:」 123retur

隐藏移动端滚动条的几种方案

在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的你可能想到直接设置滚动条样式就可以了，就像这样 123::-webkit-scrollbar { display: none;} 目前来看好像没什么问题，但在某

如何使用 Docker 提升开发及部署体验

前言某些项目在进行私有化部署的时候遇到了一些问题：内网隔离环境，一些 npm 包需要先下载到 u 盘再拷贝到对应的机器上进行安装，安装起来很麻烦。测试环境下，代码和机器配置调试好了，部署到线上机器的时候却出现了问题。线上机器迁移的

构建工具对比与模块化规范

前端工程的痛点前端的模块化需求前端业界的模块标准非常多，包括 ESM、CommonJS、AMD 和 CMD 等等。前端工程一方面需要落实这些模块规范，保证模块正常加载。另一方面需要兼容不同的模块规范，以适应不同的执行环境。兼容浏览器，

vercel部署跨域问题

next.js 本地开发环境跨域利用rewrites重写代理在next.config.js中： 123456789async rewrites() { return [ //接口请求前缀带上/admin-api/

Rollup 打包原理与插件

插件机制仅仅使用 Rollup 内置的打包能力很难满足项目日益复杂的构建需求。对于一个真实的项目构建场景来说，我们还需要考虑到模块打包之外的问题，比如路径别名(alias) 、全局变量注入和代码压缩等等。可要是把这些场景的处理逻辑与核心的

Vite双引擎架构

这篇文章我们会将目光集中到 Vite 本身的架构上，一起聊聊它是如何站在巨人的肩膀上实现出来的。所谓的巨人，指的就是 Vite 底层所深度使用的两个构建引擎：**Esbuild **和 Rollup Vite 架构图很多人对 Vite 的双

Vite 配置

no-bundle 的理念通过 Vite 初始化的项目，在项目根目录中有一个 index.html 文件，这个文件十分关键。因为 Vite 默认会把项目根目录下的 index.html 作为入口文件。也就是说，当你访问 http://lo

优势谈判

摘要：优势谈判，指的是在谈判过程中，主动把握谈判节奏，最终让对方感觉自己获胜的谈判模式。很多人都陷入一个误区，认为：谈判的胜利就是自己获胜。其实，谈判的真正目的不是主宰对方，而是让对方感觉也有所收获。要知道，对方会给你你想要的东西，但是

向上管理的艺术

摘要：💼 在职场中，与上级建立良好的关系并有效地向上管理是取得成功的关键之一。本文将总结与归纳关于向上管理的重要要点，并通过案例和经验分享，帮助读者理解如何正确汇报工作、建立和谐的上下级关系以及实现共同提升 💪💼🎉。分类：#职场

React Hooks 使用时要避免的6个错误

今天来看看在使用 React hooks 时的一些坑，以及如何避开这些坑。问题概览：不要改变 hooks 的调用顺序；不要使用旧的状态；不要创建旧的闭包；不要忘记清理副作用；不要在不需要重新渲染时使用 useState；

React 组件代码结构如何组织？

1. 导入依赖项我们需要在组件文件顶部导入组件所需的依赖项，通常是使用 import 来进行导入。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： 12345678910111213

React常见错误，如何避免？

下面来分享在 React 开发中常见的一些错误，以及如何避免这些错误。理解这些问题背后的细节，防止犯下类似的错误。 1. 组件卸载后执行状态更新报错信息：Can’t perform a React state update on an

React 渲染流程

1. React 渲染流程在说 React 的渲染流程之前，先来看一个在渲染流程中绝对绕不开的概念——协调。（1）协调协调，在 React 官方博客的原文中是 Reconciler，它的本意是“和解者，调解员”。那协调是怎么跟 R

React 组件设计模式

在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：● 有状态组件与无状态组件● 高阶组件（HOC）● Render Props 这些形态各异的 React 设计模式虽然实现思路有所不同，但本质上基本都是为了实现

React 纯函数组件

1. 纯函数所谓纯函数，它是这样一种函数：即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。从纯函数的定义，可以提取出纯函数的必要条件：● 纯函数接受参数，基于参数计算，返回一个新对象；● 不会产生副作用，计算过程不会

React组件通信

在组件之间是存在嵌套关系的，如果我们将一个程序的所有逻辑都放在一个组件中。那么这个组件就会变得臃肿并且难以维护，所以组件化的思想就是对组件进行拆分，再将这些组件嵌套在一起，最终形成我们的应用程序。比如，下面的组件就存在如下的关系：●

React生命周期

1. React 生命周期概览React 会把状态的变更更新到 UI，状态的变更过程必然会经历组件的生命周期。所谓的生命周期就是组件从创建到销毁的过程，它是一个很抽象的概念， React 通常将组件生命周期分为三个阶段：● 装载阶段（

React 组件实践

1. 定义组件接口React 世界由组件构成，所以，如何设计组件的接口就成了组件设计最重要的事情。（1）设计原则React 的组件其实就就是软件设计中的模块，所以其设计原则也遵从通用的组件设计原则，简单说来，就是要减少组件之间的耦

React Router

React Router 是 React 生态系统中最受欢迎的第三方库之一，近一半的 React 项目中使用了 React Router，下面就来看看如何在 React 项目中使用 React Router v6 吧！ 1. 概述Re

React 组件化开发

一、什么是组件化在处理一个复杂的问题时，我们逻辑思维能力是有限的，不太可能一次性搞定所有的内容，那我们就可以对问题进行拆解，拆解成一个个小的问题，最后将其放入整体中，这就是分治的思想。分而治之是软件工程的重要思想，是复杂系统开发和维

package.json

在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package

React 基础入门

一、开发前的准备 1. 开发环境（1）Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。React 应用并不依赖于 Node.js 运行，但是开发过程中的一些编译过程（比如 npm

HTML 属性

1. inputmodeinputmode全局属性是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 1<input type="text" inputmode="tel&qu

你不知道的HTML

1. input 标签：输入验证我们通常会使用 JavaScript 来校验表单，比如： 123456function validateForm() { const inputText = document.forms[&q

数据处理库

1. 工具库（1）LodashLodash 是一个一致性、模块化、高性能、提高开发者效率的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 Ja

如何去搞前端基建

前言大家好，我是yinhan，话说当下，前端职位在近十年的磨砺之下，已是百花齐放万家争鸣，前端也不再是以前那个单纯的切图仔；要问为什么不单纯，无异于前端工程化、前端 devops、前端跨端、前端工具化、前端 CI/CD、前

拖拽排序库

1. React Beautiful Dndreact-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然，性能优秀，简洁而强大的 API，易于上手，与标准浏览器的互动性非常好。 2. Sor

HTML常见兼容问题

前言iphoneX 的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。其实对于 web 前端来说，刘海在绝大多数的场景下是可以不用处理的，因为 safari 或客户端（微信，手 Q 等）的 statusBar 已经替我

文件处理库

1. PDF （1）PDF.jsPDF.js 是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。它由社区驱动并受 Mozilla 支持，目标是创建一个通用的、基于 Web 标准的平台来解析和呈现 PDF。（2）jsP

js常见兼容问题

iPhone7 用 for…in 遍历数组失效问题描述：最初学习使用 js 时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现 iPhone7 不支持用 for…in 遍历数组解决方式：改为for循环遍历移动端点

Vue 库

1. 状态管理（1）PiniaPinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在 2019 年 11 月重新设计的一个状态存储库，它允许你跨组件/页面

React 库

1、状态管理（1）React ReduxRedux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。React Redux 是 Redux 官方实现的 React 绑定。可以让你构建一致化的应用，运行于不同的环境（

css常见兼容问题

移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值

前端四大手写

要问程序员最心虚的面试题，如果要投票选择，手撕代码一定是前三位的。其中在前端领域，以手写 bind、手写深拷贝、手写 EventHub（发布-订阅）、手写 Promise最为常见，我将他们称为四大手写。本文的目的就是要破除大家对四大手写

图标库

1. IconParkIconPark 提供超过 2400 个高质量图标，还提供了每个图标的含义和来源的描述，便于开发者使用。除此之外，该网站还可以自定义图标，这是与其他图标网站与众不同的地方。该图标库是字节跳动旗下的技术驱动图标样式

动画库

很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度，所以今天就来给大家推荐几个好用的 JavaScript 动画库，希望对各位小伙伴有所帮助！ Animate.cssanimate.css 是一个使用 CSS3

2023-06-29

微信小程序抓包与反编译

前端网络安全

抓包首先我们这里的要准备一个安卓模拟器，这里我用的雷电模拟器，这个也可以用其他的模拟器可以自行选择。在模拟器上下载微信并登录之后找到对应的⼩程序点击打开即可（因为兼容性问题，在安卓模拟器中微信⼩程序可能会闪退，但这并不影响后续操作

2023-06-29

恶意流量特征分析

前端网络安全

分析工具：Wireshark,在线解密网站蚁剑的流量特征 UA：antSword/v2.1 请求数据：key=(一段加密的内容) 返回数据通常为请求数据解密后执行的命令实例：如图，根据 HTTP 流分析，U

2023-06-29

输入法

前端网络安全

场景 1输入法一定是安全的吗？在之前也曾曝出不少输入法搜集用户信息获取照片权限，通讯录权限，等。试想一下当你使用某种聊天工具，在跟朋友探讨一件商品，过了一会儿，在某度，某宝，某东可能就推荐了。发现呢是已经推送了，神奇的输入法场

2023-06-29

文件上传漏洞

前端网络安全

文件上传漏洞简介文件上传漏洞是指用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令（webshell）的能力。文件上传在互联网应用中是很正常的需求，问题不是出现在需求上，而是在文件上传服务器后服务器如何处理、解析

2023-06-29

跨站脚本攻击

前端网络安全

跨站脚本攻击跨站脚本攻击跨站脚本攻击（Cross-Site Scripting,XSS）是指通过存在安全漏洞的 Web 网站注册用户的浏览器内运行非法的 HTML 标签或 JavaScript 进行的一种攻击。当被攻击者登录到存在恶

2023-06-29

钓鱼网站

前端网络安全

钓鱼网站钓鱼网站是指欺骗用户的虚假网站。钓鱼网站的基本特征是，其界面基本与真实网站一致，充满诱导性，通过表单交互来欺骗消费者或者窃取访问者提交的账号和密码信息。钓鱼网站是互联网中最常碰到的一种诈骗方式，通常伪装成银行及电子商务、窃取用

2023-06-28

Sentry前端异常监控

前端监控

前言起初神创造天地，天地处于一片混沌状态，神说，要有光，于是便有了光。———《圣经》概述Sentry是一款国外的异常监控开源服务，名字翻译过来就是“哨兵”。有没有感觉像《冰与火》里的守夜人，其实也差不多，把 bug 想成异鬼就行了

2023-06-28

docker入门一文就够了

前端 docker

个人学习 docker 整理的一些资料和 demo，后续会根据新用到的功能不定期更新，有问题欢迎留言背景docker 这个东西是什么就不介绍了，百度/google 有很多，写这篇文章的初衷是记录一下自己在学习过程中的坑

2023-06-28

sentry - sourceMap

前端监控

一、基于 sentry-cli 上传第一步：安装 sentry-cli12# 记得全局安装，这样方便点npm install @sentry/cli -g 第二步：登陆 sentry-cli123456# 如果你用的是官方版，

2023-06-28

sentry - 清理数据

前端监控

一、SENTRY 数据软清理（清理完不会释放磁盘，如果很长时间没有运行，清理时间会很长）12345# 登陆 sentry_worker_1 容器$ docker exec -it sentry_onpremise_worker_1

8 / 12