JavaScript: 2016年回顾
这篇讲的是2016年JavaScript世界里那些值得关注的变化。作者从语言本身的演进出发，提到ES6/2015规范终于开始被广泛支持，开发者可以通过Babel等工具平稳过渡，而ES7/2016带来的async函数更是让异步代码的编写变得清晰直观。 文章重点回顾了渐进式Web应用（PWA）在这一年的成熟。随着Chrome 52的发布，PWA提供了离线优先、快速启动等关键能力，让Web应用首次能与原生应用在体验上直接竞争，而且改造步骤相对简单：启用HTTPS、创建应用清单和服务工作者。尽管当时苹果的支持尚不明确，但作者认为这已是移动端Web体验的一次重要突破。 此外，文章也提及了前端框架的竞争格局，React在当时备受瞩目，而Vue.js的第二版发布也标志着其影响力的上升。整体来看，这篇文章捕捉到了JavaScript在语言特性、应用形态和生态工具上共同向前迈进的一个关键节点。
ECMAScript 6 Modules(模块)系统及语法详解
这篇文章梳理了 JavaScript 模块化发展的关键节点：ES6 模块。作者指出，在 ES6 之前，模块化由互不兼容的 CommonJS（语法简洁、同步加载，主导服务器端）与 AMD（语法复杂、异步加载，主导浏览器）两大标准割据。 ECMAScript 6 模块的目标正是融合二者的优点：提供类似 CommonJS 的简洁单值导出语法，同时保留对 AMD 异步加载的支持。更重要的是，作为语言原生标准，ES6 模块在结构上支持静态分析（便于工具检查和优化），并能更优雅地处理循环依赖，从而超越了前代方案。 文章系统讲解了 ES6 模块的语法细节，包括如何使用 `export` 进行“命名的导出”（一个模块可导出多个值），以及对应的 `import` 导入方式，并配有清晰的代码示例。
优化JavaScript的执行效率
这篇讲的是一个在前端性能优化中常被忽视但影响重大的环节——JavaScript的执行效率。作者从页面动画和数据计算等常见场景切入，指出错误的执行时机和过长的代码执行时间是两大元凶。 文章给出的核心建议非常具体：实现动画时，应果断用`requestAnimationFrame`替代`setTimeout`或`setInterval`，因为后者无法保证回调的执行时机，容易导致掉帧。对于耗时的计算任务，则应放到Web Workers中异步执行，避免阻塞主线程。同时，DOM更新应拆分成多个小任务，分批在多个帧中完成。 此外，作者还强调了借助Chrome DevTools的Timeline和JavaScript Profiler进行性能分析的重要性，因为经过JIT编译器优化后的实际执行代码可能与你所写代码大相径庭。这些技巧组合使用，能有效解决页面卡顿，让动画更流畅，是前端开发中必须掌握的性能优化基础。
浏览器的渲染性能
这篇讲的是如何让网页“丝般顺滑”。用户都希望页面响应迅速、动画流畅，而这一切的背后，是浏览器在毫秒之间完成的复杂渲染工作。文章首先点明，要达到60fps的流畅度，浏览器每一帧的处理时间必须控制在约16毫秒，留给实际渲染的纯净时间可能仅有10毫秒，否则就会出现恼人的卡顿（jank）。 要想优化，就必须理解从代码到像素的“像素渲染流水线”。作者从开发者视角出发，将这条核心路径拆解为五个关键步骤：JavaScript执行、样式计算、布局、绘制和渲染层合并。文章清晰地说明了，任何一步的耗时超标都可能导致掉帧。 更重要的是，文章指出了并非所有视觉更新都需要经历全部五步。例如，修改一个元素的“几何属性”（如宽度）会触发完整的“JS→计算样式→布局→绘制→合并”路径，而仅修改颜色或阴影则可能跳过布局步骤。这种对不同操作路径的剖析，能帮助开发者精准定位性能瓶颈，编写出真正高效的前端代码。
降低样式计算的范围和复杂度
这篇讲的是如何优化前端性能中一个关键却容易被忽视的环节：样式计算。作者从DOM操作引发样式重算的现象出发，直接点明性能瓶颈。 文章核心给出了两个优化方向。第一是降低CSS选择器的复杂度。它对比了简单的类选择器（如`.title`）与复杂的复合选择器（如`.box:nth-last-child(-n+1).title`），后者会让浏览器花费大量时间去确认父子关系和次序，严重拖慢渲染。作者提倡采用BEM这类基于class的方法论来简化规则。第二，也是更重要的，是减少需要执行样式计算的元素范围。文章解释了最坏情况下计算量与元素和规则数量的乘积关系，并介绍了现代浏览器通过为每个元素维护样式规则集合来优化计算范围的机制。 此外，文章还介绍了如何使用Chrome DevTools的Timeline功能来实际评估样式计算的成本。通过分析帧率图表和紫色的样式计算耗时事件，开发者可以准确定位卡顿原因。整体而言，这是一篇非常实用的性能优化指南，给出了具体可操作的方法和诊断工具。
CSS3 Flexbox解决方案
这篇文章直指CSS布局长期以来的痛点——缺乏一套优雅、直观的解决方案。作者通过一个名为“Flexbox解决方案”的实例合集，展示了Flexbox如何一举攻克那些曾让开发者头疼的布局难题。 它没有停留在理论讲解，而是聚焦于实战：从更简单灵活的栅格系统，到历史上几乎无解的“圣杯布局”；从需要clearfix hack的媒体对象，到高度未知的“粘性页脚”和经典“垂直居中”问题，Flexbox都提供了简洁得近乎“魔法”的代码实现。这些Demo证明，许多过去需要依赖复杂浮动、定位或框架才能勉强实现的效果，如今用一两个Flexbox属性就能搞定。 更关键的是，随着IE11和Safari 6.1的发布，这套规格已获所有现代浏览器支持。文章提供的源代码和在线演示，让开发者能直观看到，当Flexbox成为布局基石后，CSS代码可以变得多么干净与高效。它预示着Web布局方式正迎来一次实质性的简化。
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 的重要变更进行了分类梳理（如“更改”、“功能”、“已弃用”），帮助读者快速评估潜在影响。整体上，它不仅列出了“做什么”，更通过具体的步骤和工具解释了“如何安全地做”，为这次大版本升级提供了清晰、可操作的路线图。
用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API
这篇文章从一个常见但容易被忽略的场景切入：当用户切换浏览器标签页，导致你写的网页不再可见时，JavaScript 应该如何应对。作者介绍了 `visibilitychange` 事件，它会在页面显示或隐藏时触发，为性能优化提供了精细的控制点。 核心的实用价值在于，开发者可以利用这个事件来“做减法”。例如，当标签页被隐藏时，可以暂停视频或音频的播放、停止无意义的轮询请求、冻结复杂的动画效果。这些措施能有效减少不必要的本地资源消耗和服务器压力，对用户体验和资源效率都有直接好处。 文章还整理了该 API 详尽的浏览器兼容性数据，指出现代浏览器已广泛支持，而部分老版本（如 IE10、早期 Chrome 和 Firefox）则需要加上 `ms-`、`-webkit-` 或 `-moz-` 前缀。特别值得注意的是，作者提到了 Opera 12.10 的一个细节：它在最小化窗口时并不触发此事件，这提醒开发者在实现时需要考虑这类边界情况。 总的来说，这是一篇将具体 API 与实用场景结合得很好的介绍，让开发者清楚地知道它能解决什么问题，以及在不同环境下如何可靠地使用。
用javascript比较语义化版本号
在移动端混合开发场景中，根据APP或其内置浏览器的版本号来执行不同业务逻辑，是一个常见需求。这篇文章聚焦于如何用JavaScript去精确比较语义化版本号（如`6.1.5`这样的格式）。 作者首先澄清了版本号的标准格式（主版本号.子版本号.修正版本号），随后提供了一个清晰的JavaScript函数实现。这个函数的核心思路是将版本字符串按`.`拆分后，逐段比较数字大小，从而判断当前版本与目标版本的高低。文章通过几个简洁的示例，展示了具体的调用方式和结果。 值得注意的是，作者坦诚该方法实现较为基础，只支持完整的版本号串比较，无法单独比较主版本或子版本。文末还补充了一个实用范例：如何从微信浏览器的UA中提取版本号并进行条件判断，这为实际项目中的落地提供了直接参考。整体来看，文章从实际问题切入，给出了一个轻量、可用的解决方案。
一张图帮你看懂 iPhone 的屏幕分辨率
这篇讲的是 iPhone 6 Plus 屏幕分辨率的一个常见困惑。作者从官方标称的 1920×1080 与 Xcode 模拟器显示的 2208×1242 这一“看似奇怪”的差异出发，借用一张清晰的信息图，直观拆解了其中的技术细节。 关键差异在于，2208×1242 是屏幕实际需要渲染的物理像素，而 1920×1080 是最终输出时经过缩小处理的结果。文章引用 Stack Overflow 上的解答点明了核心原因：为了让切图的放大倍数（如 @3x）和实际渲染像素都能保持为整数，系统选择了将 2208×1242 缩小约 17% 来得到标准的 1920×1080 输出。 这个解释清晰地说明了 iOS 屏幕适配中“逻辑点”与“物理像素”之间的映射关系，对于理解 Retina 显示和多分辨率适配原理很有帮助。
让我们写快速的JavaScript,JS性能优化小窍门
这篇讲的是如何写出更快的JavaScript代码。作者从JS性能尚未达到极限的现状出发，直指在混合应用等场景中，性能优化仍是必要的“伎俩”。 文章没有空谈理论，而是用一系列直观的对比测试来揭示优化窍门。它告诉你，动态类型虽灵活，但会拖慢速度，保持变量类型一致（尤其是数组）是关键；`delete`运算符比赋值为`null`慢得多，而动态添加对象属性也会带来巨大开销。对于字符串拼接，`+=`运算符在主流浏览器上都胜过`concat`和`join`。在正则表达式使用上，`RegExp.prototype.exec`通常也比`String.prototype.search`更快。 更重要的是，这些结论都附带了跨浏览器（如Firefox与Chrome）的性能测试数据，比如位运算在Firefox上极快但在Chrome上却更慢。这些基于具体测试的发现，能帮助开发者在编写或优化JS代码时做出更明智的选择，避免那些“昂贵”的操作，让代码真正跑得更快。
使用 Sass (Using Sass)-插件，缓存，配置选项，语法选择及编码格式
这篇整理自官方文档的指南，深入浅出地介绍了 Sass 的三种核心使用方式：作为命令行工具、Ruby 模块以及 Rack/Rails/Merb 框架的插件。文章首先从安装 Sass gem 讲起，然后逐步展开不同场景下的具体用法。 在命令行部分，它演示了如何快速编译单个文件，以及使用 `--watch` 命令实时监控文件或整个目录的变化并自动更新 CSS，这对提升开发效率很有帮助。文章还展示了如何在 Ruby 代码中直接调用 `Sass::Engine` 进行编译。 对于框架集成，内容覆盖了 Rails 2、Rails 3、Merb 以及 Rack 应用的具体配置步骤，比如在 `Gemfile` 或 `config.ru` 中添加必要的代码。这些细节对于在实际项目中落地 Sass 非常实用。总的来说，无论你是想在本地环境快速上手，还是将 Sass 嵌入已有的 Web 框架，这篇文章都提供了清晰、可操作的路径。
JavaScript中的继承方式
这篇文章讲透了JavaScript中实现继承的两种经典方式：原型链继承与类式继承。作者首先厘清了JS中基于对象的核心特性——它不像Java那样拥有严格的“类”概念，而是更多依靠原型（prototype）机制。文章系统梳理了原型链继承如何通过对象间的原型链接实现属性与方法的共享，以及类式继承如何借助构造函数和apply/call方法来复用代码。 为了帮助读者建立扎实的理解，文章特别定义了一套清晰的代码约定，区分了私有属性、实例属性与原型属性（包括基本类型与引用类型），为后续的深入分析奠定了明确的基础。作者指出，理解这些基本属性的归属与区别，是掌握不同继承方式适用场景与潜在陷阱的关键。无论是想搞懂JS对象模型的底层逻辑，还是为后续学习ES6 class语法打好基础，这篇文章都提供了扎实且细致的技术剖析。
前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
这篇文章讲的是前端开发中CSS与Sass的编码规范，核心聚焦于如何通过编写可维护的样式代码来提升长期项目效率。作者从选择器命名、ID使用、标签选择器和选择器精确性四个关键维度出发，给出了一系列具体且可操作的建议。 比如，在命名上提倡使用能反映元素目的的语义化类名（如 `.important`）替代表象名称（如 `.red`）；明确指出应尽量避免使用ID选择器进行样式定义，因为其权重过高且无法复用，会给后期维护带来“选择器战争”的隐患。同时，文章强调要摆脱对HTML标签的选择器依赖（如 `div.content`），应使用纯粹的类名，并善用直接子选择器（`>`）来精确控制样式作用范围，避免因样式过度继承而导致的意外覆盖问题。 整篇文章通过大量“不推荐”与“推荐”的代码示例对比，清晰地阐述了每条规范背后的逻辑。它并非罗列条条框框，而是为前端开发者，尤其是处理中大型项目的团队，提供了一套减少样式冲突、提升代码健壮性和协作效率的实用方法论。
前端编码风格规范（3）—— JavaScript 规范
这篇讲的是前端 JavaScript 编码中几个关键的最佳实践，核心目标是避免全局命名空间污染并提升代码健壮性。 文章首先强调，总是应该使用立即执行的函数表达式（IIFE）来包裹代码。这样做的好处是能创建独立的作用域，防止变量泄露到全局，也避免了代码被其他脚本意外修改。作者对比了 IIFE 的两种括号写法，并推荐将执行括号放在外层括号内部，以使表达式看起来更像一个整体。 严格模式的启用时机也很有讲究。文章建议在 IIFE 内部激活严格模式，而不是在整个脚本的开头。这样既能获得更严格的错误检查和性能优化，又能避免因全局启用严格模式而影响到第三方库的正常运行。 在变量声明方面，文章重申了必须始终使用 `var` 关键字。省略 `var` 会意外创建全局变量，使得作用域难以控制，而严格模式能帮助捕捉因变量名拼写错误导致的问题。 总的来说，文章通过清晰的对比和示例，梳理了这些容易出错的细节，旨在引导开发者写出更隔离、更安全的 JavaScript 代码。
前端编码规范（2）—— HTML 规范
这篇讲的是前端HTML编码中的几个关键规范。文章从HTML5文档类型出发，推荐使用``，并建议避免XHTML，因为后者在现代浏览器中的兼容与优化空间有限。对于无内容元素标签，开发时建议不闭合以保持可读性，但在生产环节可以通过压缩省略部分可选标签来优化文件体积。 文章强调了HTML验证的重要性，建议使用标准工具检测，除非为性能做出必要让步。一个容易被忽视的细节是：虽然规范允许省略可选标签，但在源码中显式写出能避免潜在问题，提升可维护性。 性能方面，文章重点分析了脚本加载策略。同步脚本会阻塞DOM解析，影响页面渲染。现代浏览器可使用`async`属性实现异步加载，甚至可以将脚本放在`
`中。对于需要兼容IE9等老旧浏览器的场景，最佳实践是将带`async`属性的脚本标签放在``之前，这样既限制了阻塞范围，又利用了现代浏览器的异步特性。 这些看似基础的规范，实则直接影响页面的可维护性、兼容性与性能。文章给出了清晰的对比与具体操作建议，对实际开发很有指导意义。前端编码规范（1）—— 一般规范
这篇讲的是前端开发中那些容易被忽视但至关重要的基础规范。作者从团队协作与代码质量的角度切入，清晰地梳理了制定一般性编码规范的核心意义。 文章聚焦于HTML、JavaScript以及CSS/SCSS这几个前端基石，阐述了一套旨在统一风格、明确对错的准则。它强调，规范的价值不仅在于代码的整洁，更在于它能让潜在的问题——无论是风格不一致还是逻辑Bug——在早期就变得显而易见。当团队成员都严格遵守这些约定时，后续的代码审核便能更精准地定位错误，而各种压缩、编译工具也能更顺畅地工作。 说到底，这篇指南提供的是一套可执行的“开发基石”，帮助团队在协作中减少无意义的摩擦，把精力更集中地投入到解决实际问题上。
NodeJS服务监控报警系统的核心实现和开源共建
这篇文章讲述了一个NodeJS开发者如何从实际需求出发，独立打造了一套名为PM25的服务监控报警系统。作者观察到，随着NodeJS服务的增多，团队迫切需要一个能统一管理集群状态、及时发现内存泄露、慢路由等异常的监控平台。商业方案如Keymetrics成本高且涉及数据外传，直接调用PM2 API又不利于多机管理和安全，于是他决定基于PM2进行二次开发。 PM25系统实现了多项实用功能：支持用户登录与服务分桶管理，提供主机与进程的实时CPU、内存等关键指标，并能整合Falcon进行历史图表查看和报警配置。它还创新性地通过扩展包收集慢路由数据，并支持云端对进程进行重启等远程控制。文章详细介绍了项目的开源结构（包含CLI、云端控制台、服务端等模块）、数据库设计以及部署拓扑。 项目的初衷是分享并推动Node生态的建设，作者期望通过代码开源，吸引更多开发者共同完善这个工具。目前，完整代码已在Github上开源。
用JavaScript将数字转换为大写金额
这篇讲的是前端开发中一个常见但容易被忽视的需求：如何在JavaScript里将数字金额规范地转为“壹佰贰拾叁元整”这样的大写汉字格式。 作者直接分享了一个可以拿来即用的`digitUppercase`函数。它的核心思路很清晰：先用两个数组分别定义好“零”到“玖”和“角”、“分”等单位，然后通过循环和取余运算，逐位将数字映射到对应的大写汉字和货币单位上。函数巧妙地用正则表达式对转换后的字符串进行了多次清洗，处理了像“零元零角”这样可能出现的冗余情况，确保输出的格式既准确又符合中文财务书写习惯。 这个实现考虑得比较周全，能正确处理负数、小数（到分）以及像万亿这样的大额数字。对于需要实现发票打印、账单生成等场景的开发者来说，这段代码可以直接解决实际问题。
Sublime Text 3常用快捷键
这篇整理了 Sublime Text 3 在日常编码中最为高频实用的快捷键，堪称一份“指尖提速”手册。作者将零散的命令系统化地分为选择、编辑、搜索、显示等类别，并通过“举个栗子”的方式解释了每个快捷键的具体应用场景。 文章的核心价值在于那些能显著提升效率的“大杀器”选择类快捷键，比如 Ctrl+D 连续选择相同文本、Alt+F3 一键选中所有同名单词，以及 Ctrl+Shift+L 为多行添加光标进行批量编辑。这些操作远比手动寻找替换更为高效。此外，像 Ctrl+P 结合 `@`、`#`、`:` 符号实现的文件、函数、变量快速跳转，也是 Sublime Text 高效导航的精髓。 从基础的缩进复制，到强大的多重选择与分屏浏览，文章覆盖了从入门到进阶的常用操作。掌握这些快捷键，能将重复性的键鼠操作化为流畅的键盘节奏，让代码编写过程更加专注于逻辑本身。