构建高性能的Web页面.pptxVIP

构建高性能的网站课程组：小马 玉伯 小凡版本：第一版2010年Google 的例子Google 的例子Google 的例子预加载用户行为分析迟钝的WebWeb已经成为我们的日常工具好的用户体验 (快 稳 准)我不能容忍慢（因为我有其他的选择）慢 500 ms = 20% 将放弃访问 (Google)慢 100 ms = 1% 将放弃交易 (Amazon)前端性能的重要性后端=5%前端=95% 就是这里，前端 =88%80%-90% 的优化空间集中在前端本次话题14条优化军规120 条最佳实践2性能分析工具介绍314条优化原则 content尽可能的减少HTTP请求数使用CDN添加Expires头(或者 Cache-control)Gzip 组件把CSS样式放在页面的上方。将脚本放在底部(包括内联的)避免在CSS中使用Expressions将javascript和css独立成外部文件减少DNS查询压缩JavaScript和CSS文件 (包括内联的)避免跳转移除重复的脚本配置 ETags缓存Ajax请求serverserverservercssjavascriptcsscssjavascriptcontentcssjavascriptcontentjavascriptservercontent/performance/rules.html/performance/rules.html 尽可能的减少HTTP请求数组件越少 = 页面越快减少HTTP 请求开销整合脚本, 整合样式, 整合图片为 CSS SpritesCSS Sprites10个请求变为了一个background-position: -0px -0px;background-position: -20px -0px;background-position: -40px -0px;background-position: -60px -0px;background-position: -80px -0px;background-position: -100px -0px;background-position: -120px -0px;background-position: -140px -0px;background-position: -160px -0px;background-position: -180px -0px;使用CDN（Content Delivery Network）静态的内容让内容更靠近你的用户Akamai, Amazon S3添加Expire头(或者 Cache-control)静态的内容“Never expire” 设置 Expires 头永不过期一旦内容被缓存，浏览器就不会再发起请求你需要更新内容时，重命名它Apache 例子: ExpiresActive On ExpiresDefault modification plus 10 years 动态的内容使用 Cache-control使用 If-Modified-Since启用Gzip压缩发送前压缩内容，由浏览器解压主流浏览器支持压缩的内容有哪些信誉好的足球投注网站引擎蜘蛛也是如此请求头信息 Accept-Encoding: gzip,deflate 响应头信息 Content-Encoding: gzip 所有的文本内容都应该被gzip压缩: html (php), js, css, xml, txt…把CSS样式放在页面的上方Firefox 和 IE 在CSS传输完成之前不会渲染任何东西。此时有些 CSS 并不是必要的，例如 @media print尽可能早的把样式放置到文档中 head titleMy page/title link href=“styles.css” …/ /head body !-- content --将脚本放在页面底部Scripts 阻塞下载浏览器的逻辑：因为脚本可以在任何时间执行 location.href 或者 document.write ，何必下载可能没有用的内容呢？将脚本放在底部可以缓解阻塞下载页面主体内容内嵌脚本也该如此 !-- content -- script src=“script.js” …/ /body /html避免在CSS中使用ExpressionsCSS expression: #content { position: absolute; left: expression(document.body.offsetWidth+‘px’); } 只有IE支持（IE8标准模式停止支持）XSS注入攻击它们的执行次数常常比你预期的要多永远不要使用它将JavaScript和CSS独立成外部文件有助于缓存, 永不过期的策略与其他页面共享会增加2个或更多的HTTP