自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

逍遥的前端笔记

https://github.com/chenxiaoyao6228

  • 博客(40)
  • 收藏
  • 关注

原创 前端模块化-理解Tapable与Webpack中的Hooks

本文详细介绍了Tapable库及其在Webpack中的应用,涵盖了核心概念、Hook类型及其用途,并通过代码示例展示了各种Hook的实现和使用方法。

2024-08-08 01:09:18 383

原创 前端模块化-探究webpack loader的原理以及实现常见的loader

本文详细探讨了 Webpack 中 Loader 的基本原理和实现细节。内容包括 Loader 的定义、常见类型及其作用,Loader 与 Plugin 的区别,Loader 的输入和输出方式,如何编写同步和异步 Loader,以及 Loader 的执行顺序。

2024-08-08 01:06:40 754

原创 前端模块化-实现mini-webpack

本文详细介绍了如何实现一个简单的打包器mini-webpack,包括需求分析、代码实现、AssetsMap的生成与esm支持等步骤,帮助读者理解打包器的基本原理和实现方法。

2024-08-08 01:03:43 328

原创 前端模块化-手写mini-vite

本文总结了 Vite 的工作原理,包括项目搭建、实现 CLI、启动静态服务器、处理 index.html 和 JS 文件、引入 node_modules、拆分中间件、处理 React 文件等步骤,并介绍了一些实现细节。

2024-08-08 01:01:27 408

原创 前端模块化-理解package.json中的模块化配置

本文总结了package.json中与模块化相关的配置,包括main、browser、type、module、jsnext:main以及exports字段的用途和使用方法

2024-08-08 00:59:44 927

原创 前端模块化-ESM

本文总结了ESM(ES6 Module)的相关知识点,包括基本语法、浏览器加载过程、Node.js中的处理以及与CommonJS模块的差异和兼容。

2024-08-08 00:57:29 999

原创 前端模块化-UMD规范及其实现

本文介绍了UMD规范及其在不同环境中的应用,包括React中的UMD模块使用以及手动实现一个UMD模块的详细步骤。

2024-08-08 00:53:28 974

原创 前端模块化-CMD规范与SeaJS

本文介绍了CMD规范及其在SeaJS中的实现,包括模块定义、引用、标识符以及与其他规范的区别,并探讨了SeaJS的关键原理和实现。

2024-08-08 00:50:33 575

原创 前端模块化-AMD规范与RequireJS

本文介绍了AMD规范及其在RequireJS中的实现,包括模块定义、引用、标识符以及一个常规RequireJS项目的实现和Webpack中加载AMD模块的方法。

2024-08-08 00:44:12 596

原创 前端模块化-CommonJS

本文介绍了CommonJS规范及其在Node.js中的实现,包括模块定义、引用、标识和编译执行的过程,并探讨了模块缓存、路径分析及循环依赖问题。

2024-08-08 00:34:53 783

原创 前端模块化-重新梳理前端模块化

本文总结前端模块化相关的发展历程,探讨命名冲突、文件依赖等问题,并介绍IIFE模式、模块化规范要素及其实现。

2024-08-08 00:13:47 940

原创 SVG入门指南

SVG 是一种使用 XML 描述 2D 图形的语言,与传统前端 DOM 开发比较类似,本文尝试总结一下 SVG 的基本用法。

2024-08-06 16:10:06 1112

原创 实现Vue-tiny-diff算法

前面我们实现了基本的数据更新到视图渲染的逻辑,但是这种方式(innerHTML)是极其低效的, 因此,我们相应引入 dom 和 diff 算法

2024-08-06 16:07:47 427

原创 实现Vue-tiny-数据响应式

响应式视图更新的基本原理是什么呢?本文一起来探究。

2024-08-06 16:05:07 581

原创 前端性能优化-纲领篇

本模块将梳理前端性能优化的相关知识点

2024-08-05 10:01:14 435

原创 前端性能优化-性能检测指标与工具

本节总结了性能优化的指标和工具。

2024-08-05 10:00:09 313

原创 前端性能优化-用户交互体验优化

本文总结一些常见的用户交互体验优化的方法。

2024-08-05 09:59:13 312

原创 前端性能优化-图片优化

本文总结 web 性能优化中图片优化的相关知识点。

2024-08-05 09:57:06 880

原创 前端性能优化-回流与重绘

本文总结回流与重绘相关的知识点。

2024-08-05 09:56:05 831

原创 前端性能优化-web资源加载优先级

资源加载优先级是指在页面渲染的过程中,浏览器决定加载哪些资源并优先加载它们的一种机制。正确配置资源加载的优先级可以显著改善页面加载性能,确保关键资源优先加载,提高用户感知的加载速度。资源加载方式适用场景示例代码同步加载关键脚本、必要资源异步加载非关键脚本、提高性能预加载 (Preload)关键资源、异步加载资源、资源依赖关系预取 (Prefetch)下一个页面的资源、提前加载用户可能浏览的内容预渲染 (Prerender)对用户体验要求极高的场景精细化控制资源加载顺序、网络请求优先级。

2024-08-05 09:55:01 760

原创 前端性能优化-webpack构建优化

本文主要总结 webpack 构建优化相关的事情PS: webpack 的每次更新都会带来很多的新特性,因此学习新知识的时候,不要专注于流程的配置和调参。因为流程终会简化,参数(API)终会升级。要抓大放小,把精力放在最核心的内容上,因为核心的思想是最不容易过时的.

