渐进增强(Progressive Enhancement)
上图来自第六届D2前端技术论坛王啟恩/Adam Wang的演讲稿，渐进增强的理念区别于优雅降级更加关注于内容，然后再锦上添花。
渐进增强的重构实践
3
标签云js实现
Javascript利器Aptana全攻略
下载地址：Aptana Studio 2 Aptana Studio 3
aptana studio 3 的UI的配色方案比较好看，但是我装了之后没弄明白对jq语法的支持和svn插件的支持。所以最后还是选择安装了aptana studio 2。
安装完之后第一件事就是配置文件编码为utf-8不然会出现中文乱码。然后是配置自动换行，下载jq语法提示插件和svn插件。由于默认界面背景为白色，看久了会视觉疲劳，所以还下载了一个配色方案：remi-aptana-col-v2。
最后是安装zencoding的支持，给个插件地址直接安装http://zen-coding.ru/eclipse/updates/zencoding语法参照：html-zencoding语法pdf格式语法文件下载：ZenCodingCheatSheet
font简写规则
看到一个阿里的考题，仔细查了下font的缩写规则。有点特殊，所以总结了一下。
CSS 2.1 Specification关于font的值定义如下：
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <’font-size’> [ / <'line-height'> ]? <’font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
其中”|”表示2个或者多个属性里面必须选一个。”||”表示2个或者多个属性里面必须选1个或者多个。”?”表示前面的属性可以选或者不选”[]“为分组标记。
根据这个规则：
A=[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?这三个属性可以不选或者多个+<’font-size’>必选项+[ / <'line-height'> ]? 可以选或者不选+<’font-family’>必选；
A | caption | icon | menu | message-box | small-caption | status-bar | inherit
其中写上一个。
由于写后面的属性都是浏览器自带的样式，一般不能满足我们的需求，所以大部分还是选择A。
A的缩写规则，最简短就是留下两个必须项：font-size+font-family
还有一个特殊情况就是，如果只简写了，其他属性会被置为默认值：font:normal normal normal font-size/normal font-family;
所以写在font定义之前的font-style，font-variant，font-weight，line-height都会被font默认属性覆盖。
浏览器Repaint & Reflow
1. 什么是 repaint 和 reflow？
一个页面由两部分组成:
DOM : 描述该页面的结构
render : 描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint.
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow.
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下：
浏览器页面渲染过程
- 解析HTML代码并生成一个 DOM 树。
- 解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
- 生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
- 当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。