Web前端性能优化最佳实践
•Descargar como PPTX, PDF•
5 recomendaciones•1,704 vistas
理论指导实践，而实践并不一定与理论结果相符。 1、对于yahoo性能优化黄金法则来说，遇到内容组织千姿百怪的网站，又应该如何运用？ 2、能够显著改变网站性能的关键点是啥？ 3、除了法则，还有哪些办法找出网站性能的瓶颈？ 4、随意安排页面资源的加载顺序，效果如何？ 5、如何监测页面的性能指标（domload，winload，首屏时间...）？
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Web前端性能优化最佳实践
Similar a Web前端性能优化最佳实践 (20)
Web前端性能优化最佳实践
- 7. yahoo性能优化黄金法则35条 Minimize HTTP Requests Use a Content Delivery Network Add an Expires or a Cache-Control Header Gzip Components Put Stylesheets at the Top Put Scripts at the Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS Avoid Redirects Remove Duplicate Scripts Configure ETags Make Ajax Cacheable Flush the Buffer Early Use GET for AJAX Requests Post-load Components Preload Components Reduce the Number of DOM Elements Split Components Across Domains Minimize the Number of iframes No 404s Reduce Cookie Size Use Cookie-free Domains for Components Minimize DOM Access Develop Smart Event Handlers Choose <link> over @import Avoid Filters Optimize Images Optimize CSS Sprites Don't Scale Images in HTML Make favicon.ico Small and Cacheable Keep Components under 25K Pack Components into a Multipart Document Avoid Empty Image src http://developer.yahoo.com/performance/rules.html
- 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）
- 10. （1）Cache-Control Cache-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. Cache-directive 打开新窗口 原窗口Enter 刷新 单击 Back public 取缓存 取缓存 发请求 取缓存 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 Not Modified，表示没变动。
- 12. （2）Expires
- 15. 也可以通过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 。
- 18. 2、启用Gzip压缩：
- 21. 文件类型 压缩前 压缩后 减少了 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%
- 25. 常规优化： 1. 减少连接数：合并相同类别的图片，并且尽量减少图片中的留 白。如icon、静态表情等 2. 压缩图片：针对png图片，上线前使用工具压缩（如： PNGOUTWin） 3. 尽量减少滤镜的使用，针对IE6图片可使用PNG8替代PNG24。 特殊优化： 1. 按区域合并图片：对于同一区域（模块）的图片，改动可能性较 小，并且其他项目需要整体沿用的，可以将使用到的图片合并为 一张大图。如toolbar。 2. 按功能合并图片：如mini模态窗背景图。 3. 不能合并的图片：比如换肤时需要改变的图片，不能与其他图片 合并到一起。 效果： 合并图片共减少11个连接数，压缩图片30个，共减少15k
- 31. （2）FireFox
- 33. （3）Chrome
- 43. 监测发现，方案1（ css-inline-js-body-end ）首屏性能最佳， 方案3（ css-external-js-body-end ）次之。
- 47. 3、为了能让js资源尽快加载并且最后执行，可采取创建Image或者 Object的对象方式先下载，需要执行时再创建<script>标签添加到 页面。 JS 和 CSS 在页面中的位置，会影响其他资源的加载，原因如下： A、资源是否下载取决于JS的执行结果 如：document.write， JS可能会修改dom。在JS加载和执行完成前，后 续所有资源的下载有可能是没必要的。 B、JS 的执行依赖最新样式 如：var w = $(“#id”).width(), JS 代码在执行前，浏览器必须保证在此 JS 之前的所有CSS（无论外联还是内联）都已下载并解析完成。
- 48. C、最新浏览器存在prefetch 的优化 在现代浏览器中，如Chrome、FireFox，随着版本的提高， 对后续 JS 和 CSS 提前下载，而并不执行。
- 50. 1、IE
- 51. 2、FireFox
- 52. 3、Chrome
- 66. Q &A