• 1. Web前端性能优化 实践与提高邢世康 2012.08.18 焦点科技股份有限公司
  • 2. 一个网页从开始加载到完全载入 最长你能“hold”住多久?普通人的接受范围为8s之内根据yahoo曾做过的统计: 慢500ms意味着20%的用户放弃访问google 慢400ms意味着5%-9%的用户放弃访问yahoo! 慢100ms意味着1%的用户放弃在amazon上交易
  • 3. 450,000访问次数 15,000,000页面浏览量 每天,我们有:(3年前)MIC中国制造网我们要保障:页面平均响应时间为2s-3s
  • 4. 页面访问过程:DNS查询建立连接HTTP渲染页面www.made-in-china.com192.168.1.25GET /loginHTTP/1.1 200 OK发送请求服务器响应接收数据预处理缓存…时间线坐而思,不如起而行
  • 5. Gzip压缩压缩合并js、css配置ETag避免404减少cookie体积合理使用cookieJs放在页面底部减少dom数量设置expires、cache-contorl减少dns查找次数缓存ajax子域名划分页面内容CDN。。。今天我们的目标: 分享几套一劳永逸、通用的前端性能优化方案; 讲述探索这些方案的开发思路及所尝试的途径; 服务器动态压缩、合并静态文件 图片懒加载 BigPipe
  • 6. 1服务器动态压缩、合并静态文件
  • 7. 1s1s1s1s存在的问题? 静态文件在开发状态与发布状态的最佳形式存在差异: 开发状态:代码的清晰、易读、易维护; 发布状态:请求数少、体积小;货物
  • 8. 开发环境发布环境文件系统 或缓存服务器 Minify,服务器压缩、合并、 缓存设置Filter处理 还原常规请求自动实现 开发、发布的最佳状态旧方案JSTL+配置XML新方案缓存处理域名管理统一规划…预先压缩 缓存、版本控制 memcache
  • 9. 这样做就够了吗?还能做些什么??两种存在的场景: 压缩、合并后的文件>100k; 响应页面由多个页面组成:include、import等;得出结论: 一个响应页面存在多个js,这个事实无法避免; 阻塞加载
  • 10. 并行加载、预加载:HTTP1.1 > 1个主机2个主机 速度提高一倍各个浏览器的并行下载数2个主机是比较合适的使用一个子域名处理静态文件,实现并行下载,提高加载速度。
  • 11. 这是一个复杂且棘手的话题,浏览器之间存在差异:Javascript依赖关系外部加载js1.XHR eval2.XHR Injection3.Script in Iframe6.Script DOM Element7.Script Defer/Async5.document. write Script Tag4.Cache Trick8.Web Worker
  • 12. XHR Eval XHR injection Script in Iframe Script DOM Element Script DeferScript DOM Element(FF) Script Defer(IE) Managed XHR Injection Managed XHR EvalScript DOM Element Script DeferXHR injection XHR Eval Script in Iframe Script DOM Element(IE)Script DOM Element(FF) Script Defer(IE) Managed XHR Eval Managed XHR InjectionManaged XHR Injection Managed XHR EvalManaged XHR Injection Managed XHR Eval Script IframeXHR Injection XHR Eval Script DOM Element(IE)Script DOM Element(FF) Script Defer(IE)Script DOM Element跨域同域有序无序有序无序显示等待显示等待不显示等待不显示等待分析:
  • 13. Script DOM Element √跨域、在 Firefox/Opera 下;同时还能保证它们的执行顺序; ×在 IE(以及 Safari/Chrome)下,浏览器不能保证这些 js 的执行顺序,哪个先下载完浏览器就会先执行哪个。Cache Trick √解决Script DOM Element 不能解决的问题; דtext/cache” 这种 trick 在 Firefox/Opera 被拒绝,同时,这种方法需要浏览器支持并且开启缓存;XHR Injection √解决Cache Trick面临的问题; ×不支持跨域;attachEvent优先使用
  • 14. 优化系统 = 动态压缩、合并静态文件 + 并行加载、预加载(js执行顺序)a.js b.js1.js 2.js 3.jsab.js 123.jsurl暂存页面value依赖关系Control动态压缩、合并服务器缓存并行页面加载完成
  • 15. 实际效果
  • 16. 2图片懒加载
  • 17. 真的有必要吗??
  • 18. 滚动条以下区域80%20%图片加载:100%的时间、精力 满足了20%的需求 每次请求1046G/天2k15,000,00080%×××20%×
  • 19. 如何节省这46G流量?当用户试图滚动或其他方式更改当前视图范围时,才进行图片加载。 Page仅引入js所有缓存src属性移除src属性还原src属性√js方便切换、管理√页面代码无需改动可视范围变化测试结果: 1、firefox3.5以前版本及ie下,部分图片下载,js运行,中止图片下载; 2、firefox3.6以后及webkit下,完全无法控制,图片均已下载;真的很完美了吗?×不是真正的懒加载√代码无侵入
  • 20. 方案二 PageJs controltextarea需要懒加载的html代码作为文本放置在textarea中可视范围变化时,控制代码还原√不局限于图片的懒加载√真正实现懒加载×代码侵入比较严重×js禁用页面半瘫痪(可以不考虑)
  • 21. 方案三 PageJs controlimgimgimg可视范围变化时,控制代码还原img的src属性代替为自定义属性 如:src  lazysrc√精确控制到单个img是否懒加载√真正实现图片懒加载×代码仍具有一定的侵入性,但是有益的×js禁用,但只限于配置了懒加载的图片我们的方案。
  • 22. 实现细节细节决定成败加载时机触发事件范围指定占位符搜索深度加载效果
  • 23. 实际效果
  • 24. 3BigPipe
  • 25. 服务器 客户端正在计算等待。。完成计算正在渲染渲染完成等待。。Bigpipe思想3s4s1s1s普通模式:1s+3s+1s+4s=9sflushbigpipe:1s+4s+1s=6s4s
  • 26. 最佳适用场景: 网页第一个请求时间较长; 动态内容可以划分为多个区块显示,且各个区块之间的关系不大; 各个区块的动态数据在服务端能够通过url或cookie中的key并发获得;
  • 27. 方案Page block2block4服务器 并发 flushJs controlblock1block3JsonJsonJsonJson文件系统■ MVC模式下开发模式冲突?■ 依赖JavaScript,SEO的影响?■ HTTP请求数的权衡?■ 我觉得用ajax也可以做?
  • 28. 脚本阻滞; 最快可交互时间; 合理划分代码布局;实现细节:
  • 29. 总结: web前端性能优化的重要性; 优化的思路及原则; 探讨框架式的优化实践: 服务器动态压缩合并静态文件; JavaScript的并行下载与依赖关系; 图片懒加载; bigpipe;
  • 30. 性能优化永无止境 最佳优化因地制宜
  • 31. xingshikang@made-in-china.com
  • 32. 报名地址: http://ftf.focuschina.com 官方微博: @焦点技术大会 欢迎大家前来继续交流探讨!