Web前端性能优化最佳实践陈芳洁2012年8月31日
你知道网站慢的原因么?1、服务器2、客户端
1、减少服务器的响应时间只有10%~20%的最终用户响应时间是花费在从Web 服务器获取HTML 文档并传送到浏览器中的。我们能做什么?
80%~90%的最终用户响应时间是花费在下载页面的CSS、JS、Image以及其他资源中。2、减少客户端的响应时间
(2)如果对前端进行性能优化,效率提升50%,则会使最终页面响应时间减少40%~45%(1)如果对后台业务逻辑进行优化,效率提高了50%,但最终的页面响应时间只减少了5%~10%另外,前端的性能优化一般比业务逻辑的优化更加容易。3、减少最终用户...
二、前端性能优化方法 yahoo性能优化黄金法则 合理安排资源的加载顺序
yahoo性能优化黄金法则35条Minimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip Componen...
性能提升最显著的法则:1、给资源添加周期头(Add an Expires or a Cache-Control Header)2、对资源启用gzip压缩(Gzip Components)3、减少页面的HTTP请求( Minimize HT...
1、给资源添加周期头(1)Cache-Control控制缓存的失效日期(2)Expires控制缓存的失效日期,优先级比Cache-Control低(3)Etag和If-None-Match验证网页的有效性(4)Last-Modified和If-...
(1)Cache-ControlCache-Control:cache-directive,常用 cache-directive 值如下:Cache-directive 说明public 所有内容都将被缓存private 内容只缓存到私有缓存中...
Cache-directive 打开新窗口 原窗口Enter 刷新 单击 Backpublic 取缓存 取缓存 发请求 取缓存private 发请求首次,发请求此后,取缓存发请求 取缓存no-cache/no-store 发请求 发请求 发请求...
(2)Expires
也可以通过http的meta设置expires和cache-control<meta http-equiv="Cache-Control" content="max-age=7200" /><meta http-equiv="Expires" ...
第一次请求:响应头Etag第二次请求(F5刷新):请求头If-None-Match(3)Etag与If-None-Match
第一次请求:响应头Last-Modified第二次请求(F5刷新):请求头If-Modified-Since(4)Last-Modified与If-Modified-Since
2、启用Gzip压缩:
文件类型 压缩前 压缩后 减少了html 113kb 23kb 80%css 206kb 54kb 74%js 764kb 260kb 64%image 131kb 131kb 没变微博首页资源启用Gzip压缩后的情况如下:注意:除了text/...
3、减少页面的HTTP请求你了解浏览器发起的HTTP请求么?
浏览器发起的HTTP请求,有如下阶段:(1)阻塞受浏览器限制的最大并发连接数影响(2)域名解析(3)建立连接(4)发送请求(5)等待响应(6)接收数据
为了能让用户尽快看到页面的目的,节省各个HTTP请求阻塞、域名解析、建立连接、发送请求、等待响应这5步所消耗的时间,需要对资源进行合并,减少HTTP请求,或者延迟发起请求。方法如下:(1)合并JS(2)减少Ajax请求(3)合并背景图片原则:尽...
常规优化:1. 减少连接数:合并相同类别的图片,并且尽量减少图片中的留白。如icon、静态表情等2. 压缩图片:针对png图片,上线前使用工具压缩(如:PNGOUTWin)3. 尽量减少滤镜的使用,针对IE6图片可使用PNG8替代PNG24。特...
(4)预加载:为了更有效地减少首页资源的请求时间,可以在前一页面预先加载资源(js,css,图片),js和css只加载不执行。比如:在登录页面加载首页主要的css和js,登录成功之后跳转到首页,首页可以直接利用缓存中的css和js,而不需要额外...
尽管我们使用了种种办法减少浏览器发起的HTTP请求数,在无法再减少请求的时候,我们又该如何让浏览器更好的为我们服务?
了解常用的浏览器连接数情况(1)IE
同一域名,IE6、IE7发起的20个图片请求情况:http://stevesouders.com/cuzillion/
同一域名,IE8、IE9发起的20个图片请求情况:http://stevesouders.com/cuzillion/
(2)FireFox
同一域名,FireFox 12 发起的20个图片请求情况:http://stevesouders.com/cuzillion/
(3)Chrome
同一域名,Chrome 17 发起的20个图片请求情况:http://stevesouders.com/cuzillion/
在资源个数无法再减少的情况下,我们对资源所属的域名进行划分,以便达到最佳的性能。如并发连接数最少(仅为2个)的IE6,通过合理的域名安排,就能达到如下的效果:http://stevesouders.com/cuzillion/注意:一个页面的域...
4、使用CDN部署静态资源使用CDN,部署静态资源(js,css,图片,flash等),用户能够就近获取资源,大大加快页面显示的速度。
 合理安排资源的加载顺序你希望网页最先满足你的什么需求?
(1)页面尽快可用 (2)页面尽快展示我希望……
我们需要做的事情有哪些?(1)找出影响用户体验的因素(2)根据因素确定改进方案并实施
令人费解的浏览器时间线的空白(1)找出影响用户体验的因素
空白A:浏览器正在下载CSS并渲染页面空白B:浏览器正在下载JS并执行在处理CSS、JS的过程中,所有后续的资源一律停止下载。
内联样式加载并执行jshtmlheadbody内联样式预加载js执行jshtmlheadbody外联样式表加载并执行jshtmlheadbody外联样式预加载js执行jshtmlheadbody方案1css-inline-js-body-end...
监测发现,方案1( css-inline-js-body-end )首屏性能最佳,方案3( css-external-js-body-end )次之。
对于微博首页来说,为了能让用户最快看到页面,我们把处理页面交互的js搬到了最后。
在解决问题的过程中,我们发现:1、<head>标签部分内联js位于外联css的后面,会导致外联css阻塞其他所有资源(包括js资源)的下载。
2、js在执行的过程中,浏览器会停止一切的下载以及渲染。执行之前未下载完的资源除外。
3、为了能让js资源尽快加载并且最后执行,可采取创建Image或者Object的对象方式先下载,需要执行时再创建<script>标签添加到页面。JS 和 CSS 在页面中的位置,会影响其他资源的加载,原因如下:A、资源是否下载取决于JS的执行结...
C、最新浏览器存在prefetch 的优化在现代浏览器中,如Chrome、FireFox,随着版本的提高,对后续 JS 和 CSS 提前下载,而并不执行。
三、浏览器的差异1、IE2、FireFox3、Chrome
1、IE
2、FireFox
3、Chrome
四、性能监测方法1、性能指标2、监测方法
1、性能指标(1)首屏(2)domload(3)winload
(1)首屏IE浏览器显示第一屏主页面的消耗时间。首屏的定义以800X600像素尺寸为标准。从开始监测开始计时,到IE浏览器页面显示高度达到600像素且此区域有内容显示之后的时间。
(2)domloaddomload事件发生在dom加载完毕A、DOMContentLoaded针对非IE浏览器来说,页面(document)发生DOMContentLoaded事件的时间B、onreadystatechangeIE系统浏览器,页...
(3)winload页面资源下载完毕之后会触发A、onload针对非IE浏览器来说,页面(document)发生onload事件的时间B、loadIE系统浏览器,页面(document)发生load事件的时间。
2、监测方法(1)常用的开发者工具(2)浏览器内置对象——performance(3)第三方监测工具
(1)常用的开发者工具A、IEHttpWatch,IE8以上版本可以按F12调出浏览器附带的开发者工具B、FireFox安装FireFox插件FirebugC、Chrome按F12调出浏览器附带的开发者工具D、 webpagetest.org可...
(2)浏览器内置对象——performancehttp://www.w3.org/TR/navigation-timing/
(3)第三方监测工具A、博睿B、基调
需要进行长期监测任务时,可采用浏览器内置对象(performance),以及第三方工具进行。
Q &A
优化是一项长期的艰巨的任务谢谢!
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Web前端性能优化最佳实践
Upcoming SlideShare
Loading in …5
×

Web前端性能优化最佳实践

1,553 views

Published on

理论指导实践,而实践并不一定与理论结果相符。
1、对于yahoo性能优化黄金法则来说,遇到内容组织千姿百怪的网站,又应该如何运用?
2、能够显著改变网站性能的关键点是啥?
3、除了法则,还有哪些办法找出网站性能的瓶颈?
4、随意安排页面资源的加载顺序,效果如何?
5、如何监测页面的性能指标(domload,winload,首屏时间...)?

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,553
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web前端性能优化最佳实践

  1. 1. Web前端性能优化最佳实践陈芳洁2012年8月31日
  2. 2. 你知道网站慢的原因么?1、服务器2、客户端
  3. 3. 1、减少服务器的响应时间只有10%~20%的最终用户响应时间是花费在从Web 服务器获取HTML 文档并传送到浏览器中的。我们能做什么?
  4. 4. 80%~90%的最终用户响应时间是花费在下载页面的CSS、JS、Image以及其他资源中。2、减少客户端的响应时间
  5. 5. (2)如果对前端进行性能优化,效率提升50%,则会使最终页面响应时间减少40%~45%(1)如果对后台业务逻辑进行优化,效率提高了50%,但最终的页面响应时间只减少了5%~10%另外,前端的性能优化一般比业务逻辑的优化更加容易。3、减少最终用户响应时间的最佳方式
  6. 6. 二、前端性能优化方法 yahoo性能优化黄金法则 合理安排资源的加载顺序
  7. 7. yahoo性能优化黄金法则35条Minimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut Stylesheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSSAvoid RedirectsRemove Duplicate ScriptsConfigure ETagsMake Ajax CacheableFlush the Buffer EarlyUse GET for AJAX RequestsPost-load ComponentsPreload ComponentsReduce the Number of DOM ElementsSplit Components Across DomainsMinimize the Number of iframesNo 404sReduce Cookie SizeUse Cookie-free Domains for ComponentsMinimize DOM AccessDevelop Smart Event HandlersChoose <link> over @importAvoid FiltersOptimize ImagesOptimize CSS SpritesDont Scale Images in HTMLMake favicon.ico Small and CacheableKeep Components under 25KPack Components into a Multipart DocumentAvoid Empty Image srchttp://developer.yahoo.com/performance/rules.html
  8. 8. 性能提升最显著的法则:1、给资源添加周期头(Add an Expires or a Cache-Control Header)2、对资源启用gzip压缩(Gzip Components)3、减少页面的HTTP请求( Minimize HTTP Requests )4、使用CDN部署静态资源(Use a Content Delivery Network)
  9. 9. 1、给资源添加周期头(1)Cache-Control控制缓存的失效日期(2)Expires控制缓存的失效日期,优先级比Cache-Control低(3)Etag和If-None-Match验证网页的有效性(4)Last-Modified和If-Modified-Since验证网页的有效性
  10. 10. (1)Cache-ControlCache-Control:cache-directive,常用 cache-directive 值如下:Cache-directive 说明public 所有内容都将被缓存private 内容只缓存到私有缓存中no-cache 所有内容都不会被缓存no-store所有内容都不会被缓存到缓存或Internet 临时文件中must-revalidation/proxy-revalidation如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证max-age=n (n is numeric)缓存的内容将在 n 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高
  11. 11. Cache-directive 打开新窗口 原窗口Enter 刷新 单击 Backpublic 取缓存 取缓存 发请求 取缓存private 发请求首次,发请求此后,取缓存发请求 取缓存no-cache/no-store 发请求 发请求 发请求 发请求must-revalidation/proxy-revalidation发请求首次,发请求此后,取缓存发请求 取缓存max-age=n (n is numeric) n 秒后,发请求 n 秒后,发请求 发请求 n 秒后,发请求对 cache-directive 值的浏览器响应如下:注:当点击浏览器上的刷新,客户端发送的请求中均是max-age=0,表示validate操作,发送请求到服务器要求检查cache,再更新cache,一般得到的是304 NotModified,表示没变动。
  12. 12. (2)Expires
  13. 13. 也可以通过http的meta设置expires和cache-control<meta http-equiv="Cache-Control" content="max-age=7200" /><meta http-equiv="Expires" content=" Tue, 22 May 2012 19:07:22 GMT "/>http1.0协议没有实现Cache-Control,而使用Pragma,如:<meta http-equiv=“Pragma” content=“no-cache” />注意访问某一静态资源时,使用时间戳作为参数,导致无法使用浏览器的缓存,如:http://t.sohu.com/t/swf/swfupload-43.swf?t=1338341597975。
  14. 14. 第一次请求:响应头Etag第二次请求(F5刷新):请求头If-None-Match(3)Etag与If-None-Match
  15. 15. 第一次请求:响应头Last-Modified第二次请求(F5刷新):请求头If-Modified-Since(4)Last-Modified与If-Modified-Since
  16. 16. 2、启用Gzip压缩:
  17. 17. 文件类型 压缩前 压缩后 减少了html 113kb 23kb 80%css 206kb 54kb 74%js 764kb 260kb 64%image 131kb 131kb 没变微博首页资源启用Gzip压缩后的情况如下:注意:除了text/html 、text/plain 、text/xml 、text/css、application/x-javascript,其他资源都不能启用Gzip压缩,特别是图片。用于测试的html页面未压缩前为:122KB,经过IE、FireFox、Chrome压缩后均为20.5KB,缩小了84%
  18. 18. 3、减少页面的HTTP请求你了解浏览器发起的HTTP请求么?
  19. 19. 浏览器发起的HTTP请求,有如下阶段:(1)阻塞受浏览器限制的最大并发连接数影响(2)域名解析(3)建立连接(4)发送请求(5)等待响应(6)接收数据
  20. 20. 为了能让用户尽快看到页面的目的,节省各个HTTP请求阻塞、域名解析、建立连接、发送请求、等待响应这5步所消耗的时间,需要对资源进行合并,减少HTTP请求,或者延迟发起请求。方法如下:(1)合并JS(2)减少Ajax请求(3)合并背景图片原则:尽量减少图片的使用,对圆角阴影等效果用css3降级处理。
  21. 21. 常规优化:1. 减少连接数:合并相同类别的图片,并且尽量减少图片中的留白。如icon、静态表情等2. 压缩图片:针对png图片,上线前使用工具压缩(如:PNGOUTWin)3. 尽量减少滤镜的使用,针对IE6图片可使用PNG8替代PNG24。特殊优化:1. 按区域合并图片:对于同一区域(模块)的图片,改动可能性较小,并且其他项目需要整体沿用的,可以将使用到的图片合并为一张大图。如toolbar。2. 按功能合并图片:如mini模态窗背景图。3. 不能合并的图片:比如换肤时需要改变的图片,不能与其他图片合并到一起。效果:合并图片共减少11个连接数,压缩图片30个,共减少15k
  22. 22. (4)预加载:为了更有效地减少首页资源的请求时间,可以在前一页面预先加载资源(js,css,图片),js和css只加载不执行。比如:在登录页面加载首页主要的css和js,登录成功之后跳转到首页,首页可以直接利用缓存中的css和js,而不需要额外的请求。
  23. 23. 尽管我们使用了种种办法减少浏览器发起的HTTP请求数,在无法再减少请求的时候,我们又该如何让浏览器更好的为我们服务?
  24. 24. 了解常用的浏览器连接数情况(1)IE
  25. 25. 同一域名,IE6、IE7发起的20个图片请求情况:http://stevesouders.com/cuzillion/
  26. 26. 同一域名,IE8、IE9发起的20个图片请求情况:http://stevesouders.com/cuzillion/
  27. 27. (2)FireFox
  28. 28. 同一域名,FireFox 12 发起的20个图片请求情况:http://stevesouders.com/cuzillion/
  29. 29. (3)Chrome
  30. 30. 同一域名,Chrome 17 发起的20个图片请求情况:http://stevesouders.com/cuzillion/
  31. 31. 在资源个数无法再减少的情况下,我们对资源所属的域名进行划分,以便达到最佳的性能。如并发连接数最少(仅为2个)的IE6,通过合理的域名安排,就能达到如下的效果:http://stevesouders.com/cuzillion/注意:一个页面的域名数量控制在2个到4个之间,以免引起由于DNS查找带来的性能影响。
  32. 32. 4、使用CDN部署静态资源使用CDN,部署静态资源(js,css,图片,flash等),用户能够就近获取资源,大大加快页面显示的速度。
  33. 33.  合理安排资源的加载顺序你希望网页最先满足你的什么需求?
  34. 34. (1)页面尽快可用 (2)页面尽快展示我希望……
  35. 35. 我们需要做的事情有哪些?(1)找出影响用户体验的因素(2)根据因素确定改进方案并实施
  36. 36. 令人费解的浏览器时间线的空白(1)找出影响用户体验的因素
  37. 37. 空白A:浏览器正在下载CSS并渲染页面空白B:浏览器正在下载JS并执行在处理CSS、JS的过程中,所有后续的资源一律停止下载。
  38. 38. 内联样式加载并执行jshtmlheadbody内联样式预加载js执行jshtmlheadbody外联样式表加载并执行jshtmlheadbody外联样式预加载js执行jshtmlheadbody方案1css-inline-js-body-end方案2css-inline-js-preload方案3css-external-js-body-end方案4css-external-js-preload猜猜看,哪种方案可以让我们更快看到页面?(2)根据因素确定改进方案并实施
  39. 39. 监测发现,方案1( css-inline-js-body-end )首屏性能最佳,方案3( css-external-js-body-end )次之。
  40. 40. 对于微博首页来说,为了能让用户最快看到页面,我们把处理页面交互的js搬到了最后。
  41. 41. 在解决问题的过程中,我们发现:1、<head>标签部分内联js位于外联css的后面,会导致外联css阻塞其他所有资源(包括js资源)的下载。
  42. 42. 2、js在执行的过程中,浏览器会停止一切的下载以及渲染。执行之前未下载完的资源除外。
  43. 43. 3、为了能让js资源尽快加载并且最后执行,可采取创建Image或者Object的对象方式先下载,需要执行时再创建<script>标签添加到页面。JS 和 CSS 在页面中的位置,会影响其他资源的加载,原因如下:A、资源是否下载取决于JS的执行结果如:document.write, JS可能会修改dom。在JS加载和执行完成前,后续所有资源的下载有可能是没必要的。B、JS 的执行依赖最新样式如:var w = $(“#id”).width(), JS 代码在执行前,浏览器必须保证在此 JS之前的所有CSS(无论外联还是内联)都已下载并解析完成。
  44. 44. C、最新浏览器存在prefetch 的优化在现代浏览器中,如Chrome、FireFox,随着版本的提高,对后续 JS 和 CSS 提前下载,而并不执行。
  45. 45. 三、浏览器的差异1、IE2、FireFox3、Chrome
  46. 46. 1、IE
  47. 47. 2、FireFox
  48. 48. 3、Chrome
  49. 49. 四、性能监测方法1、性能指标2、监测方法
  50. 50. 1、性能指标(1)首屏(2)domload(3)winload
  51. 51. (1)首屏IE浏览器显示第一屏主页面的消耗时间。首屏的定义以800X600像素尺寸为标准。从开始监测开始计时,到IE浏览器页面显示高度达到600像素且此区域有内容显示之后的时间。
  52. 52. (2)domloaddomload事件发生在dom加载完毕A、DOMContentLoaded针对非IE浏览器来说,页面(document)发生DOMContentLoaded事件的时间B、onreadystatechangeIE系统浏览器,页面(document)发生onreadystatechange事件,并且监测document.readyState 的值为“complete”的时间。
  53. 53. (3)winload页面资源下载完毕之后会触发A、onload针对非IE浏览器来说,页面(document)发生onload事件的时间B、loadIE系统浏览器,页面(document)发生load事件的时间。
  54. 54. 2、监测方法(1)常用的开发者工具(2)浏览器内置对象——performance(3)第三方监测工具
  55. 55. (1)常用的开发者工具A、IEHttpWatch,IE8以上版本可以按F12调出浏览器附带的开发者工具B、FireFox安装FireFox插件FirebugC、Chrome按F12调出浏览器附带的开发者工具D、 webpagetest.org可从世界各地观察网站浏览的情况,包括资源下载瀑布图以及捕捉的视频
  56. 56. (2)浏览器内置对象——performancehttp://www.w3.org/TR/navigation-timing/
  57. 57. (3)第三方监测工具A、博睿B、基调
  58. 58. 需要进行长期监测任务时,可采用浏览器内置对象(performance),以及第三方工具进行。
  59. 59. Q &A
  60. 60. 优化是一项长期的艰巨的任务谢谢!

×