在 Web 内容中使用系统字体

某天(2016.07.12)发现 GitHub 的字体比原来宽了一些,打开开发者工具一看,字体设置中多了两个奇怪的玩意: body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe »

纯粹的 JavaScript 对象

最近在 EventEmitter3 源码 中看到了 Object.create(null),做一下考证。 传统的 JavaScript 对象 在 JavaScript 中,通常使用对象字面量语法来创建空对象。 var foo = {}; // create new object foo.bar = 'bar'; // string -> »

移动 Web 开发之浏览器

「移动 Web 开发」系列文章为 PPK 所著的 The Mobile Web Handbook 读书笔记。除书中内容,还补充了部分中国的实际情况,以及个人的经验、观点。 本文乃此系列的浏览器篇。 移动浏览器类型 移动浏览器可以分为四种: 内置浏览器 用户安装浏览器 WebView 代理浏览器 它们有时是重叠的,比如代理浏览器可能是内置的,也可能是用户安装的,如 »

前端性能优化最佳实践

本文主要考量客户端性能、服务器端和网络性能,内容框架来自 Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的内容。 同时,建议关注及时更新的 Google 性能优化指南。 目录: 页面内容 减少 HTTP 请求数 减少 DNS 查询 避免重定向 缓存 »

理解 React 生命周期

React「just the UI」,相比 Angular、Ember 等完整的解决方案,上手相对容易。不过,React 生命周期还是会让新手迷惑,而掌握每个生命周期方法扮演的角色和执行时间又是至关重要的: 什么时候进行事件绑定、数据请求、解除绑定等操作? 如何减少不必要的重渲染,提高性能?尽管 React 已经通过特定的算法优化渲染,但折中的处理方式仍会触发一些不必要的渲染。 现实中还会有更多涉及生命周期方法的场景。本文将梳理这些方法,以便更好地理解掌握。 React »

使用 ES2015 重构 React 组件

React 组件 ES2015 Class 改写细节 createClass 工厂函数转换为 ES2015 Class ES5: var MyComponent = React.createClass({ // ... }); ES2015: class MyComponent extends React.Component { // ... } 提取 propTypes 和 getDefaultTypes 与 createClass »

等宽列背后的表格布局算法

引子 网页开发中,经常需要实现等宽列效果,比如 Web App 中的 TabBar、Slider 底部的等宽指示条,而且往往元素的个数是不确定的,无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现: .container { display: flex; } .item { flex: 1; } 但是,你别忘了国情,我朝一些倔强的 UA 并不支持 »