摘要: 性能优化的目的是为了实现资源的快速加载和响应。性能优化前,需要先分析性能,目的是分析出包含页面渲染、网络传输和文件加载等时间指标,对该页面进行评估分析。找出影响性能的主要因素和瓶颈,对此给出性能优化解决方案。 1. 性能分析 1.1. Chrome 浏览器的 Performance Chrome 浏 阅读全文
posted @ 2024-03-19 21:20 艾前端 阅读(15) 评论(0) 推荐(0) 编辑
摘要: Nginx 是一种轻量级、高性能、低内存的 Web 服务器和反向代理服务器。 1. 正向代理和反向代理 正向代理:客户端向服务器发送请求,并指定目标服务器地址,然后由代理服务器和原始服务器通信,转交请求并获得响应,再返回给客户端。正向代理隐藏了真实的客户端,使真实的客户端对服务器不可见。 反向代理: 阅读全文
posted @ 2024-03-18 21:06 艾前端 阅读(8) 评论(0) 推荐(0) 编辑
摘要: 编译工具 Babel Babel 主要有三个功能: 转义 ES6 为 ES5,保证新语法也可以在旧版本浏览器中运行。 通过 polyfill 方式在目标环境中添加缺失特性。 源码转换。 1. 安装 Babel (1)生成 package.json mkdir babel-note && cd bab 阅读全文
posted @ 2024-03-04 20:32 艾前端 阅读(12) 评论(0) 推荐(0) 编辑
摘要: package.json 文件 每个前端项目中都有 package.json 文件,它是用于声明依赖的 npm 包配置文件。 1. 生成 package.json 文件 yarn init -y { "name": "package", "version": "1.0.0", "descriptio 阅读全文
posted @ 2024-03-03 15:33 艾前端 阅读(22) 评论(0) 推荐(0) 编辑
摘要: JavaScript 使用 JavaScript 的正则表达式是由 RegExp 对象表示的,同时也可以使用正则表达式字面量。 1. 使用 RegExp 对象 let pattern = new RegExp("pattern", "flags"); pattern 是字符串形式的正则表达式模式。f 阅读全文
posted @ 2024-01-17 21:03 艾前端 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 常用案例 1. 匹配邮箱地址 /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ 2. 匹配 URL /^(https?|ftp):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/ 3. 匹配日期(YYYY-MM- 阅读全文
posted @ 2024-01-16 20:38 艾前端 阅读(5) 评论(0) 推荐(0) 编辑
摘要: 运算符优先级 正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。 相同优先级的从左到右进行运算,不同优先级的运算先高后低。各种正则表达式运算符的优先级从最高到最低顺序: 序号 字符 含义 1 \ 转义符 2 (), (?:), (?=), [] 圆括号和方括号 3 *, +, ? 阅读全文
posted @ 2024-01-15 20:50 艾前端 阅读(18) 评论(0) 推荐(0) 编辑
摘要: 断言 正则表达式的断言是一种特殊的模式匹配技术,用于在匹配时对字符串进行条件性的预测。断言不会消耗输入字符串,仅仅是在匹配的位置上进行条件判断。断言分为正向断言和负向断言,分别用于描述匹配位置前面或后面的条件。 正则表达式的断言有 4 种形式: (?=pattern) -- 零宽正向先行断言:匹配位 阅读全文
posted @ 2024-01-14 20:43 艾前端 阅读(78) 评论(0) 推荐(0) 编辑
摘要: 修饰符 在正则表达式中,修饰符是用来修改搜索模式的标志,添加在正则表达式的末尾,以控制匹配的方式。格式为:/pattern/flags。pattern 为正则表达式,flags 为修饰符。 正则表达式的修饰符可以单独使用,也可以组合使用,它们提供了更灵活的匹配选项,适应不同的需求。 1. g - 全 阅读全文
posted @ 2024-01-13 15:58 艾前端 阅读(29) 评论(0) 推荐(0) 编辑
摘要: 元字符 元字符在正则表达式中扮演着重要的角色,通过组合使用它们,能构建复杂的模式来匹配和处理文本。 序号 字符 含义 实例 1 . 匹配除换行符以外的任意单个字符 a.b 能匹配 "aab"、"axb",但不匹配 "a\nb" 2 ^ 匹配字符串的开头 ^abc 能匹配 "abc",但不匹配 "aa 阅读全文
posted @ 2024-01-12 21:00 艾前端 阅读(8) 评论(0) 推荐(0) 编辑
摘要: 介绍 正则表达式 (Regular Expression,简称 RegExp) ,是一种文本模式匹配工具,可以匹配普通字符、特殊字符等。它提供了一种灵活且强大的方式来查找、替换、验证和提取文本数据。它可以应用于各种编程语言,如 JavaScript、Python、Java、PHP 等。 正则表达式在 阅读全文
posted @ 2024-01-11 20:54 艾前端 阅读(6) 评论(0) 推荐(0) 编辑
摘要: 可以通过原生 JS 获取本地视频的时长,不需要借助第三方插件。 实现步骤如下: 使用 input[type=file],设置上传文件控件,限制上传类型为 video/mp4,指定上传视频。 通过监听 change 事件,获取到原视频。 使用 FileReader 对象,用于读取 File 对象,并通 阅读全文
posted @ 2024-01-09 17:54 艾前端 阅读(172) 评论(0) 推荐(0) 编辑
摘要: 关于微信安卓端网页字体适配的通知 微信安卓版 7.0.10 版本起,网页的字体会跟随微信设置里的字体大小更改而变化。 当用户修改微信客户端字体大小后,微信公众号网页的适配就会变得非常繁琐,Android 系统设备有 8 级字体大小,IOS 系统设备有 7 级字体大小,尤其将字体放大到最大一级后,页面 阅读全文
posted @ 2023-09-13 15:18 艾前端 阅读(889) 评论(0) 推荐(0) 编辑
摘要: 有时候,当用户离开网页时,需要向服务器提交一些用户行为的统计信息。这时,传统的请求方式,数据可能无法发送,因为浏览器已经把页面卸载了。 为了能够成功发出请求,并让服务器处理,需要解决两个问题: 监听微信 H5 页面的卸载; 在页面卸载事件里,在浏览器后台保持 HTTP 连接,继续发送数据。可靠的发送 阅读全文
posted @ 2023-08-28 16:42 艾前端 阅读(93) 评论(0) 推荐(0) 编辑
摘要: 微信公众号页面提供了转发给朋友的功能,如果没有设置隐藏“发送给朋友”,就可以转发给朋友。 ``` wx.hideMenuItems({ menuList: [ 'menuItem:share:appMessage' // 发送给朋友 ], // 要隐藏的菜单项 }); ``` 转发给朋友后,朋友可能 阅读全文
posted @ 2023-08-11 17:49 艾前端 阅读(395) 评论(0) 推荐(0) 编辑