2024-08-05 09:54:19 535

原创 前端性能优化-script标签中的async与defer

当浏览器解析 DOM 时候,遇到 script 标签时,会暂停 DOM 的解析,先加载并执行 script 中的代码,然后再继续 DOM 的解析。

2024-08-05 09:52:51 1006

原创 前端性能优化-React代码优化

本文总结 React 中的代码优化的技巧。

2024-08-05 09:51:56 482

原创 前端性能优化-Gzip工作原理

Gzip(GNU Zip)是一种数据压缩和文件格式的算法。它主要用于在网络传输中减小数据的大小,从而提高传输速度。Gzip 使用 DEFLATE 算法对数据进行压缩,同时还包括一些额外的文件头信息和校验信息。

2024-08-05 09:49:30 569

原创 前端性能优化-CSS 相关的性能优化策略

本节总结 CSS 相关的性能优化策略。

2024-08-05 09:47:51 378

原创 uniapp微信H5开发本地调试方案

痛点:1)原生的H5,并不能方便地提供类似扫一扫的功能2)原生H5的扫一扫也需要部署到httpsps:本文基于mac系统,windows用户可以根据思路来进行调整。

2024-08-05 09:46:44 1116

原创 web 唤起 app 的原理

Web 唤起 App 的基本原理通常有使用定制的 URL schemes 或者 Universal Links(iOS)和 Deep Links(Android)

2024-08-05 09:44:04 311

原创 chrome插件开发踩坑汇总

chrome插件开发虽然使用的是传统的 web 技术,但是在组件通讯,状态管理,开发配置方面还是有许多坑的

2024-08-05 09:42:33 921

原创 WebRTC 初探

项目中有局域网投屏与文件传输的需求,所以研究了一下 webRTC,这里记录一下学习过程。

2024-08-05 09:30:18 514

原创 acme.sh生成https证书

SSL 价格并不便宜, 本节介绍如何使用 acme.sh 生成免费的 SSL 证书

2024-08-02 08:58:09 456

原创 剪贴板操作

本文介绍剪贴板相关的 API 以及实现文本处理效果.

2023-07-24 04:52:52 264

原创 JS中的selection与range

本文简单总结下文本输入中的 Selection 与 Range 事件。测试地址见:在线效果预览项目中一般有主题色的需求,这时候可以通过 css 中的伪类可以自定义选中背景颜色去除第三方的 UI 库的选取选中可能要自定义 css 插件// 去除antd样式文件中的 ::selection,原因是::selection难以被取消 module . exports = function runtime(params) {Selection 对象表示用户选择的文本范围或插入符号的当前位置。

2023-07-24 04:43:50 529

原创 keydown, input,change,compsition事件的区别

本文主要总结下与文本输入的相关的事件。测试地址见:在线效果预览本文只是简单的列举了一些文本输入相关的事件,实际项目中会遇到比较多的兼容性问题,需要针对对应的问题进行处理。

2023-07-24 04:42:02 337

原创 HTML中的焦点管理

焦点作为页面交互中的重要一环,涉及到的知识点也比较多,有必要做一个统一的总结。

2023-07-24 04:40:49 2799

原创 企业微信开发第三方H5应用开发踩坑

企业微信开发第三方H5应用开发

2023-02-16 00:44:43 2685 2

原创 monorepo npm publish 显示404

问题描述:在开发js-rock这个monorepo仓库的时候, 发布的时候显示 404解决的方案在npm上新建组织, 如js-rocks(对应package名需要加@, 如@js-rocks/lodash-tiny)npm addusernpm adduser --registry=https://registry.npmjs.org/ --scope=js-rocks`npm publishnpm publish --access public...

2022-05-12 18:56:29 553

原创 Unable to preventDefault inside passive event listener due to target being treated as passive

一.需求: tab导航要求滚动效果二.问题: iscroll左右滚动不流畅,网上找了一通,大致有以下三种解决方法方法一: 为滚动区域外层div添加下列css样式 ```css #wrapper { touch-action: none; }方法二: 添加disablePointer参数new IScroll('#wrapper', { disableP...

2019-02-22 21:18:44 5160

原创 Git clone Access denied Authentication failed

git拉取项目、git push的时候提示没有权限:Access denied Authentication failed 网上看了一下,估计是第一次输入账号密码的时候输入错误,但是问题是git把错误的账号密码进行了缓存,第二次输入的时候git没有再提示输入账号密码,逐个试了以下方案:一、git config --system --unset credential.helper...

2018-08-05 22:55:04 20186 3

原创 line-height和vertical-align实现多行文字水平垂直居中效果

这篇文章源于同事问了我两个问题:(1)为什么height和line-height设置相同的值能够使得单行文字垂直居中?(2)如何实现多行文字水平垂直居中效果?经过学习,大致形成了自己的思路,也顺利解决了同事的疑惑,觉得有必要写篇文章记录,一来是给自己做备忘,二来是给恰好有此疑惑的同行一个解决问题的思路,鉴于本人水平有限,文中不当之处欢迎批评指教.(一)从文字和图片的...

2018-07-28 22:23:56 5750 5

原创 原型链与继承(一):六种常见继承模式

一、原型链继承:function SuperType(){ this.colors = ["red", "blue", "green"];}SuperType.prototype.Fun = function(){};function SubType(){}//继承了SuperTypeSubType.prototype = new SuperType();var ins...

2018-05-15 17:01:43 15201 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除