前端性能优化的心得
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一些经验总结
• 不要迷信他人的经验，要根据具体情况和自身 的特点进行分析，取精去粕 • 不要什么东西去自已DIY，把专业的事情交给 专业的人去做 • 计划要适当，不要过度计划，把精力花在最重 要最紧急的事情上面 • 商用软件不能满足大规模系统的需求 • 采用开源软件与自主开发相结合，有更好的可 控性和更大的优化空间，系统上有更高的可扩展 性
速度优化可以做些什么
• 前端 • 后端
速度优化案例
• 使用预加载策略减少高峰流量 • 使用次级域名解决跨网访问 • 使用Quicklink避免了大量的服务器端重复计算 和客户端的重复渲染 • PageCache加速Facebook主页的性能并降低服 务器开销 • 通过采用微处理器内的流水线技术，将 Facebook网站用户感知性能加速一倍以上 • 使用无阻滞脚本加速JS的加载
Dom Script Vs.Iframed JS
• 两种技术都能做到无阻滞脚本加载。 • 都能保障JS文件的正确加载执行. • 都略有延迟,8%左右的反馈慢于直接 doc.write引入的JS300ms. • 在直接较量中,测试收到的25013次反馈中, 有14404次Iframed JS先返回.略占优. • 使用Iframed JS重构原有代码改动量要大一 些
Velocity China 2010
参会的一些心得体会
• • • • • 速度优化很重要 速度优化要从哪里入口 速度优化可以做些什么 速度优化案例 速度优化经验总结
速度优化很重要
• 据统计页面速度打开速度每提升10%，将会有：
• • • • • 6-8%点击量提升 20% PV/UV的提升 15%用户满意度的提升 20%收入的增加 15%用户因为网速快彻底舍弃竞争对手
• 对于1亿PV/Day的网站来说，响应速度每提高：
• 1ms，将减少1个人27.8小时/天的社会时间浪费 • 13ms，将减少1个人1年/天的社会时间浪费
速度优化要从哪里入口
• 领导的支持（重视、资金、取舍、奖励） • 全员的参与（关注、实施、经验、求精） • 数据作依据（便捷、直观、慢点、真实）
BigPipe产生的原因（一）
BigPipe产生的原因（二）
• • • • 在一个7s的服务器请求中： 1-2s:服务器生成 1-2s:网络传输 3-4s:页面渲染 3-4s:
BigPipe产生的原因（三）
BigPipe的工作原理（一）
BigPipe的工作原理（二）
使用无阻滞脚本加速JS的加载
PageCache的工作原理
• 1.用户点击一个链接或浏览器的前进后退按钮 • 1.5 PageCache把页面内容保存在一个js变量里，当 Qulicklink要发送一个请求前，先检查PageCache,把不 在PageCache的需要请求的数据提取出来 • 2. Qulicklink发送一个Ajax请求到服务器 • 3.服务器响应把非重复内容送达客户端 • 3.5把接收的数据存在PageCache里 • 4.Quicklink清空客户端内容区域并填充新内容 • 5.下载新的jst/CSS内容 • 6.Qulick动态的呈现新页面内容
PageCache对数据更新的应对方法
• 实时性： 实时性：
• 个人首页变化了或者首页上的广告需要变化？ 个人首页变化了或者首页上的广告需要变化？ • OnPageRead的API定义回调API，允许开发人员对一些实时性比较高的 数据进行实时更新
• 一致性： 一致性：
• 用户评论或动态变化了怎么办？ 用户评论或动态变化了怎么办？ • 自动记录并重播，把一些相关的请求记录起来，在用户访问的时候， 通过重播Ajax来让PageCache更新数据或清空数据
低峰流量是否能尽其用？
用户浏览的习惯
使用预加载策略机制减少高峰流量
改造后的流量变化情况
高峰时间对用户的影响
大量用户使用了第三方DNS
跨网访问速度远不如网内访问
使用次级域名解决跨网访问
Quicklink产生的原因（一）
Quicklink产生的原因（二）
QuickLink的工作原理
Iframed JS 方法详情
• function iframedJS(s){ • document.write("<iframe id= 'i'></iframe>"); • var d = document.getElementById("i").contentWindow.document; • d.write('<!doctype html><html><body><scr' + 'ipt src="'+s+'"></scr' + 'ipt></body></html>'); • window.setTimeout((function(){d.close();}),0); • } • 没有src的iframe的location和父页面相同,所以不存在跨 域问题. • iframe内的脚本下载对父页面其他内容而言是无阻滞的.
• Script Defer • Script DOM Element • Iframed JS
பைடு நூலகம்
Script Defer脚本速度不符合要求
• IE中带defer属性的<script>执行时机即为 domReady时. • Script Defer加载脚本会严重拖后页面效果展 现,不可行!
Script Dom Element 方法详情
Iframed JS 兼容性
• 父页面进行了域名升级:document.domain= "a.com",IE报错 • <iframe id= "testiframe" src= "javascript:void((function(){var d=document;d.open(); d.domain='a.com';d.write('');d.close()})())"></iframe> • 在iframe的src,通过javascript协议执行同样域名升级 语句 • 刷新原页面, javascript:协议的语句可能未执行. • Firefox doc.write iframe至页面,可能不能马上取到其 引用. • 对同一个iframe多次进行doc.open+write+close,会增 加浏览器历史记录.
• 在Facebook的应用成果
• 减少10%-30%代码传输量 • 减少20%-30%的服务器响应时间 • 45%的页面请求来自于Quliklink
• 适用范围
• 粘性强的网站 • 有较多的页面元素类似 • 对SEO要求不强的页面
PageCache产生的原因
• 很多用户的访问轨迹：
个人首页->个人档案->个人首页->好友动态->个人首页->我的相册->详 细相片->个人首页
开源项目推荐
• • • • • • TFS（Taobao File System） 解决海量小文件的分布式存储 http://code.taobao.org/svn/tfs/trunk/ Tair 解决高可用Key/Value分布式存储 http://code.taobao.org/svn/tair/trunk/
• • • • • • • function scriptDomElement(u) { var s = document.createElement('script'), h = document.getElementsByTagName('head')[0]; s.src = u; s.async = true; s.async = true; if(h)h.insertBefore(s,h.firstChild); 阻滞并不仅仅是平行下载的问题,还要区分下载阻滞 和运行阻滞. • Firefox会在下一个script节点处导致运行阻滞. • 在给script增加了async属性后,除了Opera浏览器都做 到了真无阻.
• • • • • • 1.用户点击一个链接或浏览器的前进后退按钮 2.Quicklink发送一个Ajax请求到服务器 3.服务器响应把非重复内容送达客户端 4.Quicklink清空客户端内容区域并填充新内容 5.下载新的jst/CSS内容 6.Qulick动态的呈现新页面内容
Quicklink的应用