Web前端性能优化实践与提高.pptVIP

并行加载、预加载： HTTP1.1 1个主机 2个主机 速度提高一倍 各个浏览器的并行下载数 2个主机是比较合适的 使用一个子域名处理静态文件，实现并行下载，提高加载速度。 这是一个复杂且棘手的话题，浏览器之间存在差异： Javascript依赖关系 外部加载js 1.XHR eval 2.XHR Injection 3.Script in Iframe 6.Script DOM Element 7.Script Defer/Async 5.document. write Script Tag 4.Cache Trick 8.Web Worker XHR Eval XHR injection Script in Iframe Script DOM Element Script Defer Script DOM Element(FF) Script Defer(IE) Managed XHR Injection Managed XHR Eval Script DOM Element Script Defer XHR injection XHR Eval Script in Iframe Script DOM Element(IE) Script DOM Element(FF) Script Defer(IE) Managed XHR Eval Managed XHR Injection Managed XHR Injection Managed XHR Eval Managed XHR Injection Managed XHR Eval Script Iframe XHR Injection XHR Eval Script DOM Element(IE) Script DOM Element(FF) Script Defer(IE) Script DOM Element 跨域 同域 有序 无序 有序 无序 显示等待 显示等待 不显示等待 不显示等待 分析： Script DOM Element √跨域、在 Firefox/Opera 下；同时还能保证它们的执行顺序； ×在 IE（以及 Safari/Chrome）下，浏览器不能保证这些 js 的执行顺序，哪个先下载完浏览器就会先执行哪个。 Cache Trick √解决Script DOM Element 不能解决的问题； דtext/cache” 这种 trick 在 Firefox/Opera 被拒绝，同时，这种方法需要浏览器支持并且开启缓存； XHR Injection √解决Cache Trick面临的问题； ×不支持跨域； attachEvent 优先使用 优化系统 = 动态压缩、合并静态文件 + 并行加载、预加载（js执行顺序） a.js b.js 1.js 2.js 3.js focus:static ab.js 123.js url暂存页面value 依赖关系Control 动态压缩、合并 服务器 缓存 并行 页面加载完成 实际效果 2 图片懒加载 真的有必要吗？？ 滚动条以下区域 80% 20% 图片加载： 100%的时间、精力 满足了20%的需求 每次请求 10 46G /天 2k 15,000,000 80% × × × 20% × 如何节省这46G流量？ 当用户试图滚动或其他方式更改当前视图范围时，才进行图片加载。 Page 仅引入js 所有img src= / 缓存src属性 移除src属性 还原src属性 √js方便切换、管理 √页面代码无需改动 可视范围变化 测试结果： 1、firefox3.5以前版本及ie下，部分图片下载，js运行，中止图片下载； 2、firefox3.6以后及webkit下，完全无法控制，图片均已下载； 真的很完美了吗？ ×不是真正的懒加载 √代码无侵入 方案二 Page Js control textarea 需要懒加载的html代码作为文本放置在textarea中 可视范围变化时，控制代码还原 √不局限于img图片的懒加载 √真正实现懒加载 ×代码侵入比较严重 ×js禁用页面半瘫痪（可以不考虑） 方案三 Page Js control img img img 可视范围变化时，控制代码还原 img的src属性代替为自定义属性 如：src ? lazysrc √精确控制到单个img是否懒加载 √真正实现图片懒加载 ×代码仍具有一定的侵入性，但是有益的 ×js禁用，但只限于配置了懒加载的图片 我们的方案。 实现细节 细节决定成败 加载时机 触发事件 范围指定 占位符 搜索深度 加载效果 实际效果 3 BigPipe 服务器 客户端 正在计算 等待。。 完成计算 正在渲染 渲染完成 等待。。 Bigpip