Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Destaque (14)
Semelhante a Lazyload实践
Semelhante a Lazyload实践 (20)
Lazyload实践
- 2. Introduce 吴天豪 口碑网-UED-前端开发工程师 大三 爱折腾 博客: www.f2es.com
- 3. 关于交流会 主动分享 分享没有大小 一个困扰你很久的问题 一个五分钟的小发现 一个好的提高开发效率的工具 一份好的开发经验
- 4. Lazyload 直译：惰性加载 一般我们都会叫它做“延迟加载” http://en.wikipedia.org/wiki/Lazy_loading
- 6. Why lazyload Start sooner Stop waiting
- 9. Total_Speed = Time_to_Download + Time_to_parse + Time_to_execute（evaluation）
- 10. Js-其实是一个老话题了 为什么要延迟加载js 当浏览器下载执行js时，页面的下载和渲染处于等待状态 为什么停滞？ 大家思考一下 1.当页面一边渲染html和css，一边下载并执行脚本，what will happen? 脚本操作的元素可能根本就还没有渲染出来
- 12. 组织脚本 脚本放到页面底部 合并URL （minify） 因为http请求会带来额外的性能消耗，因此下载单个100k的文件比下载4个25k的文件要快。 无阻塞的脚本 异步加载js文件
- 13. 动态加载脚本 方式： XHR 动态脚本 Defer Async …….
- 15. 介绍一个比较少见的方式 Script in iframe 页面中的iframe和其他元素是并行加载的，这样就可以无阻塞的加载script脚本 存在跨域问题
- 17. 监听js是否加载并准备就绪 Firefox,Opera,Chrome,Safari 3+ script.onload ie script.readystatechange script.readyState === “loaded” script.readyState === “complete”
- 18. LoadScript(“jQuery.js”, function(){ $(function(){ //jQuery code }; }
- 19. 不过…文件一多… loadScript(“a.js”, function(){ loadScript(“b.js”, function(){ loadScript(“c.js”, function(){ loadScript(“d.js”, function(){ alert(“哎呀我擦,终于加载好了”); } } } }
- 20. 这样看起来就舒服多了 Load([“a.js”, “b.js”, “c.js”, “d.js”] , function(){ //do something });
- 21. 这样就更好了 Load(“d.js”, function(){ //do something }) “d.js” 依赖于[“a.js”, “b.js”, “c.js”]
- 23. n.onload = n.onreadystatechange = function () { if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { _loaded[this.getAttribute('src')] = true; if (cb) { cb(this.getAttribute('src'), context); } //防止ie6的内存泄漏问题 n.onload = n.onreadystatechange = null; } };
- 24. 加载单个文件的处理。接受五个参数：url, type（文件类型）, charset（编码）, cb（要对应执行的方法）, context（执行上下文环境）
- 25. Do.add('common', {path: 'http://img3.douban.com/js/site/packed_common0.js', type: 'js'}); Do.add('common-eventhandler', {path: 'http://img3.douban.com/js/site/packed_common_eventhandler0.js', type: 'js', requires: ['common']}); Do('common', 'common-eventhandler');
- 26. 问题依然存在： 下载a.js -> 执行a.js回调 -> 下载b.js -> 执行b.js的回调-> 下载c.js -> 执行c.js的回调-> 下载d.js -> 执行d.js的回调 不能做到并行下载….
- 28. 那么在chrome/safari里，可以插入一个<script type=“text/cache” src=“#”>来实现，type=“text/cache”的脚本下载好后会缓存并触发onload，但不会执行。之后再插入script type=“text/javascript”，因为这个时候脚本都已经下载好，所以插入的顺序就是执行的顺序了
- 32. 最后，统一的解决方案 同域文件 用xmlhttprequest请求过来 这时，脚本是以字符串的形式传递过来的 var s = document.createElement('script'); s.text = xhrObj.responseText; head.appendChild(s);
- 34. 跨域的脚本 Firefox/opera里可以用动态 Script DOM element ，完美地实现并行下载和顺序执行 对于 Safari/Chrome/IE ，无法保证顺序执行，通过插入一个 <script type=“text/cache” src=“#”> 来实现。
- 35. defer和async的区别 Defer 延迟 Async异步
- 36. 关于defer <script src=" " defer></script> 加上 defer 等于在页面完全在入后再执行脚本，相当于 window.onload,但应用上比 window.onload更灵活 告诉浏览器这段脚本不需要立即执行，从而做到异步加载，不阻塞其他资源下载 在window.onload处理之前执行defer的脚本
- 37. Defer的水很深… http://msdn.microsoft.com/en-us/library/ms533719(VS.85).aspx https://developer.mozilla.org/En/HTML/Element/Script#attr-defer 都没有涉及执行顺序的问题…
- 38. defer 在ie下能保持执行顺序，无论哪个先下载好---《高性能网站建设进阶指南》35页 测试结果很怪异… http://www.websiteoptimization.com/speed/tweak/defer/ 动态插入的脚本，即使设置defer，依然不能保证执行顺序
- 39. <head> <script defer> alert(3); </script> <script> alert(1); </script> </head> <body> <script defer> alert(4); </script> <script> alert(2); </script> <script> window.onload = function(){ alert(5); } </script> </body> http://stevesouders.com/cuzillion/?ex=10017&title=IE+Ensure+Order+Excution
- 40. Html5 async This Boolean attribute is set to indicate that the browser should, if possible, execute the script asynchronously. If the script cannot be executed asynchronously, or the browser doesn’t support this attribute, the script is executed synchronously (and loading the content blocks until the script finishes running). 加了这个属性就意味这该脚本的执行不会影响页面的加载
- 41. 区别
- 42. 回到根源 Reduce(减少文件大小) Defer(延迟) Go Async(异步) Be Lazy(懒加载) Bite Size(真的需要 JS 吗)
- 44. Html lazyload 对html片段进行延迟加载 极大地减少页面渲染时间 同时解决了图片加载的问题
- 45. 实践 Sina微博 Twitter 淘宝商城 等等
- 46. 思路 1.正常渲染一屏多一点大小的页面 2.把剩下的html代码放到一个容器中，这时不会解析，以文本的形式存在 3.随着用户进行的页面滚动操作逐步渲染页面 4.为开发人员提供相应操作的接口
- 47. 1.容器的选择 textarea noscript 你会选择哪个？
- 48. 容器要求 内部的元素全部以文本或者文本节点的形式解析 可以可判断位置 访问内部的文本
- 50. noscript 在开启脚本的情况下，元素本身可以获取，但是不含占位属性，比如offsetTop,offsetLeft,或者height,width之类的 在IE789下，内部的文本节点是不可访问的或者说在浏览器在开启脚本的情况下渲染好之后就把内部的文本删除了,No dom, no data
- 52. 是么？
- 56. noscript解决方案 对于noscript的占位属性丢失 获取到noscript元素，并在外层套一个textarea元素，textarea元素用visibility:hidden隐藏 为什么不用display:none? 之后，判断noscript元素是否在视口内的任务就顺利移交给了textarea 为什么不用别的元素？比如div之类的 这里就涉及到了文本转义的问题
- 57. noscript解决方案 对于IE789对noscript内部元素的处理 感谢stackoverflow，有位老兄也在研究这个问题 使用iframe来引入noscript元素，然后用ajax动态请求iframe的html代码，因为这部分代码实际上已经在用户浏览的页面上了 拿到完整的html之后用正则把每个noscript内部的文本切割到一个数组里
- 58. <iframe class="k2-display-none" src="?noscript=true"></iframe> 我们可以这样发一个请求 Y.io("?noscript=true", cfg); o.responseText就是含有当前页面noscript标签的html字符串
- 60. 还有问题 开发人员的脚本和一些元素有依赖关系 如果元素没有加载就执行脚本会导致脚本报错 让开发人员在每次获取元素之前都先判断元素是否存在不靠谱，并且脚本并不能直接知道元素到底加载好了米
- 63. 自定义事件 Y. publish(evt_type, opts) 在Y.EventTarget. _yuievt.events里存储 Y. fire( evt_type ) 触发绑定的回调事件队列
- 64. 再具体一点 添加自定义事件 Y.pulish("lazyloadReady:" + i, { type : "lazyloadReady:" + i, preventable : false });
- 65. 触发事件 ev = "lazyloadReady:" + (i + 1); Y.fire(ev);
- 66. 绑定事件 Y.on("lazyloadReady:1" , function(){ alert("第一个模块加载完成"); }); 暂时使用了页面上noscript标签的序号作为事件名…还在考虑更好的方法
- 68. 看看kissy怎么做的 dataLazyload.addCallback(el, fn) 表示当 el 即将出现时，触发 fn 具体实现我觉得应该是类似的，有兴趣的可以看看源代码的实现
- 69. QA
- 70. 谢谢