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

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. 可进行单元测试
时间: 2024-09-29 05:50:02

大型网站--前端性能优化和规范的相关文章

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

【转】网站前端性能优化之javascript和css

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用 户来说

网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. http://hovertree.com/menu/webfront/ 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用

转:网站前端性能优化

继前面几篇文章后再来说说老生常谈的话题,怎么样提升前端性能.文中很多取材自网络及<High Performance Web Sites>,并根据自己工作中所接触到的知识整理而成. 1. 减少HTTP请求 终端用户响应时间80%消耗在前端,而大部分时间都是在下载页面的资源:图片,脚本,flash等等,减少请求资源简化页面设计成为了性能提升的关键.尽量合并CSS.JS及图片文件,减少HTTP请求. 2. 使用内容分发机制 使用内容分发如CDN加速,使用户从离自己最近的服务器下载文件.但一般要求减少

前端性能优化和规范

Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题.普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面.这里会涉及到很多可能发生的情况,举例几个最主要发生的情况: * 数据库连接超过最大限制,一般表现为程序的连接池满,拒绝了与数据库的连接. * 数据库死锁 * Web Server 超过最大连接数(一般在虚拟主机上才会限制) * 内存泄漏 * Http连接数太多,即访问量超过了机器和软件设计正常所能提供的服务 浏览器请求和响应的过程

大型网站架构-性能优化

性能调优 硬件优化 cpu  主频高.更多核CPU  http://product.pconline.com.cn/hot/server_cpu/   E3->i7处理器 内存  主频高.内存量大,ECC内存可以容错,奇偶校验,支持热拔插 磁盘  raid(磁盘阵列,数据同时保存到多块磁盘中速度提升,备份容错).ssd(新的技术,固态硬盘,不用磁头,读写速度很快,成本高一些) 网卡  100M网卡指的是数据流,单位比特bite,1Byte字节=8bite比特,100M/8=12.5M字节/s秒

转:网站前端性能优化总结

一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头 某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取.接着,客户端考察缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新. 各个容器都有针对的方案,,以 Apache 为例: Ex

网站前端性能优化总结【转】

一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头  某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期 (expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取.接着,客户端考察缓存 中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新. 各个容器都有针对的方案,,以 Apache 为例:

网站前端性能优化总结

一.服务器侧优化 1. 添加 Expires 或 Cache-Control 信息头  某些经常使用到.并且不会经常做改动的图片(banner.logo等等).静态文件(登录首页.说明文档等)可以设置较长的有效期(expiration date),这些HTTP头向客户端表明了文档的有效性和持久性.如果有缓存,文档就可以从缓存(除已经过期)而不是从服务器读取.接着,客户端考察缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新. 各个容器都有针对的方案,,以 Apache 为例: E