在 App 内嵌 WebView 的聊天、评论、搜索等场景中，页面通常由三部分组成：顶部 Header（固定）、中间对话区（可滚动）、底部输入框（固定）。

理想状态下，软键盘弹出时只有中间对话区被压缩，Header 始终吸顶，输入框随键盘上推。但在 iOS 和 Android 上，实际情况往往与预期不符。本文整理了实际开发中常见的兼容问题，以及对应的处理方案。

前言

随着前端技术的不断发展，构建工具与我们的开发已密不可分，但是无论选择哪款构建工具，我们都或多或少的使用过他们热更新的能力，今天就以 webpack 为例，来看 webpack 热更新的原理。

要实现热更新的能力，首先 webpack 要具备文件监听的能力，其次也要具备模块构建的能力，所以我们就从无到有的看 webpack 热更新的原理。

前言

知道 Vue 响应式原理的都知道，每个组件都对应有一个自己的 watcher 实例，但是除了组件对应的 watcher 实例，computed 和 watch 也都分别对应有自己的 watcher 实例，所以下面我们就针对这三种 watcher 做一下研究，知道了底层实现，也能更好的让我们在使用中做出更好的抉择。

从地址栏输入 URL 到页面显示，浏览器依次完成 URL 校验 → DNS 解析 → 网络请求 → HTML/CSS/JS 解析 → 渲染树构建 → 布局 → 绘制 → 合成。理解这条 关键渲染路径（Critical Rendering Path），是掌握浏览器内部机制的基础。

前言

前端数据存储方案主要有 Cookie、Web Storage、IndexedDB 三种。下图为 Chrome 浏览器的存储方案，虽然支持 Web SQL 存储，但是 W3C Web应用工作组于2010年11月停止了对该规范的研究，所以不提倡使用，下面就以上三种存储方案做一下介绍。

一、模块化进化史

对于 js 的编写，不能像其他语言一样很好的支持模块化，很多程序会比较臃肿的丢在一个文件里，要把这个程序拆分开使用，两个文件之前变量的传递就是个问题。

一、Git 是什么

Git 是目前世界上最先进的分布式版本控制工具之一，下面我将通过数据的流向来介绍它。

用过默认主题，也试过别人写的主题，最后还是想有一套自己的。于是做了 Yin 主题。本文记录从零搭建 Hexo 主题的完整流程：目录结构 → 数据来源 → 各页面实现 → 发布到官方主题库。

一、前言

本文梳理音乐网站从设计到落地的完整思路，重点讲清数据如何从数据库一步步流到前端页面。先建立整体流程感，再逐个击破接口、组件等细节——无论是照着做一遍，还是迁移到其他项目，都会顺手得多。

项目源码：github.com/Yin-Hongwei/music-website

一、概念

正则表达式是用于匹配字符串中字符组合的模式。

JavaScript 是单线程语言，异步能力依赖 Event Loop 调度宏任务与微任务。理解这套机制，是读懂 setTimeout、Promise、async/await 等 API 执行顺序的基础。

一、前言

vue 响应式原理是数据渲染到视图，及数据修改触发视图更新的过程。

以前部分设计作品，做个纪念。