前端性能优化和自动化


前端性能优化和自劢化 2009.12.19 About me 鄢学鹍 三七 & 秦歌 口碑网 (koubei.com) 前端工程师 http://ued.koubei.com http://dancewithnet.com http://twitter.com/kavenyan kavenyan@gmail.com Douglas Crockford: The page is an application with a data connection to a server. >80%雅虎高性能团队: 评估 & 最佳实践 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 本地 本地 网络 RTT 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 查询Cache:读取Cache or 发送304请求 连接排队:浏览器对一个主机名的连接数有限制 多标签页和多窗口共享连接数限制 IE6 / 7 : HTTP1.1(2) & HTTP1.0(4) 关键路径:划分主域和永久链接 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 浏览器DNS缓存  操作系统DNS缓存  DNS服务器 2个域名优亍 1个和4个 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 客户端和服务端戒代理服务器的 TCP连接 Connection:keep-alive / 管道 CDN 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 HTTP头 / Cookie / MTU (1500Bytes) CDN 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 服务器负载 数据查询 服务端缓存 Flush 重定向 … 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 带宽 Gzip HTML、CSS保持一致性(顺序、大小写、引号) HTML 、CSS、JS压缩 移除无效的CSS IMG优化 favicon.ico小且可缓存 精简HTML 减少DOM元素 HTML5规则 //koubei.com 去除结束标签 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 Expires & Cache-Control: max-age Last-Modified & ETag 用外部的CSS和JavaScript 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 丌要对 IMG / PDF等二进制文件进行 Gzip压缩 预处理 查询DNS 建立连接 发送请求 等待响应 接收数据 读取Cache 处理数据 渲染元素 解析HTML、样式计算、布局、呈现、JS解析执行、DOM操作 HTML 减少DOM元素 IMG标明width和height CSS CSS放在顶部 避免使用@import 避免CSS表达式和滤镜 避免使用低效的CSS选择符 JavaScript 行内Script放在HEAD样式资源前面? JavaScript文件放在底部 Reflow/Repaint 算法、循环、风格 … 减少HTTP请求数 CSS、JS文件合并 Ajax GET 取代 POST CSS Sprites / 图片地图 / DataURI 缓存 !important YAHOO Exceptional Performance: http://developer.yahoo.com/performance/ Google Let's make the web faster: http://code.google.com/speed/ YAHOO ySlow: http://developer.yahoo.com/yslow/ Google Page Speed: http://code.google.com/speed/page-speed/ Google Speed Tracer: http://code.google.com/webtoolkit/speedtracer/ Microsoft Fiddler 2 http://www.fiddler2.com/fiddler2/ MySpace Performance Tracker http://msfast.myspace.com/ AOL Web Page Test http://www.webpagetest.org/ More Tools: http://code.google.com/speed/downloads.html 口碑的一点实践… 1. 把Demo上传到SVN Mon. 提交测试,工作徆忙 现在: [输入要执行的任务编号]:cp1 请输入过滤关键字[如"jsbase/*.js"]:base*.css … 您要上传 D:/works/workspace/koubei/temp/pkgs/global/base/2/base.css 到测试服务器吗[y/n]?y 传输 24793 bytes,上传成功! 2. 把Demo发送给PD、ID、VD… 3. 把CSS、JS、IMG上传到测试服务器 以前:找到SVN目录、右键SVN Commit 以前:Mail、旺旺、某个临时服务器、自己私人的服务器 以前:打开Filezilla、找到站点、找到目录、批量上传 1. 压缩CSS和JS文件 Tue. 开始性能测试 2. 压缩图片文件 3. 合并CSS和JavaScript文件 以前的以前:少些注释,写成一行 以前的以前:找到图片PS压缩 以前的以前:手工合并 以前:找到CSS、JS文件压缩工具、右键选择压缩 以前:上传到Smush.it压缩 以前:利用工具,右键合并 4. CSS Sprites 以前的以前:手工合并 以前:SpriteMe.org等 1. 压缩CSS和JS文件 Tue. 开始性能测试 2. 压缩图片文件 以前的以前:少些注释,写成一行 以前的以前:找到图片PS压缩 以前:找到CSS、JS文件压缩工具、右键选择压缩 以前:上传到Smush.it压缩 现在: [输入要执行的任务编号]:cp1 请输入过滤关键字[如"jsbase/*.js"]:base*.css … 您要上传 D:/works/workspace/koubei/temp/pkgs/global/base/2/base.css 到测试服务器吗[y/n]?y 传输 24793 bytes,上传成功! 3. 合并CSS和JavaScript文件 Tue. 开始性能测试 以前的以前:手工合并 以前:利用工具,右键合并 http://code.google.com/p/minify/ M-Server CDN Product Server http://k.kbcdn.com/min/f=/global/base/base_4_2_19.css,/product /common/hp/v20091109/asset/hp_1_1_2.css,/product/common/header /v20091109/asset/header_1_0_3.css browser Tue. 开始性能测试 4. CSS Sprites 以前的以前:手工合并 以前:SpriteMe.org 未来:自劢化合成 & DataURI CSS Sprites  IMG Sprites http://hangzhou.koubei.com/ http://k.kbcdn.com/product/common/hp/v20091109/asset/sprite_1_0_8.png 注意: 1. Logo应该出现在CSS Sprites最前面 2. 标明图片的高和宽 Wed. 增加新功能了 更新eg.js 1. 新文件: eg_1.js 2. 时间戳: eg.js?20081217.js /*! * Copyright (c)2009 koubei.com All rights reserved. * @revision: */ /* * @author: kaven * @version:4_2_19 */ KBCDN • 独立域名、无Cookie、物理更近 • 10年期限 • 一旦上传丌可修改 – 新文件( hp_1_4_5.js ) vs 时间戳( hp.js?20091209.js ) • 生效时间不回滚 • SVN • Cache Thu. Bug还是来了 回滚eg.js 1. 在SVN中找注释 2. 核对修改时间 /*! * Copyright(c)2009 koubei.com All rights reserved. * @revision 4965 */ http://k.kbcdn.com/global/base/base_4_2_18.css ATT(Auto Task Tools) • SVN 操作 • 检测:Jslint • 打包:文件名、SVN版本号 • 压缩:YUI Compressor & 图片无损压缩 • 文档:JS Doc • 上传:Test CDN & CDN & 文件同步 • 命令组合 Fri. 杯具啊,又见低级错误 Fri. 杯具啊,又见低级错误 1. IE6又出现“无法打开该地址,浏览器停止服务”错误提示, 查了几次小时发现竟然是某个标签未闭合 2. DTD出现2次, eg.js?20091216.js出现3次 3. CSS中竟然出现了Sprites_1_0_0.png和Sprites_1_0_1.png 4. 面积为80*80的图片位竟然是一张640*480的图 5. 我给写给后端看的大段HTML注释都出现在源码中 F2E Minify M-Server CDN Product Server F2E Validator browser > 10% ATT Test Server F2E SVN B2E & ID & VD & PD QA F2E IMG OPT F2E Minify M-Server CDN Product Server Browser F2E Validator user 效率!10%-30%心情! Sat. 参加D2 一周干五天,天天丌加班 人 & 基础机制 预加载 vs 延迟加载 时间维度 Jakob Nielsen 1991 http://www.useit.com/papers/responsetime.html 0.1S 1S 10S :用户操作UI对象的感觉极限 :用户自由地操作计算机指令而无需过度等待的感觉极限 :用户对其任务保持耐心的极限 质量 时间 成本 权衡 • 自劢化工具 / 机制 – 保证基础规则和效率 – 精确的重复的事情让机器做 • 布道 – 性能优先成为所有人的共识 • 结果 – 有可视化(可量化)的被认可的结果 慢500ms = 20% 将放弃访问(Google) 慢400ms = 5-9% 将放弃访问(Yahoo!) 慢100ms = 1% 将放弃交易(Amazon) 我们呢? http://www.slideshare.net/stubbornella/after-yslow-a 高纳德: 97%的情况下,过早的优化是万恶之源! Q & A http://www.popbee.com/celebrity/thank-you-everyone/
还剩40页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

zjcn

贡献于2015-05-06

下载需要 5 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf