网站性能优化

+44

No comments posted yet

Comments

birdking (3 years ago)

good

birdking (3 years ago)

good

Slide 1

Web Performance Optimization 网站性能优化 !

Slide 2

About me 网络电视事业部 开发工程师 changyou52@gmail.com t.sina.com.cn/changyou52 常优 / 大优

Slide 3

Web Performance 网站性能 ! 什么是网站性能 为什么要做性能优化 谁去做 怎么做 一点实践

Slide 4

Amazon: 慢 0.1s = 1% 的用户放弃交易 Yahoo! : 慢 0.4s = 5-9% 的用户放弃访问 [ EXP .1 ] Google : 慢 0.5s = 20% 的用户放弃访问

Slide 5

10s 0.1~1s 自由浏览 <0.1 s 立即发生 1~5s 浏览有阻碍 5~8s 损失50% 10s 损失99% 8s 5s 1s 0.1s 时间 用户体验 [ EXP .2 ]

Slide 6

什么是网站性能? What 页面快速 系统伸缩自如 服务稳定可靠

Slide 7

为什么做 网 站性能优化? The page is : an application with a data connection to a server Why ….

Slide 8

谁去做? Who 前端工程师 ? or 运维工程师 ?

Slide 9

分析 & 评估 Analysis

Slide 10

http://www.cntv.cn/index.shtml 下载HTML文档时间 4% …………………………….…….. no cache

Slide 11

下载HTML文档时间 http://www.cntv.cn/index.shtml cache 20%

Slide 12

>70% 结论 Conclusion 前端性能

Slide 13

怎么做? 减少HTTP请求! How

Slide 14

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 RTT ( Round-Trip Time ) 服务器 HTTP 请求 过程 客户端 客户端 读取cache 处理数据 渲染元素

Slide 15

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 读取本地缓存数据

Slide 16

查询DNS 预处理 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 浏览器DNS 系统DNS DNS服务器

Slide 17

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache TCP/IP连接 CDN

Slide 18

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 发送header信息

Slide 19

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 服务器负载 数据库查询 服务端缓存

Slide 20

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 受带宽影响 JS,CSS,HTML 做gzip压缩 删除js,css文件的注释 删除无效的css 缓存改动不大的文件 缓存favicon.ico文件 精简HTML 减少DOM元素 优化img文件 文件大小

Slide 21

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 响应304请求 Cache-Control cache-control: max-age=31536000 cache-control: private cache-control: no-cache Expires expires: Sat, 04 Dec 2010 01:00:43 GMT

Slide 22

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache 不要对img进行Gzip压缩

Slide 23

预处理 查询DNS 建立链接 发送请求 等待响应 返回数据 处理数据 渲染元素 读取cache HTML 减少DOM IMG注明:width,height CSS CSS放在顶部 避免@import 避免使用低效选择符CSS JavaScript script放在head内? JavaScript放在底部 算法,循环 解析HTML,样式计算,布局,DOM操作,JS解析

Slide 24

怎么做? 减少HTTP请求! CSS,JS进行合并 Ajax GET代替POST CSS图片地图 缓存 How

Slide 25

Google page speed Yahoo! Yslow Microsoft Fiddler2 Google speed tracer Reference Tools Fire bug

Slide 26

一些实践 Practice

Slide 27

http://bugu.cntv.cn 2010.2 cache no cache Time : 7.671 Time : 2.089

Slide 28

http://bugu.cntv.cn 首页284.9K,整个网页902.3K 17个JS文件, 74K 5个Iframe,25K

Slide 29

http://bugu.cntv.cn

Slide 30

http://bugu.cntv.cn 冷静! 发现问题 解决问题 改进 反馈 问题 执行力 进化到下一阶段 任何一个好的产品都不是被设计出来的!

Slide 31

http://bugu.cntv.cn 1. 精简 HTML & Javascript HTML 去掉注释,回车符,以及无效字节可节省 65K ( 28%) JavaScript 利用 JSMin / YUI Compressor 工具 (每个JS文件可降低26%文件大小)

Slide 32

http://bugu.cntv.cn 2. 合并 JavaScript & CSS http://bugu.cntv.cn/jsca/js/pwin.js http://bugu.cntv.cn/jsca/js/template.js http://bugu.cntv.cn/library/column/2010/09/20/C28048/script/asian.js http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/flash/js_flash_gateway.js http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/js/changelights.js http://bugu.cntv.cn/nettv/Library/ibugu/js/calendar.js http://bugu.cntv.cn/nettv/Library/ibugu/js/changelights.js http://bugu.cntv.cn/nettv/Library/ibugu/js/jquery-1.3.2.min.js http://bugu.cntv.cn/nettv/Library/ibugu/js/lightbox.js http://bugu.cntv.cn/nettv/Library/ibugu/js/tagchange_new.js http://bugu.cntv.cn/nettv/Library/ibugu/js/change_flash.js http://js.bmgad.com/bmgad_wpu_cc.js http://js.bmgad.com/bmgad_wpu_show_check.js http://js.bmgad.com/bmgad_wpu_show_cntv.js http://a.cntv.cn/bnnr/alysxc.js http://a.cntv.cn/main/s?user=cntv|bugu|shouye_fubiao&db=cntv&border=0&local=yes&js=ie http://bugu.cntv.cn/jsca/css/style_controlbar.css http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/common.css http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/headfoot.css http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/index.css JavaScript CSS

