定义:

优雅降级（graceful degradation):

一开始就构建站点的完整功能，

然后针对浏览器测试和修复

渐进增强（progressive enhancement):

一开始只构建站点的最少特性，

然后不断针对各浏览器追加功能。

优雅降级和渐进增强都关注于同一网站

在不同设备里不同浏览器下的表现程度。

区别:

“优雅降级”观点认为应该针对那些最高级、

最完善的浏览器来设计网站。

而将那些被认为“过时”或有功能缺失的浏览器下

的测试工作安排在开发周期的最后阶段，并把测试

对象限定为主流浏览器（如 IE、Mozilla 等）的

前一个版本。

“渐进增强”观点则认为应关注于内容本身。

总结:

"优雅降级"就是首先完整地实现整个网站,

包括其中的功能和效果. 然后再为那些无

法支持所有功能的浏览器增加候选方案,

使之在旧式浏览器上以某种形式降级体验

却不至于完全失效。

"渐进增强"则是从浏览器支持的基本功能开始,

首先为所有设备准备好清晰且语义化的html及

完整内容, 然后再以无侵入的方法向页面增加无

害于基础浏览器的额外样式和功能。

当浏览器升级时, 它们会自动呈现并发挥作用。

浏览器的结构:

用户界面（UI） - 包括菜单栏、工具栏、地址栏、

后退/前进按钮、书签目录等，也就是能看到的除

了显示页面的主窗口之外的部分；

浏览器引擎（Rendering engine）-也被称为浏览器

内核、渲染引擎，主要负责取得页面内容、整理信息

（应用CSS）、计算页面的显示方式，然后会输出到

显示器或者打印机；

JS解释器 - 也可以称为JS内核，主要负责处理

javascript脚本程序，一般都会附带在浏览器

之中，例如chrome的V8引擎；

网络部分 - 主要用于网络调用，例如：HTTP请求，

其接口与平台无关，并为所有的平台提供底层实现；

UI后端 - 用于绘制基本的窗口部件，比如组合框和窗口等。

数据存储 - 保存类似于cookie、storage等数据部分，

HTML5新增了web database技术，一种完整的轻量级客

户端存储技术。

主要浏览器：

IE、Firefox、Safari、Chrome、Opera。

它们的浏览器内核（渲染引擎）：

IE--Trident

FF(Mozilla)--Gecko

Safari--Webkit

Chrome--Blink（WebKit的分支）

Opera--原为Presto，现为Blink

动静分离需求，使用不同的服务器处理请求。

处理动态内容的只处理动态内容，不处理别的，

提高效率。

突破浏览器并发限制, 同一时间针对同一域名

下的请求有一定数量限制。超过限制数目的请

求会被阻止。不同浏览器这个限制的数目不一样。

Cookieless, 节省带宽，尤其是上行带宽一般比下

行要慢。用户的每次访问，都会带上自己的cookie

，久而久之耗费的带宽还是挺大的。

假如weibo 的图片放在主站域名下，那么用户

每次访问图片时，request header 里就会带有

自己的cookie ，header 里的cookie 还不能压缩，

而图片是不需要知道用户的cookie 的，所以这部分带

宽就白白浪费了。

避免不必要的安全问题(比如: 上传js窃取主站cookie之类的)

节约主域名的连接数，从而提高客户端网络带宽的利用率，

优化页面响应。

) 减少http请求次数：css spirit,data uri;

) JS，CSS源码压缩;

) 前端模板 JS+数据，减少由于HTML标签导致

    的带宽浪费，前端用变量保存AJAX请求结果，每

    次操作本地变量，不用请求，减少请求次数;

) 用innerHTML代替DOM操作，减少DOM操作次数;

) 用setTimeout来避免页面失去响应;

) 用hash-table来优化查找;

) 当需要设置的样式很多时设置className而不

    是直接操作style;

) 少用全局变量;

) 缓存DOM节点查找的结果;

) 避免使用CSS Expression;

) 图片预载;

) 避免在页面的主体布局中使用table，

     table要等其中的内容完全下载之后才会显示出来，

     显示比div+css布局慢;

) 控制网页在网络传输过程中的数据量;

     比如: 启用GZIP压缩或者保持良好的编程习惯，

     避免重复的CSS，JavaScript代码，

     多余的HTML标签和属性。
    

) 语义化html标签;

) 合理的title, description, keywords;

) 重要的html代码放前面;

) 少用iframe, 搜索引擎不会抓取iframe中的内容

) 图片加上alt