浏览器的 User-Agent 到底是什么？一篇讲透用户代理
在上一篇讲 H5 唤端的文章里，我们多次用到”通过 UA 判断是否在微信环境”这样的判断。这个 UA，就是 User-Agent（用户代理）。它是前端识别运行环境、做兼容适配、埋点统计乃至风控反爬的基石。但它同时也是 Web 历史上最”混乱”的一个字段——充满了历史包袱、伪装与妥协。这篇文章把 User-Agent 从概念、结构、历史到现代演进和实战用法一次讲透。 一、User-Agent 是什么User-Agent，字面意思是”用户代理”，指代替用户去访问网络资源的软件本身。 广义上，浏览器、爬虫、命令行工具（curl、wget）、App 内的 WebView、甚至邮件客户端，都是”用户代理”。 在 HTTP 协议里，User-Agent 是一个请求头（Request Header）。每当浏览器向服务器发起请求，都会在请求头里带上这样一行字符串，用来自报家门——告诉服务器”我是谁、我基于什么内核、跑在什么操作系统上”。 一个典型的现代 Chrome UA 长这样： 1Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
H5 唤起未启动的客户端：Hybrid 唤端方案全解析
在 Hybrid 开发中，有一类需求几乎绕不开：用户正在移动端浏览器里访问一个 H5 页面，我们希望把他”引流”回自家的 Native 客户端——可能是打开 App 首页，也可能是直达某个商品详情、活动页。而最棘手的情况恰恰是客户端此刻并未运行（进程未启动，甚至可能压根没安装）。这篇文章把整套唤端方案从原理、手段、检测、降级到踩坑一次讲透。 一、先厘清问题的本质H5 唤起客户端，本质上是浏览器发起对操作系统注册的某个”标识”的调用，操作系统查表匹配到已安装的 App，然后把它拉起来。这个”标识”可以是自定义协议（URL Scheme），也可以是一个特殊的 https 域名（Universal Link / App Link）。 理解这一点很重要，因为它解释了后续所有复杂度的来源： 第一，JS 无法直接得知唤起是否成功。浏览器出于安全和隐私考虑，不会告诉网页”你刚才那次跳转把用户带走了没有”，否则网页就能探测用户装了哪些 App。所以我们只能靠”侧面观察”来推断结果。 第二，“客户端未启动”和”客户端未安装”是两种需要区分的状态。前者只要唤起成功，系统会冷启动...
前端工程化 | 命名空间与模块化
前端工程化 | JS 的模块化前端项目的模块化可以从三个角度理解，同时也反映了 JavaScript 文件组织方式逐层深入的发展过程： 1 - 函数的模块化最原始的函数模块化方式即直接在 JS 文件中定义全局函数来实现特定功能 12function method1() {...}function method2() {...} 随着项目复杂化，这种方式会有函数命名冲突，全局变量污染的问题 在 ES6 标准之前，JS 语言并不支持类，因此需要通过特定写法对此进行优化，主要有两种方式： 命名空间（namepace） 12345678910111213141516var MyNameSpace = MyNameSpace || {};MyNameSpace.Module1 = function() { function privateFunc() { console.log("private function"); } return...
Web 前端存储
浏览器缓存CookieHTTP 是无状态的协议，对于事务处理没有记忆能力，每次请求完成后服务器不会保存任何会话信息，为了跟踪请求者的身份和会话状态，标示多个请求是不是来自于同一客户端，需要主动维护一个状态，因此通过 cookie 或 session 实现 在客户端 JS 中可以通过 document.cookie 访问和修改，Domain 和 Path 必须设置为对应 cookie 相同的值，否则会创建新的 cookie cookie 可以手动设置过期时间，通常保持时间较长 cookie 中不允许存在逗号、分号、空格，可以使用 encodeURLComponent() 进行处理 浏览器一般总共最多存 300 个 cookie，而针对同一个网站最多存 20 个 cookie 单个 cookie 数据最大容量为 4KB 左右，根据不同浏览器可能会有偏差 Session 是一种记录服务器和客户端对话状态的机制，存储容量远高于 cookie。一般失效时间比较短，客户端关闭或超时会默认失效 cookie 和 session 都可以用来认证用户身份的信息，区别在于...
Promise 异步编程
背景由于浏览器的渲染主线程只有一个，JS 采用了异步的方式避免任务阻塞。从原理上，JS 的异步通过 event loop 实现；而从使用上，JS 的异步主要通过 Promise 实现 对于同步代码，先后执行顺序是固定的，能够得知确切的输入与输出。而在异步代码中，执行完成的之间无法确定，不能保证后续代码执行时已经得到结果，比如 DOM 操作： 12345678function addContent(src) { let content = document.createElement('content'); content.src = src; document.head.append(content);}addContent('./a.js');init(); // 执行 init 初始化函数时，addContent...
categories
Hexo + Butterfly 个人博客 安装 Hexo 基于nodejs，按照官方文档直接初始化项目，成功后 hexo server 本地查看默认页面 配置 Github Pages 部署网站 按照 username.github.io 命名格式新建 github repository，配置好 SSH key，在 hexo 项目中的配置文件 _config.yml 中的 deploy 字段下设置 github 代码库地址： 123456deploy: type: git repo: github: url: git@github.com:cheliosky/cheliosky.github.io.git branch: main hexo clean hexo generate hexo deploy 访问 username.github.io 即可预览线上页面 Git 管理网站源码 git init 本地初始化仓库 .gitignore 文件添加忽略...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment