web前端优化之常规优化(1)

　页面打开速度(Fully Loaded)

　     1  网站首页(或列表页)之 First View ：打开速度应在 3秒+0.5秒 内;

　     2  对 Repeat View 时的各项指标暂不做要求;

　　首屏打开时间(Start Render)

　    1  网站首页(或列表页) 之 First View ：首屏渲染速度应在 1秒+0.5秒 内;

　　文档解析完毕时间(Document Complete)：

　     对此指标暂不做要求。

　　常规优化建议：

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

　　2   css 外联文件引用在 html 文档头部：位于 header 内;

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

　　      具体建议：

JS、CSS、CSS背景图片、CSSSprite图片分散在 s0～s2.haoyangshiimg.com 下;

业务类图片分散在 p0～p3.haoyangshi.com 下;

　　4   服务器端提供 html 文档和 http 静态资源时，尽可能开启 gzip 压缩;

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

jepg/png 等图片，能够选择不开启 gzip，由于可能服务器端图片无损压缩算法已经很强悍了，不须要依赖于 gzip;

　　5  在 js、css、image 等资源响应的 http headers 里，设置 expires、last-modified;
             nginx以下设置：        

location ~ .*\.(js|css)${
expires 30d;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp)${
expires 1M;
} 

    　6 尽可能减小 HTTP Requests 的数量;

　　        经过 combo handler 合并 js 和 css 的下载，参考 优化第三阶段;

　　       本阶段请尽可能减小外联 js/css 文件数，尽可能减小 ajax 调用;

　　7 js/css 的 minify：可统一经过 combo handler 作到压缩加合并;

　　8 减小没必要要的 301/302 跳转：别让页面打开时间浪费在302屡次跳转上(每次可能几十毫秒);

　　9 请大量使用 CSS Sprites：这样作能够大大地减小CSS背景图片的HTTP请求次数;

　　10 首屏不须要展现的较大尺寸图片，请使用 LazyLoad ;

　　11 避免404错误：请求一个外联 js 失败时得到的404错误，不但会堵塞并行的下载，并且浏览器会尝试分析404响应的内容，来辨识它是不是有用的Javascript代码;

　　12 减小 cookies 的大小：尽可能减小 cookies 的体积对减小用户得到响应的时间十分重要;

　     　去除没必要要的 cookie ;

　　    尽可能减小 cookie 的大小;

　　    留心将 cookie 设置在适当的域名下，避免影响到其余网站;

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

　　13 使用无 cookies 的域：

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

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

　　14 避免使用 javascript 来定位布局