浏览器的渲染性能
这篇讲的是如何让网页“丝般顺滑”。用户都希望页面响应迅速、动画流畅，而这一切的背后，是浏览器在毫秒之间完成的复杂渲染工作。文章首先点明，要达到60fps的流畅度，浏览器每一帧的处理时间必须控制在约16毫秒，留给实际渲染的纯净时间可能仅有10毫秒，否则就会出现恼人的卡顿（jank）。 要想优化，就必须理解从代码到像素的“像素渲染流水线”。作者从开发者视角出发，将这条核心路径拆解为五个关键步骤：JavaScript执行、样式计算、布局、绘制和渲染层合并。文章清晰地说明了，任何一步的耗时超标都可能导致掉帧。 更重要的是，文章指出了并非所有视觉更新都需要经历全部五步。例如，修改一个元素的“几何属性”（如宽度）会触发完整的“JS→计算样式→布局→绘制→合并”路径，而仅修改颜色或阴影则可能跳过布局步骤。这种对不同操作路径的剖析，能帮助开发者精准定位性能瓶颈，编写出真正高效的前端代码。
降低样式计算的范围和复杂度
这篇讲的是如何优化前端性能中一个关键却容易被忽视的环节：样式计算。作者从DOM操作引发样式重算的现象出发，直接点明性能瓶颈。 文章核心给出了两个优化方向。第一是降低CSS选择器的复杂度。它对比了简单的类选择器（如`.title`）与复杂的复合选择器（如`.box:nth-last-child(-n+1).title`），后者会让浏览器花费大量时间去确认父子关系和次序，严重拖慢渲染。作者提倡采用BEM这类基于class的方法论来简化规则。第二，也是更重要的，是减少需要执行样式计算的元素范围。文章解释了最坏情况下计算量与元素和规则数量的乘积关系，并介绍了现代浏览器通过为每个元素维护样式规则集合来优化计算范围的机制。 此外，文章还介绍了如何使用Chrome DevTools的Timeline功能来实际评估样式计算的成本。通过分析帧率图表和紫色的样式计算耗时事件，开发者可以准确定位卡顿原因。整体而言，这是一篇非常实用的性能优化指南，给出了具体可操作的方法和诊断工具。
jQuery 3.0 升级指南
这篇指南是为那些正在或将要将项目升级到 jQuery 3.0 的开发者准备的实用手册。文章开宗明义，指出 3.0 版本对 API 进行了清理和更改，并明确了新的浏览器支持范围（如 IE 9+、现代浏览器的前两个版本等）。 其核心亮点在于详尽介绍了官方推荐的平滑迁移方案——使用 jQuery Migrate 插件。文章不仅解释了该插件的作用，即充当升级工具来警告不兼容用法，还给出了一个清晰的八步升级流程，指导开发者如何从 1.x/2.x 逐步过渡到 3.0，并确保代码的稳健性。例如，流程中强调先在 2.x 版本下使用 Migrate 1.x 插件解决遗留问题，再切换到 3.0 与 Migrate 3.x 插件配合。 此外，文章将 3.0 的重要变更进行了分类梳理（如“更改”、“功能”、“已弃用”），帮助读者快速评估潜在影响。整体上，它不仅列出了“做什么”，更通过具体的步骤和工具解释了“如何安全地做”，为这次大版本升级提供了清晰、可操作的路线图。
用webgl打造一款简单第一人称射击游戏
这篇讲的是如何用原生WebGL从零构建一款简单但完整的3D第一人称射击游戏。 作者从一个有趣的缘由切入——为了回应同事对之前3D迷宫项目“缺少一把枪”的吐槽，于是有了这个新Demo。文章的重点不在于游戏复杂度，而在于两个WebGL核心知识点的实践：**如何在没有建模工具的情况下，用代码拼凑基本几何体来生成枪械等3D模型**，以及**如何控制“摄像头”来实现第一人称视角**。 作者坦诚地展示了“手搓”模型的艰辛过程：通过将现实尺寸映射到WebGL坐标系，并拆解为简单子模型来组合成型。这种方式虽然不实用，但生动地揭示了3D物体在代码层面的构成逻辑。更精彩的部分是关于摄像头的讲解，作者用一组直观的对比图，清晰地说明了物体移动与摄像机移动在视觉上等效的原理，即它们都在改变物体相对于“视锥体”的位置，这是理解3D视角控制的关键。 文章附有可直接试玩的链接和开源代码，将抽象的顶点变换（uPMatrix*uVMatrix*uMMatrix）与具体的射击游戏体验结合起来，让理论立刻变得可感知。对于想理解WebGL渲染管线，特别是摄像机机制的前端开发者来说，这是一个非常生动的实践案例。
漫谈Nuclear Web组件化入门篇
这篇文章从传统 Web 前端开发中常见的痛点切入，比如 CSS 样式冲突、事件处理污染全局作用域、组件复用困难、数据更新时 DOM 操作繁琐，以及首屏渲染性能问题。作者详细描述了过去为了规避这些“坑”所采取的各种笨拙方案，例如为 CSS 添加冗长的命名空间，或将事件函数绑定在 window 对象上，指出这些做法只是妥协而非根本解决之道。 核心介绍的是腾讯 AlloyTeam 开发的 Nuclear 框架如何通过组件化来系统性地解决这些问题。Nuclear 提供了从创建组件、声明式事件绑定、模板条件判断到循环渲染的一整套方案，将 HTML、CSS 和 JavaScript 封装成独立的单元。文章通过“Hello, Nuclear!”等具体代码示例，展示了其内置的模板引擎和清晰的组件 API。 使用 Nuclear 这样的组件化方案，不仅能够提升代码的可维护性和复用性，还能在需要时通过同构（服务端渲染）无缝优化首屏加载性能，避免了架构推倒重来的痛苦。
Date对象的那些事儿
作者从实际项目中处理时间戳转换的需求出发，深入讲解了 JavaScript 中 Date 对象的初始化参数与常用方法。文章梳理了几种创建 Date 实例的不同方式：既能传入自 1970 年起的毫秒数（并特别解释了参数为 0 时因时区显示为 8 点的细节），也能传入年、月、日等分项数字（其中月份 0 代表一月是个易错点），甚至能直接使用格式灵活的日期字符串。 在方法部分，文章对比了 `getDate()`、`getMonth()`、`getFullYear()` 等一系列获取本地时间的函数，并重点说明了 `getTime()` 返回的毫秒数与 Unix 时间戳的关系，演示了两者相互转换的实用技巧。整体内容围绕 Date 对象的基本用法与常见陷阱展开，细节实在，适合想理清时间处理基础知识的开发者。
超级小的web手势库AlloyFinger发布
这篇介绍的是一个名为AlloyFinger的Web手势库，它能为移动设备带来流畅的手势交互体验，同时解决困扰开发者已久的click 300ms延迟问题。作者从实际的移动端开发需求出发，提供了一个轻量级且功能完备的解决方案。 AlloyFinger的核心优势在于其极小的文件体积与丰富的功能。它支持包括pinch缩放、rotate旋转、pressMove拖拽、doubleTap双击、swipe滑动等在内的多种手势，并提供了独立版和React版本，方便不同技术栈的项目集成。文章详细列举了库支持的事件列表，并通过独立版与React版本的快速上手代码示例，直观展示了其简洁的API设计。 值得注意的是，该库已在包括兴趣部落、QQ群、腾讯CDC在内的多个线上项目中得到实际验证，其性能与稳定性有据可查。文章还针对使用中的常见问题，如与transformjs的关系、调试方法、缩放原点计算等进行了Q&A解答，对开发者非常实用。 总的来说，AlloyFinger为需要处理复杂触摸交互的Web项目，提供了一个开箱即用、经过实战检验的轻量级工具。
用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API
这篇文章从一个常见但容易被忽略的场景切入：当用户切换浏览器标签页，导致你写的网页不再可见时，JavaScript 应该如何应对。作者介绍了 `visibilitychange` 事件，它会在页面显示或隐藏时触发，为性能优化提供了精细的控制点。 核心的实用价值在于，开发者可以利用这个事件来“做减法”。例如，当标签页被隐藏时，可以暂停视频或音频的播放、停止无意义的轮询请求、冻结复杂的动画效果。这些措施能有效减少不必要的本地资源消耗和服务器压力，对用户体验和资源效率都有直接好处。 文章还整理了该 API 详尽的浏览器兼容性数据，指出现代浏览器已广泛支持，而部分老版本（如 IE10、早期 Chrome 和 Firefox）则需要加上 `ms-`、`-webkit-` 或 `-moz-` 前缀。特别值得注意的是，作者提到了 Opera 12.10 的一个细节：它在最小化窗口时并不触发此事件，这提醒开发者在实现时需要考虑这类边界情况。 总的来说，这是一篇将具体 API 与实用场景结合得很好的介绍，让开发者清楚地知道它能解决什么问题，以及在不同环境下如何可靠地使用。
前端路由实现与 react-router 源码分析
这篇技术文章从单页应用的前端路由切入，先带读者实现了一个极简的路由系统。作者用hash变化的原理，通过监听`hashchange`事件，构建了一个包含路由注册（`route`）和刷新（`refresh`）的`Router`对象，清晰地揭示了路由工作的底层逻辑。 在打好这个基础后，文章的核心转向了react-router的源码分析。它点明了react-router与history模块结合的关键——“包装方式”，即通过一层包装来复用原生对象的内部机制，从而在解耦的同时实现功能增强。文章还展示了react-router如何将其API设计为React组件（如Router、Route、Link），使其能无缝融入React的组件生命周期和声明式编程范式。 作者通过从极简实现到复杂库源码的剖析，让读者既能理解路由的“为什么”，也能看清主流解决方案的“怎么做”，尤其包装模式与组件化的设计思路，对理解大型前端库的架构很有启发。
移动web开发调试工具AlloyLever介绍
这篇介绍的是AlloyLever，一个轻量但功能强大的移动端Web调试工具。它直接解决了移动调试的三大高频痛点：查看日志（Log）、捕获脚本错误（Error）、监控网络请求（AJAX）。 与开发者需要连接电脑调试不同，AlloyLever通过在页面中注入一个JS文件，就能提供一个类似桌面浏览器DevTools的浮动面板。它巧妙地通过重写`console`方法和`XMLHttpRequest`对象，来拦截并记录所有的日志输出、JS错误、资源加载失败以及XHR请求的完整生命周期。同时，它也能展示Cookie、LocalStorage和页面性能时间线。 这种“注入即用”的设计，极大地降低了移动端调试的门槛，特别适合在真机上快速定位问题。文章还清晰地拆解了其实现原理，比如如何通过回调检查AJAX状态来捕获响应数据，可读性很高。对于常做移动端开发的团队来说，这是一个能显著提升排错效率的实用工具。文章末尾也提到了微信团队的vConsole，方便读者对比选择。
zepto/jQuery、AngularJS、React、Nuclear的演化
这篇文章梳理了前端开发中处理DOM交互的技术演化路径。从最初无框架时代直接在DOM元素上声明事件，导致全局变量污染和脚本执行时序问题开始，讲到开发者通过命名空间、工具函数库逐步封装DOM查询与事件绑定。接着展示了jQuery/zepto如何通过统一API将这些操作整合，极大简化了开发流程，但早期版本仍存在脚本加载期间交互失效的体验问题。文章通过代码示例直观对比了各阶段方案的痛点与改进，核心脉络在于：前端框架的演化始终围绕着解决“如何更优雅、更健壮地建立人机交互”这一刚需，从补丁式封装走向系统化的抽象层设计。
元素选择器 - Mini Query
这篇讲的是如何用寥寥几行代码实现一个简单但功能完整的元素选择器，并且巧妙地兼容了IE8以下的老式浏览器。 作者从一个实际的前端兼容性需求出发：虽然现代浏览器已经原生支持 querySelector 和 querySelectorAll，但在需要照顾低版本IE的项目中，开发者往往需要 hack。文章提出的核心方案原理清晰且富有巧思——通过动态创建一条CSS规则并应用到目标元素上，给它们打上一个临时标记（比如“Barret:Lee”这个属性）。接着，只需遍历页面所有元素（document.all），检查哪些元素“染上”了这个标记，就能将它们收集起来。完成任务后，再移除这条临时规则，保持页面清洁。 文章提供了完整的实现代码，其中可以看到对 IE8 等环境的针对性处理，例如修复 `querySelectorAll` 返回值的兼容性问题。这种利用CSS Rule作为“探针”来定位元素的方法，避免了复杂的DOM遍历，实现轻量而有效，对于需要处理历史遗留项目的开发者来说，是一个值得了解的小技巧。
JavaScript 代码执行效率对比工具
这篇文章介绍了一个用于对比JavaScript代码执行效率的轻量级工具。作者从小程序和大型工程对性能需求的不同出发，梳理了几种常见的性能测试方案，包括使用在线平台 jsperf.com、利用 `console.time` 计时以及自己编写计时器。 为了更直观地对比不同代码片段的性能差异，作者开发了这个名为 Performance 的工具。其核心设计思路是在设定的时间内（默认1000ms）循环执行指定的代码，并基于执行结果计算出一个相对的效率百分比。其中效率最高的代码会被标记为100%，其余代码则显示为相对的性能百分比，从而让性能高低一目了然。 文章提供了工具的在线演示页面和 GitHub 仓库地址，方便读者快速上手体验。对于正在编写框架或库、需要精细优化关键代码路径的前端开发者来说，这个工具提供了一种便捷的本地化性能评测与对比方式。
用javascript比较语义化版本号
在移动端混合开发场景中，根据APP或其内置浏览器的版本号来执行不同业务逻辑，是一个常见需求。这篇文章聚焦于如何用JavaScript去精确比较语义化版本号（如`6.1.5`这样的格式）。 作者首先澄清了版本号的标准格式（主版本号.子版本号.修正版本号），随后提供了一个清晰的JavaScript函数实现。这个函数的核心思路是将版本字符串按`.`拆分后，逐段比较数字大小，从而判断当前版本与目标版本的高低。文章通过几个简洁的示例，展示了具体的调用方式和结果。 值得注意的是，作者坦诚该方法实现较为基础，只支持完整的版本号串比较，无法单独比较主版本或子版本。文末还补充了一个实用范例：如何从微信浏览器的UA中提取版本号并进行条件判断，这为实际项目中的落地提供了直接参考。整体来看，文章从实际问题切入，给出了一个轻量、可用的解决方案。
谈谈 external 模式的打包
当项目依赖的第三方库越来越多，一次性打包整个应用的做法在国内网络环境下常常导致首屏加载缓慢。同时，开发过程中频繁的实时打包也因重复处理这些稳定不变的依赖而拖慢了构建速度。 这篇文章详细阐述了如何利用 browserify 或 webpack 的 **external 模式** 来优化打包策略。其核心思路是将 React、React Router 等更新频率低的第三方库，从主业务包中分离出来，生成独立的 JS 文件。通过 `