网站页面打开速度优化的渐进问.

西瓜君博客整理了优化网页打开的重要指标不外乎：页面首次打开速度，首屏渲染速度，二次打开时间。
大致总结为：

1. 外联内联js/css的位置摆放建议

2. combo handler的引入

3. 减少 dom elements 的数量

4. 引入 textarea/script 元素做延迟解析异步渲染

常规优化建议：

    css 外联文件引用在 html 文档头部：位于 header 内，css放在header中符合w3c标准，加载提升加载和渲染的速度；

javascript 外联文件引用放在 html 文档底部：具体如何摆放内联JS/CSS和外联JS/CSS，请参考优化第二阶段；

http 静态资源尽量用多个子域名：充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力，参考 附录C；
具体建议：

业务类图片分散在 p0.img.com 下；

JS、CSS、CSS背景图片、CSSSprite图片分散在 s0.img.com域名下；

服务器端提供 html 文档和 http 静态资源时，尽量开启 gzip 压缩；

jepg/png 等图片，可以选择不开启 gzip，因为可能服务器端图片无损压缩算法已经很强悍了，不需要依赖于 gzip,开启gzip反而增大了服务器的压力；

json/xml 等格式的文本响应，也建议开启 gzip ；

在 js、css、image 等资源响应的 http headers 里，设置 expires、last-modified；

通过 combo handler 合并 js 和 css 的下载，尽量减少 HTTP Requests 的数量，js/css 的 minify：可统一通过 combo handler 做到压缩加合并；

减少不必要的 301/302 跳转：别让页面打开时间浪费在302多次跳转上（每次可能几十毫秒）；

请大量使用 CSS Sprites：这样做可以大大地减少CSS背景图片的HTTP请求次数；

首屏使用jquery的LazyLoad避免加载不需要展示的较大尺寸图片 ；

避免404错误：请求一个外联 js 失败时获得的404错误，不但会堵塞并行的下载，而且浏览器会尝试分析404响应的内容，来辨识它是否是有用的Javascript代码；
减少 cookies 的大小：尽量减少 cookies 的体积对减少用户获得响应的时间十分重要；

去除不必要的 cookie ，尽量减少 cookie 的大小；

设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie，从而减少响应时间。

使用无 cookies 的域，当浏览其请求一个静态图片并一同发送 cookie 时，服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies，所以需要把你的静态资源放在另一个子域名下。

如 果你的域名是 www.example.org，你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org，那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下，你可以用一个全新的没有 cookie 的域名来放置你的静态资源

避免使用 javascript 来定位布局，避免多次渲染dom，提升加载速度

如 果真的需要把外联js和css放在head里，那也需要从下面这种排序:外联js ->外联css->外联js,统一为：外联css->外联js->外联js,不要script和css交替混编。保守做法 是，js 和 css 不要在 head 里交替混编，统一为先外联css再外联js！原因：资源是否下载依赖 JS 执行结果——JS 有可能会修改 DOM。典型的，可能会有 document.write。这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。 但只有万不得已时，才会在 head 里放外联js，否则请把外联js放置到</body>前。原因是张克军的《js和css的顺序关系》指出：只要 head 里出现外联js，无论如何放，css文件都不能和body里的请求并行。body 里 dom 渲染取决于 head 里的js执行完。外联js放在页面最后，高级浏览器会自动做优化（prefetch），你不用担心，它也可能会提前下载。

减 少 DOM Elements 的数量,对于典型的淘宝商品详情页，经测试发现，每增加一个 DOM 节点，会导致首屏渲染时间延迟约 0.5ms。2011年时，我们首页一个商品节点包含了21个DOM节点，充满了大量的em、strong、span。所以前端开发部门必须与产品部交互 设计人员积极沟通，而不仅仅是在她们提供的交互设计稿件上切图，必须在简化视觉元素和精简DOM节点上表达自己的意见。2012年，简化设计后，首页一个 商品节点包含13个节点。 

网页请求参数expires和last-modified概念
1）Expires
给出的日期/时间后，被响应认为是过时。如Expires: Thu, 02 Apr 2009 05:14:08 GMT
需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端. 当缓存中数据失效或过期，才决定从服务器更新数据。
2）Last-Modified和Expires
Last- Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标 识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP 请求出去，所以，Last-Modified还是要用的，而 且要和Expires一起用。