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` 导入方式，并配有清晰的代码示例。
Chrome开发者工具的小技巧
这篇文章收录了多个实用但鲜为人知的 Chrome 开发者工具技巧，适合前端开发者和测试人员提升调试效率。比如，面对被压缩的 CSS/JS 代码，点击左下角的“{ }”图标即可一键格式化，让阅读调试更轻松；想观察元素在 hover 或 focus 状态下的样式？使用 CSS 面板上的“:hov”按钮就能强制切换 DOM 状态，无需手动悬停。 文章还介绍了动画调试的“慢动作”模式、通过一行命令将整个网页变为可编辑状态、模拟低速网络环境等实用功能。其中，“复制为 cURL”功能尤其值得一提，它在 Network 面板中能将 Ajax 请求直接导出为命令行 curl 命令，便于复现和自动化测试（但需注意隐私信息泄露风险）。此外，从给 DOM/XHR/事件监听器设置断点，到在 Console 中使用 jQuery 风格语法选择元素并监控事件，这些技巧覆盖了日常调试的多个常见痛点。整体而言，这是一篇聚焦细节、实操性强的工具指南。
从零开始React服务器渲染
这篇文章讲的是如何用Node+React实现服务器渲染，重点对比了两个关键函数。 作者从服务器渲染带来的SEO和首屏速度优势说起，核心聚焦在 `react-dom/server` 包中的 `renderToString` 与 `renderToStaticMarkup` 这两个API。它们的主要区别在于生成的HTML：`renderToString` 会在DOM上附加 `data-react-id` 和 `data-react-checksum` 等属性，这为客户端提供了“水合”的依据，使得React能高效地接管页面并避免重复渲染；而 `renderToStaticMarkup` 则生成更干净的HTML，没有额外属性，适用于完全静态的页面，但客户端会重新渲染整个组件。 文章不仅阐述了原理，还给出了清晰的代码示例，演示了如何使用 `renderToStaticMarkup` 渲染一个静态页面，并进一步通过一个计数器例子，完整展示了从服务端渲染到客户端初始化的全流程。最终指出，选择哪个函数，决定了应用是能拥有流畅的交互，还是仅作为一个静态文档。 对于想在实际项目中应用React SSR的开发者来说，理解这个核心区别是搭建稳定、高效渲染流程的第一步。
你必须收藏的Github技巧
这篇讲的是几个能立即提升GitHub使用效率的“隐藏”小技巧。作者没有长篇大论，而是直接分享了五个具体的、可操作的方法。 其中比较亮眼的有：直接将master分支设置为GitHub Pages网站源，免去了在gh-pages分支间手动同步的繁琐；通过在URL后添加#L行号，可以精准分享单行或多行高亮代码，对方打开链接就能定位到指定位置；在提交信息中使用fix、close等关键字关联issue，可自动关闭问题，保持项目管理清爽。 此外，文章还介绍了如何用HTML代码在网站中嵌入GitHub的Star按钮，以及通过.gitattributes文件自定义项目被识别的语言类型。整篇文章没有空泛的理论，每个技巧都配有示例或效果说明，对于日常使用GitHub的开发者来说，这些都是能立刻用上、节省时间的实用干货。
优化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 的重要变更进行了分类梳理（如“更改”、“功能”、“已弃用”），帮助读者快速评估潜在影响。整体上，它不仅列出了“做什么”，更通过具体的步骤和工具解释了“如何安全地做”，为这次大版本升级提供了清晰、可操作的路线图。
用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 这样的组件化方案，不仅能够提升代码的可维护性和复用性，还能在需要时通过同构（服务端渲染）无缝优化首屏加载性能，避免了架构推倒重来的痛苦。
在公众号中优雅地呈现代码
这篇文章解答了一个技术公众号运营者常遇到的困惑：如何让 Markdown 生成的代码块在公众号页面中保持整齐的格式，而不是因为微信的过滤机制而错乱。 作者首先点出了问题的根源：Markdown 解释器在处理代码时直接输出了换行符 `n`，而微信的编辑和保存脚本会过滤掉这些符号，导致代码“挤成一团”。常见的应对方式是直接截图，但这对维护者来说既繁琐，又会影响读者的加载和阅读体验。一个更自动化的思路是开发组件，利用 highlight.js 高亮后绘制到 canvas 并导出图片。 不过，作者随后分享了一个更简便的实践路径：借助 Chrome 插件 Markdown Here。这款插件能将 Markdown 直接转换为 HTML，但微信编辑器同样是 contenteditable 区域，其二次解析会再次破坏样式。文章的核心在于针对这一新问题给出的最终处理办法——通过几行正则表达式对转换后的代码进行处理，从而在保存和预览时“骗过”微信的脚本，稳定地呈现出美观的代码格式。这个小技巧，或许能为不少技术号主省去折腾的时间。
谈谈我这三年在技术上的成长
这篇讲的是作者在入职淘宝三年后，对技术成长路径的一次系统复盘。起因是收到许多前端同学关于学习瓶颈的咨询，作者决定整理自己的经验。 文章从个人经历出发，强调了在职业生涯早期打下坚实基础的重要性——比如在学校反复啃完《JavaScript权威指南》这类看似枯燥的基础著作。随后，作者指出进入公司后，需要快速适应新的技术体系和业务流程，从关注“闭包、事件模型”转向理解“组件化、自动化测试”，并借助公司明确的能力分级来定位自己。 对于层出不穷的新技术，作者分享了自己高效的学习心法：先快速了解工具的能力边界和适用场景，在脑海中将其归类（如“工程化-打包类”），而非立刻陷入源码细节。核心观点是，技术学习应紧跟业务需求，知道从哪里学到知识，就等于掌握了一半。 全文没有空谈方法论，而是通过作者在百度、淘宝的实习与工作实例，为技术人尤其是前端学习者提供了一条从夯实基础、到构建体系、再到业务驱动的清晰成长路径参考。
HTML代码到底该不该压缩
这篇文章从一个常见问题出发：开发者常问如何让静态缓存插件支持HTML压缩。作者没有直接讨论实现，而是通过数据分析来探讨HTML代码压缩在今天是否仍有实际意义。 作者首先解释了HTML压缩的本质——主要删除空格、制表符、注释等文本中有意义但浏览器显示时非必要的字符。通过一个Python脚本对100个网页的实测，他发现HTML压缩率最高可超过20%。然而，真正的关键在于后续的对比分析。作者进一步用实验比较了原始HTML、仅HTML压缩、仅Gzip压缩以及“HTML压缩后再Gzip压缩”这四种情况下的文件大小。 数据图表清晰地揭示了两个核心结论：一是HTML压缩带来的空间节省，仅在原始文件较大时才相对明显；二是在服务器已开启广泛使用的Gzip压缩的前提下，网页本身是否经过HTML压缩，对最终传输体积的影响微乎其微。因此，对于大多数网站而言，这种压缩对性能提升意义有限，反而可能影响开发调试效率。 文章最后补充了一个有趣的视角：在像Google这样流量占全球近40%的超大规模场景下，即使是单次请求节省一个字节，累积起来也是巨大的流量成本节省。这说明任何优化的价值，都需要结合实际的应用规模和上下文来评判。
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，方便读者对比选择。