Slide 33

http://bugu.cntv.cn ( http://code.google.com/p/minify/ ) Minify <script type="text/javascript”src="http://bugu.cntv.cn/nettv/Library/ibugu/js/jquery-1.3.2.min.js”></script> <script type="text/javascript”src="http://bugu.cntv.cn/nettv/Library/ibugu/js/lightbox.js”></script> <script type="text/javascript”src="http://bugu.cntv.cn/nettv/Library/ibugu/js/tagchange_new.js”</script> <script type="text/javascript”src="http://bugu.cntv.cn/nettv/Library/ibugu/js/change_flash.js”></script> <script type="text/javascript”src="http://bugu.cntv.cn/min/f= nettv/Library/ibugu/js/jquery-1.3.2.min.js , nettv/Library/ibugu/js/lightbox.js , nettv/Library/ibugu/js/tagchange_new.js , nettv/Library/ibugu/js/change_flash.js ”>script> Copy min文件夹 到 网站目录下,配置 min/config.php Apache配置 mod_Rewrite 或者使用g参数(需配置min/groupsConfig.php) Done!

Slide 34

<td width="13%" align="center"> <img width="16" height="15" src="/nettv/ibugu/Library/ibugu/C10003000015/images/icon_tv2.jpg"/> </td> 28X28 http://bugu.cntv.cn 3. CSS sprites .no3 { background : transparent url( ../images/no713.jpg ); background-position : 0 -30px; width : 15px; height : 15px; }

Slide 35

http://bugu.cntv.cn http://www.google.com/ 写入img: 第一时间显示logo图和背景,避免空白和无背景 <body onload=“if(document.images)new Image().src='/images/nav_logo8.png”> 在img标签中指定尺寸: 提升浏览器渲染效率 <h1><a title="Go to Google Home" href="http://www.google.com/webhp?hl=en" id="logo"> Google<img width="164" height="106" alt="" src="/images/nav_logo.png" /></a></h1> 预处理

Slide 36

http://bugu.cntv.cn 4. JavaScript放到底部 , CSS放到顶部 CSS放到header中:避免白屏 Javascript放置底部:避免阻塞下载 JS ,CSS 写在html内?还是外部link?

Slide 37

http://bugu.cntv.cn 5. 减少DNS查询 bugu.cntv.cn a.cntv.cn cntv.wrating.com js.bmgad.com p1.img.cctvpic.com p2.img.cctvpic.com p4.img.cctvpic.com www.cctv.com www.bmgad.net p3.img.cctvpic.com <iframe width=“685”scrolling=“no”height=“90” src=“http://a.cntv.cn/main/s?user=cntv|bugu|shouye_changtong01&amp;db=cntv&amp;border=0&amp;local=yes”marginwidth=“0” marginheight="0"></iframe> 广告与页面分离 增加并行下载数 提升整站下载时间

Slide 38

http://bugu.cntv.cn http://bugu.cntv.cn/index.shtml (88% reduction). http://bugu.cntv.cn/jsca/templates/pwin_toolbar_banner.html (45% reduction) http://bugu.cntv.cn/jsca/templates/pwin_toolbar_text_unlogin.html (36% reduction) 压缩html文件,js文件,css文件。可减少文件大小至少60% 6. Gzip压缩组件

Slide 39

http://bugu.cntv.cn 7. 添加Expires头 14 个JS,CSS 静态文件缓存时间很短。Cache-Control:max-age=1800 http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/index.css http://bugu.cntv.cn/jsca/css/style_controlbar.css http://bugu.cntv.cn/nettv/Library/ibugu/js/jquery-1.3.2.min.js http://bugu.cntv.cn/nettv/Library/ibugu/js/tagchange_new.js http://bugu.cntv.cn/nettv/Library/ibugu/js/changelights.js http://bugu.cntv.cn/nettv/Library/ibugu/js/calendar.js http://bugu.cntv.cn/nettv/Library/ibugu/js/lightbox.js http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/flash/js_flash_gateway.js http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/js/changelights.js http://bugu.cntv.cn/library/column/2010/09/20/C28048/script/asian.js http://bugu.cntv.cn/jsca/js/template.js http://bugu.cntv.cn/jsca/js/pwin.js http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/headfoot.css http://bugu.cntv.cn/nettv/Library/ibugu/ibugu_new/css/common.css 修订文件名,将版本号加入其中,并设置长久的Expires 淘宝: http://a.tbcdn.cn/s/kissy/1.1.3/kissy-min/v8-min.js?t=20101125.js

Slide 40

http://bugu.cntv.cn 平均载入时间为 9.1 秒,比 85% 的网站慢

Slide 41

Thanks Q & A

Summary: http://www.auu.name

Tags: web

URL:
More by this User
Most Viewed
Previous Page Next Page
redis
redis
NOSQL
NOSQL
 
 
Previous Page Next Page