大型网站--前端性能优化和规范

 Web性能涉及的范围太广，但通常web开发者在程序上线之后不少都曾遇到过性能的问题。广泛表现为页面速度开始急剧变慢，正常访问时间变的很长，或则干脆给你抛出异常错误页面。这里会涉及到不少可能发生的状况，举例几个最主要发生的状况：

 * 数据库链接超过最大限制，通常表现为程序的链接池满，拒绝了与数据库的链接。

 * 数据库死锁

 * Web Server 超过最大链接数（通常在虚拟主机上才会限制）

 * 内存泄漏

 * Http链接数太多，即访问量超过了机器和软件设计正常所能提供的服务 

 

而今天分享的主要是比较偏向前端

浏览器请求和响应的过程

 

第一步、浏览器预处理

查询Cache：读取Cache 或者发送304请求

第二步、查询DNS

优化规则--减小DNS查找

DNS缓存

浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL）

使用Keep-Alive特性 
减小DNS查找

当客户端的DNS缓存为空时，DNS查找的数量与Web页面中惟一主机名的数量相等。减小惟一主机名的数量就能够减小DNS查找的数量。

较少的域名来减小DNS查找（2-4个主机）

第三步、创建链接

优化规则-- 使用内容分发网络

美国十大Internet网站和CDN服务提供商

页面静态化,取决于发布系统

Ctrip使用的China-Cache和网宿

优化规则--用域名划分页面内容 

按页面内容划分域名，在合适的资源服务器上存放文件

第四步、发送请求

优化规则-- 减小HTTP请求

 HTTP请求30-40,合并文件,图片地图,内联图像

a)js文件（不超过7个）

1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js)

2.数据文件js（1-2个）

3.频道公用js(1个）和页面私有js（1-2个）

不含ga.js、uiscript.asp和外链其余网站的js

b) css文件不超过4个，各频道首页和全站首页不超过3个。

 

c) 目前没法解决的是allyes广告的请求数。

•

• 大量的广告和产品图片可能会形成，图片请求数很大，可能形成总请求数指标吃紧，

    这个只能从设计上搞定，须要权衡

• 目前老页面可能css和js文件请求数可能会超标

 

优化规则- – 优化CSS Spirite

  图片地图   Ctrip首页例子 

优化规则– 避免404错误

避免内部无效的连接

 

规则优化 –不要使用frameset，少使用iframe

搜索引擎不友好、 

即时内容为空，加载也须要时间、会阻止页面加载

禁止使用iframe引入外部资源，不包括allyes广告，不包括about:blank的空页面。

 

第五步、等待响应

优化规则 --避免重定向

在重定向完毕而且HTML下载完毕以前，是没有任何东西显示给用户的

涉及服务器负载、数据查询、服务器端缓存等

 

第七步、接收数据

优化规则 -- 压缩组件

HTML文档、脚本和样式表、XML和JSON的文本响应 压缩如何工做
压缩一般能将响应的数据量减小将近70%

优化规则 -- 精简Javascript和Css

从代码中移除没必要要的字符以减小其大小，减小加载时间。

规则规则– 尽可能缩减页面大小

页面必须小于150K(不含图片）
a) 静态文件是否gzip
b) 图片是否压缩优化过

第八步、读取Cache

优化规则-- 添加Expire或Cache-Control

应用于不常常变化的组件，包括脚本、样式表、Flash组件、图片
Expires和Cache-Control

规则规则 -- 使用外部的Js和Css文件

尽量使用外部Js和Css，由于咱们目前大部分Js和Css都作了Gzip和缓存技术，能够充分利用。

第九步、处理元素

不要对image和pdf等二进制文件进行gzip压缩

 第十步、渲染元素

优化规则 -- 将样式表放在顶部

 界面原型页面必须将样式表置于页面顶部，开发人员如无特殊缘由也必须将样式表置于顶部。 

以往多数是由于masterpage缘由没法将全部样式表置顶，在改版修改masterpage时，尽量按照此原则进行设计。 

优化规则 – 建议将脚本放在底部

 通常浏览器能够容许并行下载，取决于主机个数、带宽等

（默认状况下，IE是2个而FF是8个）

下载脚本时并行下载其实是被禁用的。
 

优化规则-- 移除重复脚本

 必须为0 

优化规则 -- 避免CSS表达式

影响浏览器渲染时间

优化规则 – 优化图像

尽可能使用GIF和PNG

尽可能使用png/gif格式的图片，png的图片优先，可是必须注意如要兼容IE6，则png使用必定要注意透明问题。

图片在上次前必定要先用工具压缩优化（png、jpg）

 Javascript开发规范

大型的项目在前端 JS 方面有几个须要达成的目标： 

1. 代码逻辑分层
2. 避免全局变量
3. 便于多人协做开发
4. 各部分代码模块化，能够按需加载
5. 保持全局变量的清洁
6. 可进行单元测试

 推荐书籍

 

Steve Souders (Yahoo!   Chief Performance)

Greyhound 灵缇犬 (世界上跑的最快的狗)

转帖注明：http://www.cnblogs.com/and/p/3390676.html